Wstęp do hamburger menu (część pierwsza)

Dodano: Styczeń 23 2018

Jak zrobić hamburger menu część pierwsza, czyli zwykłe menu w rozdzielczości poniżej 800px zmienia swój wygląd i pojawia się dopiero po kliknięciu knefla.

Żeby zacząć przedewszyskim potrzebujemy skrypcik do dodawania i usuwania klasy. Szczegóły macie w poprzednim ćwiczeniu: http://geekfactory.pl/strona/cwiczenie/zmiana_wygladu_elementu_po_kliknieciu

Ok jeżeli juz podpieliście skrypcik to teraz co robimy? Po pierwsze mamy zwykłe menu z listą linków. Macie sprawić że poniżej jakiejś rozdzielczości (niech będzie 800px) menu zmienia wygląd i znika (wysówa się poza scenę w lewo). Pojawia się za to knefel do kliknięcia. Klikamy i menu wjeżdża z lewej strony. Klikamy knefla raz jeszcze i menu nam znika. 

Dwie ważne uwagi.
W rozwiązaniu zaprojektowałem w CSS najpierw wersję podstawową menu, a potem wersję poniżej rozdzielczości 800px. Jeśli chcielibyście być poprawni to najpierw powinno się definiować wygląd dla małych rozdzielczości, a potem iść w górę. Dlaczego zrobiłem na odwrót? Z przyzwyczajenia. Wielu programistów uczyło się za czasów kiedy były tylko monitory 15 cali i stała rozdzielczość 1024x768 i nikt nie słyszał o wersjach mobilnych. Dlatego kiedy spopularyzowały się różne rozmiary ekranów to i większość ludzi zaczeła niejako "dodawać" wersje mobilne do gotowych projektów. Pozatym wydaje mi się że ten sposób jest nie jako naturalniejszy więc i łatwiejszy w nauce. Jednak zaznaczam raz jeszcze że poprawnie byłoby projektować od najmniejszej wersji do największej z uwagi na właściwości samego CSSa. 

Pare kodów uprościłem, jak chodźby wymuszając kolor linków !important. Oczywiście nie jest to znowu poprawne ale staram się skupić na problemie bo robiąc wszystko zgodnie ze sztuką, uwzględniając jeszcze zasady UX i UI to te ćwiczenie miałoby 100 stron opisu, a i tak podzieliłem je już na kilka części :) 

  • @media(max-width:800px){ /* KOD */ }  ten kod będzie wykonywany tylko gdy rozdizelczość jest mniejsza niż 800px
  • Najpier upewnijcie się czy prawidłowo podpieliście skrypt z poprzedniego zadania
  • Dodanie transition: all 500ms linear; do klasy .menu w CSS sprawi że animacja "wjazdu" będzie płynna
  • Knefel do menu może być cały czas wystarczy zrobić mu display:none; jako domyślną wartość wyświetlania a na rozdzielczosci poniżej 800px dać display:block; 
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.