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 v oboch témach — v Blocksy 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.
Nemusíte ho ani stavať. V knižnici vzorov je kategória BRANIKE — Mega panel s tromi hotovými panelmi: Mega panel — štyri stĺpce s ikonami, Mega panel — produktová mriežka a Mega panel — odkazy a promo blok. Ponúkajú sa v tom istom výbere ako vaše vlastné vzory, takže mega menu zapnete za tri kliknutia a panel prípadne prestaviate neskôr.
Kde sa panel priraďuje, závisí od toho, ako váš web skladá menu. Tu je jediný rozdiel medzi témami a oplatí sa ho vedieť, inak budete hľadať voľbu na mieste, kde nič nerobí.
V Blocksy (klasické menu) — tri kroky
- Panel si pripravte. Buď použite hotový, alebo si postavte vlastný: Vzory → pridať nový, poskladajte ho z bežných blokov (stĺpce, ikonové boxy, výpis) a uložte.
- Vzhľad → Menu, kliknite na položku, pod ktorou má panel visieť. Je tam voľba Mega panel (Branike) — vyberte vzor. V zozname sú oddelené skupiny Vaše vzory a Hotové panely Branike.
- Šírka panela: Podľa obsahu (min. 640 px), Široký (max. 1200 px) alebo Cez celú šírku obrazovky. Uložte menu. Hotovo.
V Branike téme (menu z Editora) — obrazovka Mega panely
Branike téma skladá menu v Editore webu, nie vo Vzhľad → Menu. Voľba pri položke klasického menu tam preto nemá účinok — a plugin vás na to pri nej upozorní priamo v administrácii.
Na takom webe je na to samostatná obrazovka Vzhľad → Mega panely:
- Obrazovka ukáže všetky navigačné menu webu a v každom jeho položky najvyššej úrovne.
- Pri položke vyberte v stĺpci Mega panel vzor a v stĺpci Šírka panela jednu z troch šírok.
- Kliknite Uložiť. Položka, pri ktorej necháte „— bez panela —“, zostane obyčajným odkazom.
Dôležité pre Branike tému: aby téma vaše menu neprepisovala, nastavte v nastaveniach témy (záložka Navigácia, pole Čo je v menu) možnosť Poskladám si ho sám v Editore stránok (potrebné pre mega menu). V ostatných troch režimoch (Všetky stránky, automaticky, Len vybrané stránky (jedna úroveň), Poskladať vo Vzhľad → Menu (aj podpoložky)) téma menu pri každom uložení svojich nastavení poskladá nanovo — a mega panel by pri tom zmizol.
Ak sa menu medzitým zmenilo inde (napríklad ho niekto upravoval v Editore), obrazovka radšej neuloží nič a vyzve vás načítať ju znova. Nestane sa teda, že by prepísala cudziu zmenu.
Voľba sa v oboch prípadoch 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 so šípkou vedľa odkazu — samotný odkaz ostáva odkazom a dá sa naň normálne kliknúť. Esc panel zatvorí a vráti kurzor klávesnice na tlačidlo, odchod tabulátorom mimo položky ho zatvorí tiež.
Široký panel sa sám posunie tak, aby nevyliezol za okraj obrazovky, a to ani vtedy, keď je zavretý — stránka sa kvôli nemu nikdy neroztiahne do strany.
Na mobile sa panel nezobrazuje ako široký panel, ale ako bežná rozbaľovacia sekcia v hamburgeri — so šípkou vedľa položky a s vlastným podkladom, aby sa nezlial s menu. Vodorovný panel na 390 px by nedával zmysel.
Hamburger aj na počítači
Toto nastavenie je v Branike téme, v nastaveniach témy na záložke Hlavička. Nastavenia témy nájdete v menu Branike HUB → Branike Theme; ak HUB nemáte, sú pod Vzhľad → Branike Theme. 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, keď dôjde miesto (predvolené) — hlavička sa zbalí, až keď jej dôjde miesto. Šírku zlomu si viete nastaviť; keď pole necháte prázdne, téma ju dopočíta z počtu položiek a ikon.
- Vždy — hamburger aj na širokej obrazovke — hamburger pri každej šírke, aj na širokom monitore.
- Nikdy (nechať na WordPresse) — WordPress zbaľuje pri 600 px.
Pozor: 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.
Téma má aj hotovú hlavičku presne na tento účel — logo a tlačidlo menu, nič viac. Hodí sa pre portfólio, štúdio alebo jednostránkový web. Aby naozaj ukazovala len tlačidlo aj na širokej obrazovke, prepnite k nej režim na Vždy.
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.
Zvýraznenie aktuálnej stránky
Na tej istej záložke si nastavíte, či a ako má menu označiť stránku, na ktorej návštevník práve je: Bez zvýraznenia, Podčiarknutie, Akcentová farba alebo Tlačidlo (pilulka) (pole Zvýrazniť aktuálnu položku menu). Návštevník tak vždy vie, kde sa nachádza. Podčiarknutie nemení výšku riadka, takže je najbezpečnejšou voľbou pre stabilné rozloženie.
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 obrazovky 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 (metriku poskakovania stránky, ktorú meria Google).
- 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.
- Web, ktorý žiadny mega panel nemá, nenačíta kvôli nemu ani bajt navyše.
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 pri nej (vo Vzhľad → Menu aj na obrazovke Mega panely) uvidíte upozornenie, že vybraný vzor už neexistuje. Nie je to tichá chyba, ale všímajte si ju.
- Na Branike téme hľadajte obrazovku Mega panely, nie Vzhľad → Menu. Voľba vo Vzhľad → Menu tam na hlavičku nedosiahne.
- 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ť.