W3.CSS fournir toutes sortes de barres de navigation:
Verticale:
Horizontal (vertical sur les petits écrans):
Navigation de base
La classe w3-navbar crée une barre de navigation horizontale:
Exemple
<ul class="w3-navbar w3-black">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Try It Yourself » Barres de navigation coloré
Exemple
<ul class="w3-navbar w3-light-grey">
<ul
class="w3-navbar w3-green">
<ul
class="w3-navbar w3-blue"> Try It Yourself » Bars Aréolées Navigation
Exemple
<ul class="w3-navbar w3-border w3-light-grey">
<ul
class="w3-navbar w3-border w3-round w3-light-grey">
<ul
class="w3-navbar w3-card-8 w3-light-grey"> Try It Yourself » Actif / Lien actuel
Exemple
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-green" href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul> Try It Yourself » Liens Hoverable
Lorsque vous passez la souris sur les liens à l'intérieur de la barre de navigation, la couleur de fond change au gris.
Si vous voulez une couleur de fond différente sur le vol stationnaire, utilisez l' une des classes de couleurs w3 vol stationnaire, et si vous voulez une autre couleur de texte sur le vol stationnaire, utilisez l' une des classes w3-hover-text-couleur:
Exemple
<ul class="w3-navbar
w3-border w3-light-grey">
<li><a
class="w3-hover-red" href="#">Home</a></li>
<li><a class="w3-hover-blue" href="#">Link 1</a></li>
<li><a
class="w3-hover-green" href="#">Link 2</a></li>
<li><a class="w3-hover-teal" href="#">Link 3</a></li>
</ul> Try It Yourself » Liens aligné à droite
Exemple
<ul class="w3-navbar w3-light-grey w3-border">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li
class="w3-right"><a class="w3-green" href="#">Link
3</a></li>
</ul> Try It Yourself » Barre de navigation Taille
Modifier la taille de la police:
Exemple
<ul class="w3-navbar w3-green w3-large">
<ul class="w3-navbar w3-green
w3-xlarge"> Try It Yourself » Changer le rembourrage:
Exemple
<ul class="w3-navbar w3-green">
<li><a class="w3-padding-hor-16" href="#">Home</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 1</a></li>
<li><a
class="w3-padding-hor-16" href="#">Link 2</a></li>
<li><a class="w3-padding-hor-16" href="#">Link 3</a></li>
</ul> Try It Yourself » Personnaliser la largeur des éléments de liste avec la propriété CSS width (Remarque: sur les petits écrans, ils transformeront à 100%):
Exemple
<ul class="w3-navbar w3-dark-grey w3-center">
<li
style="width:50%"><a class="w3-padding w3-green" href="#">Home</a></li>
<li style="width:50%"><a class="w3-padding" href="#">Link 1</a></li>
</ul> Try It Yourself » Barre de navigation avec icônes
Exemple
<ul class="w3-navbar w3-light-grey w3-border
w3-large">
<li><a
class="w3-green" href="#"><i class="fa fa-home w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-search w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-envelope w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-globe w3-large"></i></a></li>
<li><a href="#"><i class="fa fa-sign-in w3-large"></i></a></li>
</ul> Try It Yourself » Barre de navigation avec Dropdown
Déplacez la souris sur le lien "Dropdown":
Exemple
<ul class="w3-navbar w3-card-2 w3-light-grey">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li class="w3-dropdown-hover">
<a href="#">Dropdown</a>
<div
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li>
</ul> Try It Yourself » Remarque: Lorsque le menu déroulant est «ouvert», le lien déroulant obtient une couleur de fond gris pour indiquer qu'il est actif. Pour remplacer cela, ajoutez une classe de couleur w3-vol stationnaire à la fois le "déroulant" <li> et <a>:
Astuce: Si vous voulez un symbole déroulant à côté du texte déroulant, ajouter une icône appropriée (comme ):
Exemple
<li class="w3-dropdown-hover
w3-hover-orange">
<a class="w3-hover-orange" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div class="w3-dropdown-content w3-white w3-card-4">
<a href="#">Link 1</a>
<a href="#">Link
2</a>
<a href="#">Link 3</a>
</div>
</li> Try It Yourself » Utilisez w3-dropdown-cliquez sur si vous préférez cliquer sur le lien déroulant au lieu de vol stationnaire:
Exemple
<li class="w3-dropdown-click">
<a onclick="myFunction()" href="#">Dropdown
<i class="fa fa-caret-down"></i></a>
<div id="demo"
class="w3-dropdown-content w3-white w3-card-4">
<a
href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li> Try It Yourself » Barre de navigation fixe
Pour forcer la barre de navigation pour rester en haut ou en bas de la page, même lorsque l'utilisateur fait défiler la page, enveloppent un élément <div> autour du <ul> et ajoutez le w3-dessus ou classe w3-bottom:
Collapsing la barre de navigation
Lorsque la barre de navigation prend trop de place sur un petit écran, et vous ne voulez pas afficher verticalement par défaut, vous pouvez utiliser les classes utilitaires pour cacher et afficher des liens spécifiques dans la barre de navigation.
Dans l'exemple ci-dessous, la barre de navigation est remplacé par un bouton (☰) dans le coin en haut à droite lorsqu'elles sont diffusées sur les tablettes et les appareils mobiles. Lorsque le bouton est cliqué, la barre de navigation sera affichée verticalement:
Exemple
Try It Yourself »topnav
Un autre exemple d'une barre de navigation, est la classe w3-topnav. Il est semblable à w3-navbar, sauf qu'il va ajouter un soulignement lorsque vous survolez les liens, au lieu d'une couleur de fond:
Exemple
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Try It Yourself » Exemple avec polices Icônes Impressionnant
<nav class="w3-topnav w3-green">
<a href="#"><i class="fa
fa-home"></i></a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Try It Yourself » Navigation latérale
La classe w3-sidenav crée une barre de navigation verticale:
Accédez au chapitre suivant pour en savoir plus sur la navigation latérale.