Do stylowania pewnych elementów na stronie czy w aplikacji, jak na przykład w dostosowaniu wyglądu menu na ekranach mobilnych, czasami używa się JS. Ten sam efekt w wielu przypadkach da się jednak osiągnąć w samym CSS, co pozwala na delikatną optymalizację działania witryny. W tym wpisie pokażę, w jaki sposób możemy osiągnąć klikalny hamburger, który będzie pokazywał i ukrywał menu na urządzaniach mobilnych bez używania do tego JavaScriptu.
Jak to działa?
CSS pozwala nam tworzyć style dla elementów znajdujących się w różnych stanach. Najbardziej oczywisty jest stan hover w momencie, w którym najeżdżamy na element myszką. Możemy także odnieść się do stanu checked na polu typu checkbox. Korzystając z tego rozwiązania, mamy już do dyspozycji dwie wartości logiczne – checkbox zaznaczony oraz niezaznaczony. To w zupełności wystarczy, aby odróżnić czy menu pokazać, czy ukryć.
HTML sam obsługuje klikanie na checkbox i przełączanie jego stanu, więc nie wymaga to kodowania. Aby móc odnieść się do menu, które ma być pokazane lub ukryte w zależności od stanu checkboxa, jedyną możliwością jest skorzystanie z selektora rodzeństwa. To narzuca ograniczenie. Checkbox musi być rodzeństwem menu.
Implementacja
Czas rzucić okiem na kod. Na początek sprawdźmy HTML.
W elemencie z klasą hamburger-box wyświetlimy nasz hamburger, lista ul będzie naszym menu. Czas sprawdzić jak to wygląda w SCSS.
Na element nav ustawiamy position: relative, ponieważ w jego obrębie absolutnie ustawimy hamburger. Checkbox z klasą hamburger-checker otrzymuje opacity: 0, aby był niewidoczny dla użytkownika, ale nadal klikalny.
Wspólny selektor dla checkboxa oraz hamburger-box ustawia wymiary obu tych elementów. Dzięki temu oraz position: absolute nasz hamburger i checkbox wyświetlają się dokładnie w tym samym miejscu. Użytkownik klikając na hamburger, tak naprawdę klika w checkbox, dzięki czemu zachodzi zmiana stanu odczytywana przez CSS.
Spójrzmy teraz na kod, który sprawia, że menu hamburger działa na małych ekranach:
Na ekranach poniżej 560px szerokości pokazujemy hamburger oraz ukrywamy menu. Ukrycie menu jest realizowane za pomocą translateY. Dzięki temu uzyskamy efekt “zwijania” i “rozwijania” menu.
Cała magia zachodzi w linijce 14. W niej tworzymy selektor wyszukujący listę ul, która jest rodzeństwem elementu z klasą hamburger-checker znajdującego się w stanie checked. Pozostaje jedynie zmienić translateY na domyślne, aby nasze menu pokazało się ponownie.
Całość kodu możesz sprawdzić na CodePen pod tym linkiem.
Powyższe rozwiązanie pozwala zbudować nam w pełni funkcjonalny hamburger bez ani jednej linijki kodu JS. Ten sam trik możemy też stosować w innych sytuacjach. Na przykład w takich, w których potrzebujemy w interfejsie zmiany zachowania elementu w zależności od dwóch stanów. W takiej sytuacji ukryty checkbox okaże się pomocny.
