CSS Barre de Navigation Horizontale
Barre de Navigation Horizontale en CSS
Dans une barre de navigation horizontale, les liens de navigation sont disposés horizontalement (les uns à côté des autres) et sont généralement alignés en haut d'une page web.
Les bases d'une barre de navigation horizontale consistent en une liste non ordonnée (<ul>), avec des éléments de liste (<li>), chacun contenant un lien (<a>), comme montré dans la page Introduction à la Navbar .
Il est également courant d'ajouter un élément <nav> autour de l'élément <ul>, qui servira de conteneur pour votre barre de navigation.
Barre de Navigation Horizontale Utilisant Float
Une façon de créer une barre de navigation horizontale est d'ajouter la propriété float aux éléments <li>.
Ici, nous créons une barre de navigation horizontale de base avec une couleur de fond sombre et changeons la couleur de fond des liens lorsque l'utilisateur passe la souris dessus :
Exemple
Barre de navigation horizontale avec float :
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}
ul li {
float: left;
}
ul li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
} Exemple expliqué :
-
overflow: hidden;- Empêche les éléments de liste de sortir de la liste -
background-color: #333333;- Ajoute une couleur de fond noire à l'élément <ul> -
float: left;- Fait flotter les éléments <li> les uns à côté des autres -
display: block;- Permet de spécifier le padding, la hauteur, la largeur et les marges pour <a> -
padding: 14px 16px;- Ajoute un peu de padding entre chaque élément <a> -
text-decoration: none;- Supprime le soulignement des liens
Barre de Navigation Horizontale Utilisant Flex
Une façon plus moderne de créer une barre de navigation horizontale est d'utiliser CSS flexbox .
L'exemple suivant crée une barre de navigation horizontale ayant un aspect similaire à celle ci-dessus, mais avec flexbox :
Exemple
Barre de navigation horizontale avec flex :
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
}
ul li a {
display: block;
color: white;
padding: 14px 16px;
text-decoration: none;
}
ul li a:hover {
background-color: #111111;
} La solution ici est display: flex; . Cela crée un contexte flex et par défaut, les éléments sont affichés de gauche à droite.
En ajoutant simplement une ligne au bloc ul : justify-content: center; , vous obtiendrez une barre de navigation centrée horizontalement :
Exemple
Barre de navigation centrée horizontalement avec flex :
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #333333;
display: flex;
justify-content: center;
}
État Actif
Ici, nous ajoutons une classe "active" pour mettre en évidence le lien correspondant à la page actuelle afin d'informer l'utilisateur sur quelle page/section il se trouve :
Exemple
ul li a.active {
background-color: #04AA6D;
} Barre de Navigation Horizontale Grise
Voici un exemple d'une barre de navigation horizontale grise avec une fine bordure grise :
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
Aligner Un Lien à Droite
Vous pouvez aligner à droite un ou plusieurs liens en faisant flotter les éléments de liste à droite ( float: right; ) :
Exemple
<ul>
<li><a href="#home" class="active">Accueil</a></li>
<li><a href="#news">Actualités</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a href="#about">À Propos</a></li>
</ul> Diviseurs de Bordure
Ajoutez la propriété border-right aux éléments <li> (à tous les <li>, sauf le dernier), pour créer des diviseurs de lien :
Exemple
/* Ajoutez une bordure droite gris clair à tous les éléments de liste, sauf le dernier */
ul li {
float: left;
border-right: 1px solid #bbbbbb;
}
ul li:last-child {
border-right: none;
} Barre de Navigation Fixe
Vous pouvez faire en sorte que la barre de navigation reste fixe en haut ou en bas d'une page, en utilisant la propriété position avec top ou bottom :
Fixé en Haut
ul {
position: fixed;
top: 0;
width: 100%;
} Fixé en Bas
ul {
position: fixed;
bottom: 0;
width: 100%;
} Remarque : La position fixe peut ne pas fonctionner correctement sur les appareils mobiles.
Barre de Navigation Collante
Ajoutez position: sticky; à <ul> pour créer une barre de navigation collante.
Un élément avec position: sticky; bascule entre une position relative et fixe , en fonction de la position de défilement.
Un élément collant est positionné de manière relative jusqu'à ce qu'une certaine position de défilement soit atteinte - puis il "colle" à cet endroit (comme une position fixe).
Exemple
ul {
position: sticky;
top: 0;
} Remarque : Vous devez spécifier au moins l'une des propriétés top , right , bottom ou left , pour que le positionnement collant fonctionne.
Menu Déroulant dans la Barre de Navigation
Ici, nous créons un menu déroulant pour l'un des liens du menu :
Exemple
Barre de Navigation Responsive
Exemple
Comment utiliser les requêtes média CSS pour créer une navigation supérieure responsive :
Avez-vous déjà entendu parler de formation-ti.org Spaces ? Ici, vous pouvez créer votre site web à partir de zéro ou utiliser un modèle.
* aucune carte de crédit requise