Přejít k obsahu | Přejít k hlavnímu menu | Přejít k vyhledávání

03.04 Menu - Doplňková navigace

Zdrojové CSS:
/src/css/molecules/menu/_inside.scss
/src/css/molecules/menu/_content.scss
Zdrojové JS:
/src/js/components/scrollNav.coffee
/src/js/components/links.coffee

Defaultní

Popis komponenty

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.

Ukázka HTML kódu 
<nav class="menu-inside" aria-label="Doplňková navigace">
	<div class="menu-inside__wrap">
		<ul class="menu-inside__list js-scroll-nav">
			<li class="menu-inside__item">
				<a href="#target-1" class="menu-inside__link link-slide is-active">Co se naučíte</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-2" class="menu-inside__link link-slide">Profil absolventa</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-4" class="menu-inside__link link-slide">Přijímací zkouška</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-5" class="menu-inside__link link-slide">Důležité termíny</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-6" class="menu-inside__link">Předmety</a>
			</li>
		</ul>
	</div>
</nav>

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.

Defaultní s buttonem

Popis komponenty

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.

Ukázka HTML kódu 
<nav class="menu-inside with-side" aria-label="Doplňková navigace">
	<div class="menu-inside__wrap">
		<ul class="menu-inside__list js-scroll-nav">
			<li class="menu-inside__item">
				<a href="#target-1" class="menu-inside__link link-slide is-active">Co se naučíte</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-2" class="menu-inside__link link-slide">Profil absolventa</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-4" class="menu-inside__link link-slide">Přijímací zkouška</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-5" class="menu-inside__link link-slide">Důležité termíny</a>
			</li>
			<li class="menu-inside__item">
				<a href="#target-6" class="menu-inside__link">Předmety</a>
			</li>
		</ul>
	</div>
	<div class="menu-inside__side">
		<a href="#" class="btn btn-s btn-primary">
			<span>Podejte přihlášku</span>
		</a>
	</div>
</nav>

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.

Defaultní se zarovnání vpravo

Popis komponenty

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)

Ukázka HTML kódu 
<nav class="menu-inside menu-inside--right with-side" aria-label="Doplňková navigace">
	<div class="menu-inside__wrap">
		<ul class="menu-inside__list js-scroll-nav">
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 1</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 2</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link is-active">Menu item 3</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link with-icon">
					<span class="icon icon-calendar-o"></span>
					Menu item 4
				</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 5</a>
			</li>
		</ul>
	</div>
	<div class="menu-inside__side">
		<a href="#" class="btn btn-s btn-primary">
			<span>Button</span>
		</a>
	</div>
</nav>

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)

Defaultní se zarovnání doprostřed

Popis komponenty

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)

Ukázka HTML kódu 
<nav class="menu-inside menu-inside--center" aria-label="Doplňková navigace">
	<div class="menu-inside__wrap">
		<ul class="menu-inside__list js-scroll-nav">
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 1</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 2</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link is-active">Menu item 3</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link with-icon">
					<span class="icon icon-calendar-o"></span>
					Menu item 4
				</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 5</a>
			</li>
		</ul>
	</div>
</nav>

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)

Defaultní light

Popis komponenty

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

Ukázka HTML kódu 
<nav class="menu-inside menu-inside--light" aria-label="Doplňková navigace">
	<div class="menu-inside__wrap">
		<ul class="menu-inside__list js-scroll-nav">
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 1</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 2</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link is-active">Menu item 3</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 4</a>
			</li>
			<li class="menu-inside__item">
				<a href="#" class="menu-inside__link">Menu item 5</a>
			</li>
		</ul>
	</div>
</nav>

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

Typ 2

Popis komponenty

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.

Ukázka HTML kódu 
<div class="menu-content">
	<nav class="menu-content__wrap" aria-label="Doplňková navigace">
		<ul class="menu-content__list js-scroll-nav">
			<li class="menu-content__item">
				<a href="#target-1" class="menu-content__link link-slide">Menu item 1</a>
			</li>
			<li class="menu-content__item">
				<a href="#target-2" class="menu-content__link link-slide">Menu item 2</a>
			</li>
			<li class="menu-content__item">
				<a href="#target-3" class="menu-content__link link-slide is-active">Menu item 3</a>
			</li>
			<li class="menu-content__item">
				<a href="#target-4" class="menu-content__link link-slide with-icon">
					<span class="icon icon-calendar-o"></span>
					Menu item 4
				</a>
			</li>
			<li class="menu-content__item">
				<a href="#target-5" class="menu-content__link link-slide">Menu item 5</a>
			</li>
		</ul>
	</nav>
</div>

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.

Typ 3

Popis komponenty

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

Ukázka HTML kódu 
<nav class="crossroad-links crossroad-links--type-3 crossroad-links--size--auto" aria-label="Doplňková navigace">
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">IS MU</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Studijní oddělení</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Harmonogram</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">E-learning</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Knihovna</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Menu item 6</a>
		</li>
	</ul>
</nav>

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

Typ 3 - s pozadím

Popis komponenty

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.

Ukázka HTML kódu 
<nav class="crossroad-links crossroad-links--background crossroad-links--size--auto" aria-label="Doplňková navigace">
	<ul class="crossroad-links__list">
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">IS MU</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Studijní oddělení</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Harmonogram</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">E-learning</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Knihovna</a>
		</li>
		<li class="crossroad-links__item">
			<a href="#" class="crossroad-links__link">Menu item 6</a>
		</li>
	</ul>
</nav>

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.