Rozšířené možnosti nastavení hlavičky webu

4 minuty

Navigace webu je důležitým prvkem pro orientaci návštěvníka. Máte k dispozici nespočet variant rozložení hlavičky tak, aby přesně naplňovalo potřeby a cíle webu. Přinášíme ambasadorům rozšíření možností nastavení hlavičky. 

Na začátku máte na výběr ze tří typů: Horizontální, VertikálníTlačítko. Každa hlavička se skládá z loga, primárního regionu (hlavní navigace) a sekundární region (sekundární navigace).

Tip: Přizpůsobení hlavičky po zascrollování

Od verze 2.53 můžete upravovat také barvy jednotlivých prvků navigace po zaskrolování. Je tak možné mít jinou podobu hlavičku na začátku stránky než při scrollování obsahem.

Horizontální hlavička

Na jedno kliknutí si můžete vybrat vhodné rozložení elementů v horizontálním zobrazení hlavičky.

Další možností je omezit šířku obsahu hlavičky podle šířky obsahu webu a to včetně jejího pozadí. Horizontální hlavička lze také zarovnat na spodní okraj okna pro úvodní sekci.

Vertikální hlavička

Vertikální hlavička hlavička je umístěna u okraje stránky, lze si vybrat zda na levé či pravé straně.

Hlavička jako tlačítko

Typ hlavičky „Tlačítko“ zobrazuje pouze logo a ikonu (tlačítko) pro otevření menu. V nastavení designu si můžete grafickou podobu ikony snadno změnit. 

Mobilní hlavička

Do určitého nastavitelného bodu (breakpointu, defaultně 641 px) se hlavička přepne na mobilní verzi. Mobilní verze se zapíná nezávisle na zvoleném typu hlavičky, je tedy pro každý typ hlavičky stejná.

Opět lze ovlivnit rozložení prvků,  zobrazení nebo skrytí doplňkových regionů a další chování. Podobu způsobu otevřeného menu nastavíte v sekci Chování.

Chování hlavičky

Podobu otevřeného mobilního menu může vypadat následujícími způsoby:

  • Vysunutí menu zprava/zleva na část obrazovky, kdy se hlavní obsah posune mimo obrazovku
  • Překrytí, kdy se zobrazí menu přes celou obrazovku
  • Vysunutí menu zprava nebo zleva, kdy menu překryje hlavní obsah

Další nastavení hlavičky:

  • Fixní hlavička: hlavičku lze jak na telefonu tak na desktopu připnout okraj obrazovky. Zůstane fixní a uživatel ji tak uvidí vždy i při skrolování.
  • Slide-out efekt: tento efekt hlavičku skryje při skrolování dolů. Při skrolování nahoru se hlavička opět zobrazí jako fixní.
  • Prioritní navigace: prioritní navigace je automaticky tvořené submenu, které seskupí položky v menu tak, aby menu nepřetékalo ve svém kontejneru. Toto je užitečené na středních displejích, kdy je užitečné zobrazit část položek z menu a již nezobrazovat mobilní menu.
  • Zobrazit ikonku menu: toto nastavení ovlivňuje breakpoint (v pixelech) pro zobrazení ikony mobilního menu.

Submenu

Pokud vaše navigace obsahuje i druhou úroveň, je možné si vybrat ze dvou zobrazení submenu, které se objeví po najetí na nadřazenou položku.

  • Položky pod sebou v 1 sloupci
  • Položky vedle sebe ve více sloupcích v liště pod hlavičkou