03.04 Menu - Doplňková navigace

Výchozí molekula s menu pro obsah. Toto menu je určené k zobrazení uvnitř .main. Pro tuto molekulu slouží div.menu-inside.

Pokud chceme, aby se nám položky při větším počtu ořezávaly a zobrazily se šipky k doscrollování na ně, pak se na .menu-inside__list vloží modifikátor js-scroll-nav. Na tuto class je nabindovaný JavaScript, který se stará o obsluhu skrytých položek.

Na odkazy je v tomto případě nasimulován i JavaScript, který po kliku na tento odkaz zascrolluje na id atribut s atributu href.

Aktivní položka se vytvoří přidáním modifikátoru is-inside na menu-secondary__link.

Tato komponenta vychází z defaultní komponenty, jen je straně použít button. Lze vytvořit vložením modifikátoru with-side na .menu-inside a přidámím obsahu s .menu-inside__side.

V této komponentě na využit atom tlačítka. Namísto buttonu můžeme také použít např. element select.

Tato komponenta vychází z předchozí komponenty (Defaltní s buttonem). Lze vytvořit vložením modifikátoru menu-inside--right na .menu-inside. Není potřeba využívat button (bez buttonu je potřeba odtranit modifikátor with-side a element s buttonem)

Tato komponenta vychází z předchozí komponenty (Defaultní s buttonem). Lze vytvořit vložením modifikátoru menu-inside--center na .menu-inside. Není potřeba využívat button (bez buttonu je potřeba odstranit modifikátor with-side a element s buttonem)

Tato komponenta vychází z defaultní komponenty. Lze vytvořit vložením modifikátoru menu-inside--light na .menu-inside.

Další typ jak vypsat menu pro obsah. Toto menu je určené k zobrazení uvnitř .main. Pro tuto molekulu slouží div.menu-content.

Pokud chceme, aby se nám položky při větším počtu ořezávaly a zobrazily se šipky k doscrollování na ně, pak se na .menu-inside__list vloží modifikátor js-scroll-nav. Na tuto class je nabindovaný JavaScript, který se stará o obsluhu skrytých položek.

Na odkazy je v tomto případě nasimulován i JavaScript, který po kliku na tento odkaz zascrolluje na id atribut s atributu href.

Aktivní položka se vytvoří přidáním modifikátoru is-active na menu-content__link.

Toto menu kompletně vychází z molekuly jednoduchého rozcestníku.

Toto menu kompletně vychází z molekuly jednoduchého rozcestníku. Navíc je na crossroad-links přidán modifikátor crossroad-links--background, který změní pozadí dle primární barvy.