Menu je prvá vec, ktorú návštevník na webe hľadá — a prvá, ktorá sa rozsype, keď máte položiek priveľa. Tento článok prechádza tri spôsoby, ako to vyriešiť: mega panel pod položkou menu, hamburger aj na počítači a rozcestník. Každý sa hodí inam a dajú sa kombinovať.
Kedy menu prestane stačiť
Jednostĺpcové rozbaľovacie menu má tvrdý strop: pri bežnom notebooku (1512 × 795) sa doň zmestí zhruba dvanásť položiek. Trinásta a ďalšie sú pod okrajom obrazovky — a návštevník na počítači ich neuvidí vôbec, lebo rozbaľovacie menu sa neroluje. Nie je to teoretická hranica; presne toto sme namerali na vlastnom webe, keď ponuka narástla na 24 položiek.
Sú na to tri odpovede a nevylučujú sa:
- Mega panel — pod jednu položku menu sa vloží široký panel, kde je miesto na stĺpce, popisy a ikony.
- Hamburger aj na počítači — menu sa celé schová za jedno tlačidlo. Hlavička ostane pokojná, ponuka sa otvorí až na vyžiadanie.
- Rozcestník — samostatná stránka s prehľadom. Unesie popisy, filtrovanie aj vyhľadávanie, čo menu neunesie nikdy.
Mega panel — široká ponuka pod jednou položkou
Mega panel je v Branike Blocks a funguje s klasickým menom vo WordPresse, teda v dnešnej téme aj v Branike téme. Podstatné je, že panel nie je nová vec, ktorú sa treba učiť: je to bežný vzor, postavený z blokov, ktoré už poznáte.
Ako na to — tri kroky
- Vzory → pridať nový. Postavte panel z bežných blokov: stĺpce, ikonové boxy, výpis, čo potrebujete. Uložte.
- Vzhľad → Menu, kliknite na položku, pod ktorou má panel visieť. Pribudla tam voľba Mega panel (Branike) — vyberte svoj vzor.
- Šírka panela: podľa obsahu, široký (max. 1200 px), alebo cez celú šírku obrazovky. Uložte menu. Hotovo.
Voľba sa ponúka len pri položkách najvyššej úrovne. Panel pod podpoložkou by nikto nenašiel, takže tam nie je.
Ako sa panel správa
Na počítači sa otvára prejdením myšou s krátkym oneskorením, aby sa neotváral pri každom prejdení kurzora cez menu. Na dotykových zariadeniach a klávesnicou ho otvára tlačidlo vedľa odkazu — samotný odkaz ostáva odkazom a dá sa naň normálne kliknúť. Esc panel zatvorí a vráti fokus na tlačidlo, odchod tabulátorom mimo položky ho zatvorí tiež.
🟢 Na mobile sa panel nezobrazuje ako široký panel, ale ako bežná rozbaľovacia sekcia v hamburgeri. Vodorovný panel na 390 px by nedával zmysel.
Hamburger aj na počítači
Toto nastavenie je v Branike téme (Vzhľad → Branike → Hlavička). Hodí sa, keď chcete pokojnú, minimalistickú hlavičku — logo, pár ikon a jedno tlačidlo — alebo keď je menu jednoducho dlhé.
Kedy zbaliť menu do hamburgera
- Automaticky (predvolené) — hlavička sa zbalí, až keď jej dôjde miesto. Šírku zlomu si viete nastaviť, prípadne ju téma odhadne z počtu položiek.
- Vždy — hamburger pri každej šírke, aj na širokom monitore.
- Nikdy — necháte to na WordPresse, ktorý zbaľuje pri 600 px.
🔴 Nastavenie šírky zlomu platí len v automatickom režime. V režime „vždy” je zbytočné — a práve preto je to samostatná voľba a nie iba väčšie číslo v poli šírky.
Ako vyzerá rozbalené menu
Na výber sú dve podoby. Celá obrazovka je predvolené správanie WordPressu — menu prekryje okno. Bočný panel sprava sa vysunie a zaberie časť šírky, takže stránka za ním ostane vidieť; jeho šírku si nastavíte v rozmedzí 280 až 640 px (predvolene 420).
Panel nikdy nezaberie viac než 92 % okna, takže ani na malom notebooku neprekryje stránku úplne. Na telefónoch vyzerajú obe podoby rovnako — úzky panel by aj tak zabral celú šírku, tak sa pod 600 px nepoužíva.
Rozcestník ako tretia cesta
Keď máte produktov alebo služieb naozaj veľa, samostatná prehľadová stránka je často lepšia než akékoľvek menu. Unesie popis ku každej položke, rozdelenie do oblastí aj vyhľadávanie — a hlavne ju nájde vyhľadávač, čo o rozbaľovacom menu neplatí. Menu potom stačí krátke: štyri až päť položiek a jedna z nich vedie na rozcestník.
🟢 S mega panelom sa to nebije. Naopak — panel býva skrátenou verziou rozcestníka a odkaz „zobraziť všetko” v jeho pätičke vedie práve naň.
Prístupnosť a rýchlosť
- Panel aj hamburger sa ovládajú klávesnicou, majú viditeľný fokus a Esc ich zatvorí.
- Tlačidlo, ktoré panel otvára, je samostatné vedľa odkazu — nie je do odkazu vložené. Tlačidlo vo vnútri odkazu je neplatné HTML a čítačky ho ohlásia zle.
- Obsah panela je v stránke od začiatku, nič sa nedoťahuje. Panel je mimo toku a skrytý, takže neposúva obsah a nezhorší CLS.
- Animuje sa iba pohyb a priehľadnosť, nie rozmery — nespôsobuje to prepočítavanie rozloženia stránky.
- Kto má v systéme zapnuté obmedzenie pohybu, dostane prepnutie bez animácie.
Na čo si dať pozor
- Panel je vzor — a vzor sa dá zmazať. Ak ho zmažete, položka menu ostane obyčajným odkazom a v administrácii pri nej uvidíte upozornenie. Nie je to tichá chyba, ale všímajte si ju.
- Nedávajte do panela všetko. Široký panel plný odkazov je rovnaký problém ako dlhé menu, len naležato. Rozdeľte ho do oblastí a k položkám dajte jednu vetu.
- Obrázky v paneli majú mať rozmery. Bez nich sa panel pri otvorení „zošklbne”.
- Skontrolujte kolíziu v rohu. Ak máte vpravo dole súhlasovú lištu alebo chat, bočný panel a plávajúce prvky si môžu prekážať.
- Režim „vždy” otestujte na širokom monitore. Hlavička s jedným tlačidlom vyzerá inak než tá s menu — je to zámer, ale mali by ste to vidieť skôr než návštevník.
- Položka s panelom nech vedie na skutočnú stránku. Kto klikne rovno na ňu (alebo nemá JavaScript), musí niekam prísť.