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

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X