Responsivní menu

Při tvorbě responsivního designu čelíme výzvě, jak vyřešit navigaci (menu).

V případě, kdy je menu nad obsahem, to může být zvlášť u delších navigací nevhodné, protože návštěvník bude muset odrolovat celou nabídku, aby se dostal na samotný obsah.

Podobně nepraktická bude i opačná situace, kdy bude krkolomné se dostat skrz obsah k menu.

První možnost, která se používala hlavně v minulosti, je umístit na začátek prosté odkazy na různé kotvy typu přeskočit na obsah, přeskočit na menu a podobně.

Dnes se častěji navigace zabalují do jediného tlačítka, které menu po kliknutí vysune, zobrazí přes celou stránku nebo vysune ze strany.

Nejjednodušší typy chování jsou zachyceny na následujícím videu.

Responsivní navigace

Rozbalení menu

  1. Do obalu navigace se umístí ve výchozí podobě skryté tlačítko ≡ Menu.

  2. Pomocí media queries se u menších obrazovek toto tlačítko zobrazí a naopak skryje menu.

  3. A nakonec se s využitím přepínání třídy JavaScriptem bude toto menu po klikání na tlačítko Menu zobrazovat/skrývat.

Samostatná živá ukázka (projeví se při šířce do 480 px)

Samotný HTML kód navigace je tedy společný pro mobily i desktop, odlišnou podobu mu může zařídit změna CSS.

Pokud by bylo příliš pracné původní styl pro velké obrazovky přebíjet v @media podmínce, stačí JavaScriptem kompletně vyměnit třídu společného obalového elementu (ne ji jen přidávat/odebírat).

Efekt rozbalení

Výše uvedená ukázka zajišťuje jen základní funkci zobrazit/skrýt. Jak by šlo vykouzlit nějaké lepší efekty?

Absolutní posicování

S využitím absolutní posice menu (a relativní posice u obalu) může navigace překrývat obsah. Podobně jako rozklikávací menu.

Menu přes celou obrazovku

Roztáhnout navigaci na celou obrazovku jde nejsnáze fixním posicováním:

.menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

V takovém případě je nutné nezapomenout na možnost okno s navigací zavřít. Například původní tlačítko naposicovat nahoru s popiskem Zavřít.

Samostatná živá ukázka (pro 480 px na šířku)

„Odtlačení“ obsahu

Dalším populárním efektem je situace, kdy po kliknutí na tlačítko Menu navigace přijede ze strany a odstrčí hlavní obsah.

Zde je možný postup přidávat při kliknutí třídu přímo pro <body> (document.body v JS).

  1. Po přidání třídy se odsune obsah. Třeba relativním posicováním obalu stránky (např. position: relative; left: 90%).

    Zároveň se objeví menu široké 90 % (width: 90%).

    Docílit plynulých přechodů pomůže CSS vlasnost transition/animation.

  2. Jiná možnost je mít před hlavním sloupcem stránky ještě jeden – zatím s nulovou šířkou (budou obtékané). A odsunutí nasimulovat jeho roztahováním.

Samostatná živá ukázka odtlačení (pro 480 px na šířku)

Vylepšit ovladatelnost stránky při odsouvání obsahu lze umístěním klikací plochy nad zbytek obsahu, který je vidět. A po kliknutí na tuto plochu zase menu zasunout zpátky.

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Vyskakovací menu v CSS

Vyjížděcí menu v CSS

Jak vytvořit v čistém CSS vyskakovací menu.

Vodorovné menu

Horizontální navigace

Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

Fixní menu při scrollování

Fixní menu při rolování

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

Menu přes celou šířku

Menu přes celou šířku

Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

Hover efekty s box-shadow

Hover efekty s box-shadow

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

Komentáře