NaviFlow Logo NaviFlow Kontaktujte nás
Kontaktujte nás

Responzivní hamburger menu — mobil a tablet

Na malých obrazovkách potřebujete jiný přístup. Jak udělat menu, které se chová inteligentně na všech zařízeních bez kompromisů.

9 min čtení Střední Březen 2026
Tomáš Volárik, Senior Frontend Architect
Autor

Tomáš Volárik

Senior Frontend Architect

Frontend architect s 14 lety zkušeností v designu responzivních navigačních systémů pro české firmy a globální projekty.

Hamburger menu není věda. Jenže na mobilu se musí chovat úplně jinak než na desktopu, a víc vám možností není. To znamená, že musíte být opatrní. Menu se nesmí otevřít přes obsah, který čte. Ikonka musí být vidět i když scrolluje. A vůbec — co se stane, když uživatel menu otevře a pak změní orientaci telefonu? Detaily rozhodují.

Sem patří i přemýšlení o tom, jak rychle se menu otevírá a zavírá. Uživatel čeká něco konkrétního — nechce čekat na animaci. Je to interakce, která musí být okamžitá. Tady se přesuneme k věcem, které opravdu fungují v praxi.

Mobilní telefon se zobrazeným webem a hamburger menu ikonou

Jak by mělo menu vypadat

První věc — hamburger ikonka by měla být vždycky vidět. Na telefonech se to znamená, že stojí v headeru, který se neposunuje mimo obrazovku. Když uživatel scrolluje dolů, header zmizí (pokud chcete úsporu místa), ale menu se musí vrátit, když scrolluje nahoru. To je ten „reveal-on-scroll” pattern, kterým se zabýváme zvlášť.

Na šířce do 768 pixelů by mělo být menu vždycky hamburger. Nemusíte mít tři verze — mobilní, tablet, desktop. Vyzkoušíme přístup, kde menu od 768 pixelů začne být horizontální a hamburger zmizí. Jednodušší na údržbu, a funguje to.

Klíčové rozhodnutí: Pod 768 pixelů = hamburger. Nad 768 pixelů = horizontální menu. Žádné „medium” verze. Tím si zjednodušíte JavaScript i CSS.

Srovnání mobilního menu s hamburgerem a desktopového horizontálního menu
Tablet v horizontální orientaci s aktivním hamburger menu a overlay efektem

Overlay vs. push-out menu

Máte dvě možnosti: menu se buď otevře jako vrstva přes obsah (overlay), nebo se stránka posune a menu si vezme místo (push-out). Overlay je lepší volba pro mobil. Uživatel vidí, co má v menu, obsah za ním zesivá, a když menu zavře, vrátí se tam, kde byl. To je zkušenost, kterou znají z ostatních aplikací.

Push-out menu je složitější na implementaci a na dotykových zařízeních se chová divně. Když uživatel scrolluje v menu a menu se pohybuje, celá stránka se pohybuje s ním. To vede k chybám v layoutu a frustraci. Stick s overlay — je to vyzkoušené řešení.

Prakticky: Overlay menu se otevírá s transform: translateX(0) a zavírá se s transform: translateX(-100%). Žádné scrollování stránky, čisté chování.

Zastavení scrollování při otevřeném menu

Když je menu otevřené, obsah za ním by neměl scrollovat. To se zdá zřejmé, ale víc lidí na tom selhává. Uživatel otevře menu, a pak v něm scrolluje. Při tom se náhodou posunuje i obsah na pozadí. Je to matoucí. Řešení je jednoduché: když se menu otevře, přidejte `overflow: hidden` na `body` nebo `html` element.

A když menu zavřete, overflow se vrátí na `auto`. Tím zajistíte, že se obsah nepohybuje. Je to věc jedné řádky CSS, ale dělá obrovský rozdíl v tom, jak se web chová. Uživatelé si ani neuvědomí, že jste to udělali — to je znamení dobrého designu.

Mobilní telefon s otevřeným hamburger menu a zatmaveným pozadím obsahu

Poznámka k accessibility

Při implementaci hamburger menu pamatujte na uživatele, kteří se na web dostávají přes klávesnici nebo čtečku obrazovky. Menu musí být ovladatelné šipkami, tab klávesou se musí dostat na všechny položky, a když je menu zavřené, mělo by být skryté i pro asistivní technologie. Atribut `aria-hidden=”true”` vám s tím pomůže. Nejde jen o to, aby web fungoval — jde o to, aby ho používat mohli všichni.

Shrnutí: Základy hamburger menu

1

Breakpoint na 768 pixelů

Pod touto šířkou vždycky hamburger. Nad touto šířkou horizontální menu. Jednoduché, účinné, bez výjimek.

2

Overlay, ne push-out

Menu se otevírá jako vrstva. Uživatel vidí menu, obsah se zatmavý, a když menu zavře, vrátí se na stejné místo.

3

Zablokujte scrollování

Když je menu otevřené, obsah za ním by neměl scrollovat. `overflow: hidden` na body řeší problém.

4

Myslíte na accessibility

Menu musí být ovladatelné bez myši a viditelné pro čtečky obrazovky. Atributy `aria-hidden`, `aria-expanded` a pořádné focus stavy jsou povinné.

Hamburger menu na mobilu a tabletu není věda, ale vyžaduje si péči. Když se o něj postaráte pořádně — když ho otestujete na různých zařízeních, různých orientacích a s různými způsoby interakce — výsledek je uživatel, který se naviguje přirozeně. To je cíl.

Další články z kategorie