More

    Hamburger menu w Pure CSS

    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.

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    11 bibliotek, które powinien znać każdy iOS developer

    Przez dwanaście lat, App Store mocno zadomowił się na naszych urządzeniach mobilnych, oferując coraz to większą różnorodność aplikacji. W tym roku ich...

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    Hacktoberfest – ten hackathon to małe piwo

    Hackathon to wydarzenie programistyczne polegające na zrealizowaniu w określonym czasie projektu zgodnego założeniami organizatora. Większość z was pewnie kojarzy słowo Hackathon. Najczęściej...

    #IThotStory, czyli największe wpadki programistów

    Co prawda programista to nie saper i może pomylić się więcej niż raz, ale każda wpadka niesie za sobą jakieś ryzyko. Zaliczyliście...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X