Animacja powrotu do stanu pierwotnego w hamburger menu

Witam próbuję zrobić sobie dostępne menu hamburger jednak mam problem z animowaniem tego burgera na np. krzyżyk czy coś takiego jak na razie to działa tak , że jak kliknę poza przycisk to wraca do stanu pierwotnego , a nie jak kliknę drugi raz macie jakieś pomysły ? https://codepen.io/anon/pen/EqxONg

Raloseq napisał(a):

Witam próbuję zrobić sobie dostępne menu hamburger jednak mam problem z animowaniem tego burgera na np. krzyżyk czy coś takiego jak na razie to działa tak , że jak kliknę poza przycisk to wraca do stanu pierwotnego , a nie jak kliknę drugi raz macie jakieś pomysły ? https://codepen.io/anon/pen/EqxONg

bo transforma masz ustawionego na focusie, czyli jak klikniesz gdzies poza hamburger to focus się wylaczy. Lepiej stworz sobie klase np. js-hamburger-active do rodzica, pozniej stargetuj sobie childreny ktorym podmienisz style (transform). Zmiany wygladu elementow najlepiej robic poprzez dodawanie do nich klas ktore te style zawieraja. Jesli uzywasz jQ to mozesz uzyc toggleClass(), albo po prostu eventlisterena, gdzie piszesz cos takiego:
if ($(this).hasClass('js-hamburger-active')) {
$(this).removeClass('js-hamburger-active')
} else {
$(this).addClass('.js-hamburger-active')
}

Zobacz tutaj jak to jest zrobione, zbadaj sobie kreski hamburgera i zobacz ze style są zalezne od dynamicznej klasy która dodaje sie/usuwa z kliknieciem na hamburger.
http://wroc.uzs.gov.pl/

A niech cię diabli, z 5 minut dedukowałam, co ten JS wyprawia, a tu masz pomieszane reakcje w CSS i JS :p