Jak zrobić hamburgera?

Jak zrobić hamburgera?

Uwielbiam jeść, więc hamburger w menu będzie naszym daniem głównym. Jakich składników potrzebujemy aby tytułowy hamburger wyglądał dobrze i smakował jeszcze lepiej?

Wbrew pozorom, nie potrzebujemy całej gamy składników – wystarczy kilka, a będą nimi:

  • Przeglądarka internetowa
  • HTML i CSS
  • jQuery

Brzmi zachęcająco? Mam nadzieję, jednak aby nie być gołosłownym to dzisiaj będziemy budować to co możesz zobaczyć poniżej (nie zapomnij zmniejszyć szerokości przeglądarki, dopiero wtedy odnajdziesz smacznego hamburgera).

See the Pen Responsive Menu (Hamburger) by Tomasz Wikło (@studioleopard) on CodePen.19725

Struktura przede wszystkim

Jak możesz zobaczyć, cały potrzebny kod HTML zawiera się w znacznikach <header></header>. 

See the Pen Responsive Menu (Hamburger) by Tomasz Wikło (@studioleopard) on CodePen.19725

Nie ma tutaj absolutnie nic skomplikowanego – nagłówek z logiem, lista nawigacyjna i to właściwie koniec. Na uwagę zasługują zastosowane klasy:

  • container – potrzebny po to, aby ustalić 95% szerokości dla nagłówka dla rozdzielczości większych od 768px oraz 100% dla mniejszych rozdzielczośći
  • clearfix – dla nagłówka z logiem oraz menu zastosowaliśmy właściwość float, dlatego aby przeglądarka poprawnie interpretowała wysokość nagłówka potrzebujemy zastosować właściwość CSS clear: both; 
  • hamburger – dzięki tej klasie, dodamy hamburgera
  • nav-menu – z punktu widzenia CSS jest zbędną klasą, jednak będzie nam potrzebna w skrypcie aby wyświetlić menu po kliknięciu w hamburgera

Miłe dla oka przede wszystkim

CSS odpowiedzialny jest za wygląd naszego nagłówka.

See the Pen Responsive Menu (Hamburger) by Tomasz Wikło (@studioleopard) on CodePen.19725

Większość kodu jest zapewne dla Ciebie jasna, jednak chcę opisać kilka ciekawszych elementów.

  • header h1 a odnośniki są elementami inline, dlatego aby ustawić  logo w menu musimy zmienić display na block i ustawić szerokość oraz wysokość; dzięki background-size: 100%; upewniamy się, że nasze logo będzie responsywne (w naszym przypadku dostosuje się do określonego obszaru aby logo było widoczne)
  • .hamburger nasz hamburger ma być widoczny poniżej 768px (tak założyłem), dlatego musimy go ukryć za pomocą display:none; a pokazać dopiero w zapytaniach @media za pomocą display: block; 
  • naszą wisienką na torcie jest .hamburger:before, dzięki zastosowaniu content i UTF mogliśmy wstawić ikonkę hamburgera bez stosowania alternatywnych rozwiązań jak np. Font Awesome

Sam CSS to nie wszystko

Nasz hamburger jest już widoczny, wręcz gotowy do zjedzenia. Jednak jest pewien problem – ukryliśmy w CSS menu dla mniejszych rozdzielczości, teraz potrzebujemy go wyświetlić po kliknięciu w hamburgera. Potrzebujemy na stronę dodać akcję, po której nasz hamburger wyświetli menu.

See the Pen Responsive Menu (Hamburger) by Tomasz Wikło (@studioleopard) on CodePen.19725

Powyższy kod został napisany w jQuery, dlatego jeżeli wcześniej nie miałeś z nim styczności koniecznie zobacz artykuł Trochę interaktywności, czyli jak dodać jQuery do strony HTML.

  • najpierw upewniamy się, że skrypt zostanie załadowany po pełnym wczytaniu kodu HTML (.ready())
  • następnie definiujemy akcję .click, która ma się wywołać po kliknięciu w element HTML z klasą .hamburger
  • naszą akcją jest dodanie lub usunięcie(w zależności czy klasa już istnieje lub nie – taki prosty włącznik i wyłącznik) klasy visible dla elementu ul z klasą nav-menu,  bez skryptu niestety nasze menu musiałoby być zawsze widoczne – lub zawsze niewidoczne

Od tej chwili nasze hamburgerowe menu jest gotowe. Gdybyśmy w menu mieli znacznie więcej elementów i nachodziłyby na logo lub zjeżdżały do nowego wiersza, wystarczy dodać więcej zapytań @media dla problematycznych rozdzielczości.

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.