Ideo3.2 Framework Documentation

Nav

Toggle example guides Toggle HTML markup

Menu de navigation. Présentation des différents styles disponibles.

L'affichage par défaut est vertical. La class .blk-nav--horizontal permet l'affichage horizontal
Pour le menu mobile, un symbole "🔗" (lien) est ajouté à côté du lien pour faciliter ton identification VS les dossiers de pages.

Important : Les styles de nav s'uttilisent dans un site via des mixins.
Les class .nav-style01, ... n'exsitent pas dans le framework.
Elles ne sont présentent ici que pour montrer les styles dans le documentation.

...
<div class="header__body--nav xl:show">
	<nav class="blk-nav blk-nav--main blk-nav--horizontal">
		[[menu_1]]
	</nav>
</div>
...

...
<div class="blk-sheet__content">
	<nav class="blk-nav blk-nav--main">
		[[menu_4]]
	</nav>
</div>
...
<insert-markup>components.nav-</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style01
Mixin : #nav-theme.style01();
<insert-markup>components.nav-0</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style02
Mixin : #nav-theme.style02();
<insert-markup>components.nav-1</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style03
Mixin : #nav-theme.style03();
<insert-markup>components.nav-2</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style04
Mixin : #nav-theme.style04();
<insert-markup>components.nav-3</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style05
Mixin : #nav-theme.style05();
<insert-markup>components.nav-4</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style06
Mixin : #nav-theme.style06();
<insert-markup>components.nav-5</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

.nav-style07
Mixin : #nav-theme.style07();
<insert-markup>components.nav-6</insert-markup>

Version "desktop" dans le <header>

Version "mobile" dans le <div class="blk-sheet">

Markup: ../../../snippets/components/nav.hbs 
<h4>Version "desktop" dans le <code>&lt;header&gt;</code> </h4>

<header class="header container-grid">
	<div class="header__body screen">
		<!-- Menu ======= -->
		<div class="header__body--nav {{modifier_class}}">
			<nav class="blk-nav blk-nav--horizontal blk-nav--main">
				<ul>
					<li><a href="fr_FR-homeTop.php" target="_self" class="active">Accueil</a></li>
					<li class="has-dropdown"><a href="#">Produits et services</a>
						<ul class="dropdown">
							<li class="has-dropdown"><a href="fr_FR-contentTop.php">Façadier</a>
								<ul class="dropdown">
									<li><a href="fr_FR-contentTop.php">Level 2</a></li>
									<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
									<li class="has-dropdown"><a href="#">Façadier 2</a>
										<ul class="dropdown">
											<li><a href="fr_FR-contentTop.php">Level 2</a></li>
											<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
											<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
											<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
										</ul>
									</li>
									<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
								</ul>
							</li>
						</ul>
					</li>
					<li class="has-dropdown"><a href="#">Références</a>
						<ul class="dropdown">
							<li><a href="fr_FR-contentTop.php">Level 2</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						</ul>
					</li>
					<li><a href="fr_FR-contentTop.php">Notre équipe</a></li>
					<li><a href="fr_FR-contentTop.php">Devis</a></li>
				</ul>
			</nav>
		</div>

	</div>
</header>

<h4>Version "mobile" dans le <code>&lt;div class="blk-sheet"&gt;</code> </h4>
<div class="blk-sheet">
	<div class="blk-sheet__content {{modifier_class}}">
		<nav class="blk-nav blk-nav--main">
			<ul>
				<li><a href="fr_FR-homeTop.php" target="_self" class="active">Accueil</a></li>
				<li class="has-dropdown"><a href="#">Produits et services</a>
					<ul class="dropdown">
						<li class="has-dropdown"><a href="fr_FR-contentTop.php">Façadier</a>
							<ul class="dropdown">
								<li><a href="fr_FR-contentTop.php">Level 2</a></li>
								<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
								<li class="has-dropdown"><a href="#">Façadier 2</a>
									<ul class="dropdown">
										<li><a href="fr_FR-contentTop.php">Level 2</a></li>
										<li><a href="fr_FR-contentTop.php" target="_blank">Subdropdown Option</a></li>
										<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
										<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
									</ul>
								</li>
								<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
							</ul>
						</li>
					</ul>
				</li>
				<li class="has-dropdown"><a href="#">Références</a>
					<ul class="dropdown">
						<li><a href="fr_FR-contentTop.php">Level 2</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
						<li><a href="fr_FR-contentTop.php">Subdropdown Option</a></li>
					</ul>
				</li>
				<li><a href="fr_FR-contentTop.php">Notre équipe</a></li>
				<li><a href="fr_FR-contentTop.php">Devis</a></li>
			</ul>
		</nav>
	</div>
</div>
Source: src/cssframework_v2/less/components/nav.less, line 1