03.02 Menu - Horizontální navigace

Zdrojové CSS: /src/css/molecules/menu/_secondary.scss
Zdrojové JS:
/src/js/components/scrollNav.coffee
/src/js/components/secondarySubmenu.coffee

Defaultní

Výchozí molekula se sekundární navigaci. Pro tuto molekulu slouží div.menu-secondary.

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

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-secondary__list vloží modifikátor js-scroll-nav. Na tuto class je nabindovaný JavaScript, který se stará o obsluhu skrytých položek.

Defaultní s ikonkami

Vychází z defaultní komponenty. Pouze je ukázka menu s ikonkami. Na .menu-secondary__link se přidá modifikátor with-icon a dovnitř libovolná ikonka.

Defaultní zarovnaná doprava

Vychází z defaultní komponenty. Na .menu-secondary se přidá modifikátor menu-secondary--right.

Defaultní zarovnaná doprostřed

Vychází z defaultní komponenty. Na .menu-secondary se přidá modifikátor menu-secondary--center.

S dropdown submenu

Vychází z defaultní komponenty a obsahuje navíc menu se subpoložkami. Kvůli ořezávání obsahu při větším počtu bylo potřeba přidat javascriptový helper, který vytáhne submenu z tohoto obalu a napozicuje submenu podle offsetů. K tomuto složí JavaScript secondarySubmenu.coffee

S dropdown submenu (široké)

Stejné jako předchozí. Jen s modifikátorem .menu-secondary__submenu--wide na .menu-secondary__submenu pro nastavení větší šířky submenu. Obdobný "--wide" modifikátor funguje i na submenu v hlavním menu v hlavičce.