Responsywne menu rozwijane w JavaScript. UPDATE


23 listopada 2013 / Michał Załęcki


Strony, które poprawnie wyświetlają się na urządzeniach mobilnych z pewnego dobra luksusowego stały się artykułem pierwszej potrzeby dla przeciętnego internauty. Tak jak opanowanie jakiejś siatki jest proste i przyjemne tak menu może przysporzyć nam trochę kłopotów. Jest kilka popularnych typów responsywnych menu, lista wyboru (bardzo bolesne doświadczenia dla semantyki), wysuwane od boku i takie, które nazywam „harmonijkami”. Właśnie nad tym trzecim typem skupię się w tym poradniku, na końcu otrzymamy taki efekt. Pliki możecie od razu pobrać.

HTML

Parafrazując pierwszą polską encyklopedię powszechną, HTML jaki jest, każdy widzi. Tutaj bez większych niespodzianek, dostajemy to czego się spodziewaliśmy.

Mimo, że nazwy klas są bardzo opisowe, to pokrótce je opiszę.

  • menu – identyfikuje nasze menu
  • group – odpowiada za samooczyszczenie się opływania elementów listy
  • has-sub-menu – klasa dla elementów listy, które zawierają podmenu
  • show-sub-menu –pojemnik dla ikony do rozwijania menu, gdy mamy do czynienia z ekranem dotykowym, czyli tam gdzie nie możemy wykorzystać zdarzenia hover
  • icon-angle-circled-down – ikona z fontello.com
  • sub-menu – klasa podmenu
  • open – klasa dla podemu, które powinno być aktualnie rozwinięte, jest dodawana za pomocą JavaScriptu

CSS

Menu używa modelu pudełkowego „box sizing”, jest on bardzo wygodny i jeżeli jest Ci obcy to powinieneś nadrobić zaległości. W dużym skrócie powoduje to, że padding i obramowanie są zawarte w szerokości i wysokości elementu.

Modernizr dodaje do tagu html klasę touch, gdy urządzenie jest „uzbrojone” w wyświetlacz dotykowy. Niestety nie robi tego bezbłędnie, ale o tym w sekcji JavaScript.

Na koniec trochę kodu, który zmieni wygląd menu na urządzeniach mobilnych. Menu nie ma ograniczeń co do ilości poziomów zagnieżdżania, ale nie każcie swoim użytkownikom przechodzić do trzeciego czy czwartego poziomu. Jeżeli zachodzi taka potrzeba to warto pomyśleć o przeprojektowaniu waszego menu. Standardowo wcięcia są do czwartego poziomu, ale dodanie kolejnych klas indent-n (gdzie n to poziom zagnieżdżenia w menu).

Cały kod CSS:

JavaScript

W przypadku standardowych ekranów monitorów możemy trochę pooszukiwać, żeby sprawdzić jak nasz strona będzie działać na tabletach i smartfonach.

Uważam, że Modernizr do ideału ma naprawdę daleko, głownie za sprawą jego powolnego rozwoju i trochę olewackiego stosunku do użytkowników, ale i tak z niego korzystam, gdyż jest składnikiem wielu innych narzędzi, które sobie cenię (HTML5 Boilerplate, Zurb Foundation itd.). Jego popularność sprawia, ze każdy jego bug został już chyba poruszony w Sieci od kilku do kilkuset razy, tym bardziej dziwi, że błędy te są tak wolno poprawiane, gdyż często wystarcza jedna lub dwie linie kodu by sobie z nimi poradzić. Powyższy kod naprawia „rozpoznawanie” ekranów dotykowych (w praktyce to systemu operacyjnego) na urządzeniach z Windows Phone.

Przy menu warto zadbać o dostępność i umożliwić jego przechodzenie za pomocą tabulatora, co w przypadku menu rozwijanego wymaga zawszę paru sztuczek. Kod ten wyłącza menu po jego całkowitym przejściu.

Żeby nie zmuszać użytkowników do mozolnego zwijania nawigacji na ekranach dotykowych warto zamykać je po kliknięciu w dowolny, inny obszar strony.

Cały kod JavaScript:

UPDATE

Menu doczekało się swojej nowej, poprawionej wersji. W nowej wersji zaszły m. in. następujące zmiany:

  • Zastosowałem podejście Mobile First kosztem wsparcia dla IE8
  • Animacje rozwijania i zanikania
  • Kod JS i CSS (SASS) praktycznie przepisany na nowo
  • Bardziej elastyczny kod, większa ilość zmiennych konfiguracyjnych w SASS
  • Jeszcze lepsze działanie na urządzeniach mobilnych
  • Projekt przeniesiony na GitHub
  • Poprawiona dostępność
  • Poprawione mniejsze bugi (tzw. feature-y)

HTML

CSS