Barres de navigation W3.CSS
Verticale:
Horizontal:
Classes de barre de navigation W3.CSS
W3.CSS fournit les classes suivantes pour les barres de navigation :
| Classer | Définit |
|---|---|
| w3-bar | Conteneur horizontal pour les éléments HTML |
| w3-bar-block | Conteneur vertical pour les éléments HTML |
| w3-bar-item | Éléments de barre de conteneur |
| barre latérale w3 | Barre latérale verticale pour les éléments HTML |
| w3-mobile | Rend n'importe quel élément de barre mobile d'abord réactif |
| w3-liste déroulante-survol | Élément déroulant survolable |
| w3-liste déroulante-clic | Élément déroulant cliquable (au lieu de survoler) |
Navigation de base
La classe w3-bar est un conteneur pour afficher les éléments HTML horizontalement.
La classe w3-bar-item définit les éléments du conteneur.
C'est un outil parfait pour créer des barres de navigation :
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Navigation réactive
La classe w3-mobile rend tous les éléments de la barre réactifs (horizontal sur les grands écrans et vertical sur les petits).
Moyens et grands écrans :
Petits écrans :
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
Barres de navigation colorées
Utilisez une classe w3-color pour ajouter une couleur à la barre de navigation :
Exemple
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
Barres de navigation encadrées
Utilisez une classe w3-border ou w3-card pour ajouter des bordures autour de la barre de navigation ou pour l'afficher sous forme de carte :
Exemple
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
Lien actif/actuel
Ajoutez une classe w3-color à un lien pour le mettre en évidence :
Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Liens planables
Lorsque vous passez la souris sur un bouton, la couleur d'arrière-plan devient grise.
Si vous voulez une couleur d'arrière-plan différente au survol, utilisez l'une des classes w3-hover- color :
Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
Si vous souhaitez plutôt modifier la couleur du texte, désactivez l'effet de survol par défaut avec la classe w3-hover-none et ajoutez une classe w3-hover-text .
Exemple
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
Passez du temps à jouer avec différents effets de survol :
Exemple
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
Liens alignés à droite
Utilisez la classe w3-right sur un élément de liste pour aligner à droite un lien spécifique :
Exemple
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-green w3-right">Link 3</a>
</div>
Taille de la barre de navigation
Utilisez une classe w3-size pour modifier la taille de la police des liens à l'intérieur de la barre de navigation :
Exemple
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
Utilisez une classe w3-padding pour modifier le rembourrage de chaque lien à l'intérieur de la barre de navigation :
Exemple
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
Remarque : Vous pouvez également ajouter un rembourrage à la barre de navigation, au lieu de chaque bouton. Cependant, si vous faites cela, notez que les liens n'obtiennent pas un rembourrage complet au survol :
Exemple
<div class="w3-bar w3-green w3-padding-16"></div>
Personnalisez la largeur des liens avec la propriété CSS width
( Remarque : Utilisez w3-mobile pour transformer les liens en largeur de 100 % sur les petits écrans) :
Exemple
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
Barre de navigation avec icônes
Exemple
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
Les classes "fa fa" dans l'exemple ci-dessus affichent des icônes "Font Awesome".
Apprenez-en plus sur l'affichage des icônes dans le chapitre Icônes W3.CSS .
Texte de la barre de navigation
Si vous voulez du texte au lieu de boutons dans la barre de navigation, utilisez la classe w3-bar-item pour obtenir le même rembourrage que les boutons.
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
<span
class="w3-bar-item">Text</span>
</div>
Barre de navigation avec entrées et boutons
Exemple
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
Barre de navigation avec liste déroulante
Déplacez la souris sur le lien "Liste déroulante":
Exemple
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Liste déroulante cliquable
Utilisez w3-dropdown-click si vous préférez cliquer sur le lien déroulant au lieu de survoler :
Exemple
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
Menu déroulant horizontal
Supprimez la classe w3-bar-block du conteneur déroulant si vous souhaitez que les liens déroulants s'affichent horizontalement plutôt que verticalement :
Exemple
<div class="w3-bar w3-light-grey">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-card-4">
<a href="#"
class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
Barre de navigation réactive avec liste déroulante réactive
Utilisez la classe w3-mobile sur tous les liens, y compris le conteneur déroulant, pour créer une barre de navigation réactive avec des liens déroulants réactifs.
Redimensionnez la fenêtre du navigateur pour voir l'effet :
Exemple
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.