Barre de navigation supérieure Foundation
Barre de navigation supérieure placée en tête de la page :
Exemple
<ul class="title-area">
<li class="name">
<!-- Si vous n'avez pas besoin du titre ou de l'icône, vous pouvez le supprimer -->
<h1><a href="#">WebSiteName</a></h1>
</li>
<!-- Bouton de réduction sur petits écrans : Supprimez.menu-iconclass pour supprimer l'icône.
Si vous souhaitez afficher uniquement l'image, vous pouvez supprimer le texte "Menu" -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</section>
</nav>
<!-- Initialiser Foundation JS -->
<script>
$(document).ready(function() {
$(document).foundation();
})
</script>
Essayez-le vous-même »
Analyse de l'exemple
Utilisation<nav class="top-bar" data-topbar>Créez une barre d'outils standard..title-areaLa classe définit la zone du logo du site web (doit être placéeli.nameà l'intérieur). Lorsque l'écran devient plus petit, vous pouvez voir un bouton "menu". Le menu de Foundation se réduit et s'étend automatiquement en fonction de la taille de l'écran :
Sur les petits écrans, de nombreuses options sont masquées en raison de la taille.li.toggle-topbar menu.iconLa classe crée un bouton de menu ; cliquer dessus permet d'afficher les options masquées.
Astuce :Redimensionnez la fenêtre du navigateur pour voir l'effet.
.top-bar-sectionDéfinit la section des liens de la navigation..leftLa classe spécifie que les liens sont alignés à gauche..activeLa classe est utilisée pour afficher l'élément sélectionné, avec un arrière-plan bleu.
Astuce :Si vous souhaitez que les liens de navigation soient alignés à droite, vous pouvez.leftRemplacer par.right :
Vous pouvez définir l'alignement à gauche et l'alignement à droite en même temps :
Exemple
<ul class="left">
<li class="active"><a href="#">Accueil</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="right">
<li><a href="#">S'inscrire</a></li>
<li><a href="#">Connexion</a></li>
</ul>
</section>
Essayez-le vous-même »
La barre de navigation peut être.dividerUtilisez la classe pour ajouter des séparateurs (lignes verticales sur les grands écrans, lignes horizontales sur les petits écrans) :
Exemple
<li class="active"><a href="#">Accueil</a></li>
<li class="divider"></li>
<li><a href="#">Page 1</a></li>
<li class="divider"></li>
<li><a href="#">Page 2</a></li>
<li class="divider"></li>
<li><a href="#">Page 3</a></li>
<li class="divider"></li>
</ul>
Essayez-le vous-même »
Menu déroulant de la barre de navigation
La barre de navigation supérieure peut avoir des menus déroulants.
peut être obtenu par<li>ajouter à l'élément.has-dropdownclasse pour définir le menu déroulant :
Exemple
<ul class="left">
<li class="active"><a href="#">Accueil</a></li>
<li class="has-dropdown">
<a href="#">Menu déroulant</a>
<ul class="dropdown">
<li><a href="#">Premier lien dans le menu déroulant</a></li>
<li><a href="#">Deuxième lien dans le menu déroulant</a></li>
<li class="active"><a href="#">Lien actif dans le menu déroulant</a></li>
</ul>
</li>
</ul>
</section>
Essayez-le vous-même »
divider
Utilisation.dividerclasse pour définir le séparateur du menu déroulant :
Exemple
<li><a href="#">Pomme</a></li>
<li><a href="#">Banane</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><a href="#">Chou frisé</a></li>
<li><a href="#">Épinards</a></li>
</ul>
Libellé du menu déroulant
Dans<li>ajout à l'intérieur<label>Utilisez l'élément pour définir le libellé (titre) du menu déroulant :
Exemple
<li><label>Fruit</label></li>
<li><a href="#">Pomme</a></li>
<li><a href="#">Banane</a></li>
<li><a href="#">Orange</a></li>
<li class="divider"></li>
<li><label>Légume</label></li>
<li><a href="#">Chou frisé</a></li>
<li><a href="#">Épinards</a></li>
</ul>
Menu déroulant imbriqué
Le menu déroulant peut intégrer un autre menu déroulant :
Exemple
<ul class="left">
<li class="has-dropdown">
<a href="#">Menu déroulant</a>
<ul class="dropdown">
<li><label>Niveau 1</label></li>
<li><a href="#">Lien</a></li>
<li><a href="#">Lien</a></li>
<li class="has-dropdown">
<a href="#">Nouveau menu déroulant</a>
<ul class="dropdown">
<li><label>Niveau 2</label></li>
<li><a href="#">Menu déroulant de 2e niveau</a></li>
<li><a href="#">Menu déroulant de 2e niveau</a></li>
<li class="has-dropdown">
<a href="#">Nouveau menu déroulant</a>
<ul class="dropdown">
<li><label>Niveau 3</label></li>
<li><a href="#">menu déroulant de 3e niveau</a></li>
<li><a href="#">menu déroulant de 3e niveau</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</section>
Essayez-le vous-même »
cliquable
Par défaut, le menu déroulant de la barre de navigation s'affiche lorsque la souris le survole. Nous pouvons utiliserdata-options="is_hover: false"l'attribut pour définir que la barre de navigation s'affiche après un clic de souris :
Boutons et icônes sur la barre de navigation
Vous pouvez placer des icônes et des boutons sur la barre de navigation :
Vous pouvez mettre des icônes sur la barre de navigation. Pour plus de styles d'images, consultezTutoriel sur les icônes Foundation:
Exemple
<!-- Styles d'icônes Foundation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/foundation-icons.min.css">
</head>
<ul class="left">
<li class="active"><a href="#"><i class="fi-home"></i> Accueil</a></li>
<li><a href="#"><i class="fi-torso"></i> S'inscrire</a></li>
<li><a href="#"><i class="fi-magnifying-glass"></i> Rechercher</a></li>
</ul>
Essayez-le vous-même »
Barre supérieure fixe
La barre de navigation peut être fixée en haut de la page.
Lorsque la page défile, la barre de navigation en haut ne se déplacera pas.
Pour fixer la barre de navigation, placez simplement la barre de navigation dans<div class="fixed">L'intérieur suffit :
Exemple
<nav class="top-bar" data-topbar>
...
</nav>
</div>
Essayez-le vous-même »
Positionnement absolu de la barre de navigation
Nous pouvons placer la barre de navigation<div class="sticky">à l'intérieur pour définir le positionnement absolu de la barre de navigation. Lorsque la barre de défilement défile jusqu'à cette zone, la barre de navigation reste en haut comme une barre de navigation fixe :
Exemple
<nav class="top-bar" data-topbar>
...
</nav>
</div>
Essayez-le vous-même »
Lorsque vous utilisez.stickyLors de l'utilisation de la classe, la barre de navigation supérieure restera fixe sur toutes les tailles d'écran. Si vous devez la définir sur un écran spécifique, il vous suffit de...<nav>ajouter àdata-options="sticky_on: small|medium|large"l'attribut suffit :
Exemple
<!-- Uniquement sur les grands écrans -->
<nav class="top-bar" data-topbar data-options="sticky_on: large">
..
</nav>
</div>
Ou définissez plusieurs tailles d'écran via un tableau :
Exemple
<!-- Petits écrans et grands écrans (pas d'écrans moyens)-->
<nav class="top-bar" data-topbar data-options="sticky_on: [small, large]">
..
</nav>
</div>