Hamburger menu to ikona, która nie potrzebuje instrukcji obsługi. Towarzyszy nam, użytkownikom na stronach od samego początku rozpowszechnienia internetu. To cichy bohater nawigacji, który zawsze ratuje sytuację, gdy UX strony sprawia, że nie możemy się na niej odnaleźć. Czym jest hamburger menu i jak je stworzyć?
Spis treści
Hamburger menu – co to?
Dziś bliżej przyjrzymy się hamburgerom. Jeśli poczuliście się głodni, to spokojnie, nie będzie tu przepisów kulinarnych. Hamburger menu to określenie charakterystycznej ikony złożonej z trzech poziomych linii. Po kliknięciu odsłania ona najczęściej menu nawigacyjne z najważniejszymi zakładkami strony. Takie rozwiązanie pozwala zachować porządek i oszczędność miejsca, szczególnie na niewielkich ekranach. Nic dziwnego, że hamburger szybko zadomowił się na stronach internetowych oraz w aplikacjach mobilnych.
Skąd wziął się hamburger menu?
Niektóre pomysły są w stanie podbić cały świat i zakorzenić się w nim na stałe. Tak było z prostą ikoną, która powstała na początku lat 80. z myślą o interfejsie komputera Xerox Star. Za jej stworzenie odpowiadał projektant interakcji Norm Cox, któremu zależało na prostym symbolu wskazującym na dodatkowe opcje. Charakterystyczny układ trzech linii przez lata pozostawał raczej na uboczu, aż do rozwoju smartfonów i aplikacji mobilnych. Wraz z ograniczoną przestrzenią ekranów hamburger menu otrzymało drugie życie i stało się jednym z najbardziej rozpoznawalnych elementów nawigacji.
Gdzie sprawdza się hamburger menu?
Hamburger menu często spotykany jest na stronach, jednak wcale nie jest obowiązkowy. Jeśli strona jest dobrze zaplanowana pod kątem UX/UI, hamburger menu nie jest potrzebny. Jednak na pewno nie zaszkodzi. Ikona przyciąga jak magnes zagubionych użytkowników. Szczególnie dobrze sprawdza się na urządzeniach mobilnych, gdzie klasyczne menu zajmowałoby zbyt dużo cennego miejsca. W przypadku rozbudowanej nawigacji może również uporządkować wiele zakładek i zamienić je w proste, rozwijane menu.
Jak stworzyć hamburger menu?
Oczywiście każdy może mieć własną interpretację klasycznych narzędzi, jednak pewien trzon powinien pozostać bez zmian. W przeciwnym razie użytkownik może nie rozpoznać ikony i nie wiedzieć, co właściwie się za nią kryje. Warto więc pamiętać o kilku podstawowych zasadach:
- trzy poziome linie – klasyczny hamburger składa się z prostego, czytelnego układu,
- wielkość ikony – powinna być wystarczająca, aby łatwo można było ją kliknąć,
- położenie – często wybiera się prawym górnym rogu, choć nie jest to jedyna możliwość,
- czytelność – icon powinien wyraźnie odróżniać się od pozostałych elementów interfejsu,
- dostępność funkcji – funkcje powinny być łatwe do znalezienia także po rozwinięciu menu hamburgerowego,
- prosta obsługa – użytkownik nie powinien wymagać większego wysiłku, aby dostać się do podstawowych zakładek.
Hamburger menu w kodzie
Hamburger menu został już przedstawiony na tyle sposób, że nie trzeba budować go od nowa. Wystarczy wykorzystać którąś z dostępnych inspiracji i lekko ją zmodyfikować. Schemat pozostaje podobny. Wystarczy połączyć HTML, CSS i prosty skrypt, który będzie odpowiadał za otwieranie oraz zamykanie nawigacji. O czym należy pamiętać?
- Semantyczny HTML (<button> i <nav>) – podstawa dostępności. Przycisk otwiera menu, a kontener <nav> mieści listę odnośników.
- Atrybuty ARIA (aria-expanded, aria-label) – informują czytniki ekranu o stanie menu (otwarte/zamknięte) i celu przycisku.
- Ikona menu – stworzona za pomocą SVG lub zwykłych kresek zrobionych w CSS (<span>).
- Klasy stanu w CSS – reguły (np. .is-active), które kontrolują widoczność menu i zmianę ikonki w znak „X”.
- Animacje i płynne przejścia (transition) – CSS odpowiedzialny za estetyczne wysuwanie panelu i zmianę wyglądu przycisku.
- Skrypt JavaScript – krótki kod przełączający klasy CSS oraz atrybuty ARIA po kliknięciu.
Czy hamburger menu to zawsze dobre rozwiązanie?
Menu w formie hamburgera jest skuteczne i użytkownicy je uwielbiają. Czy to oznacza, że jest bez wad? Niestety nie. Na szczęście nie są one dyskwalifikujące. Ukrycie menu może sprawić, że część użytkowników rzadziej będzie korzystać z dostępnych zakładek, ponieważ najpierw musi odnaleźć ikonę i dopiero później przejść do interesującej go strony. W niektórych przypadkach nawigacja może więc wymagać większego wysiłku niż tradycyjne menu widoczne od razu.
