Barre de navigation horizontale CSS
Barre de navigation horizontale
Il existe deux manières de créer une barre de navigation horizontale. Utilisation d'éléments de liste en ligne ou flottants .
Éléments de liste en ligne
Une façon de créer une barre de navigation horizontale consiste à spécifier les éléments <li> comme inline, en plus du code "standard" de la page précédente :
Exemple
li
{
display: inline;
}
Exemple expliqué :
display: inline;- Par défaut, les éléments <li> sont des éléments de bloc. Ici, nous supprimons les sauts de ligne avant et après chaque élément de la liste, pour les afficher sur une seule ligne
Éléments de la liste flottante
Une autre façon de créer une barre de navigation horizontale consiste à faire flotter les éléments <li> et à spécifier une disposition pour les liens de navigation :
Exemple
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Exemple expliqué :
float: left;- Utilisez float pour faire flotter les éléments de bloc les uns à côté des autresdisplay: block;- Nous permet de spécifier le rembourrage (et la hauteur, la largeur, les marges, etc. si vous le souhaitez)padding: 8px;- Spécifiez un rembourrage entre chaque élément <a>, pour leur donner une belle apparencebackground-color: #dddddd;- Ajouter une couleur de fond grise à chaque élément <a>
Astuce : Ajoutez la couleur d'arrière-plan à <ul> au lieu de chaque élément <a> si vous voulez une couleur d'arrière-plan pleine largeur :
Exemple
ul
{
background-color: #dddddd;
}
Exemples de barre de navigation horizontale
Créez une barre de navigation horizontale de base avec une couleur d'arrière-plan sombre et modifiez la couleur d'arrière-plan des liens lorsque l'utilisateur passe la souris dessus :
Exemple
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Lien de navigation actif/actuel
Ajoutez une classe "active" au lien actuel pour indiquer à l'utilisateur sur quelle page il se trouve :
Exemple
.active {
background-color: #04AA6D;
}
Liens alignés à droite
Alignez les liens à droite en faisant flotter les éléments de la liste vers la droite ( float:right;) :
Exemple
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Séparateurs de bordure
Ajoutez la border-rightpropriété à <li> pour créer des séparateurs de liens :
Exemple
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Barre de navigation fixe
Faites en sorte que la barre de navigation reste en haut ou en bas de la page, même lorsque l'utilisateur fait défiler la page :
Dessus fixe
ul {
position: fixed;
top: 0;
width: 100%;
}
Fond fixe
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Remarque : la position fixe peut ne pas fonctionner correctement sur les appareils mobiles.
Barre de navigation horizontale grise
Exemple de barre de navigation horizontale grise avec une fine bordure grise :
Exemple
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Barre de navigation collante
Ajoutez position: sticky;à <ul> pour créer une barre de navigation collante.
Un élément collant bascule entre relatif et fixe, en fonction de la position de défilement. Il est positionné de manière relative jusqu'à ce qu'une position de décalage donnée soit rencontrée dans la fenêtre - puis il "colle" en place (comme position:fixed).
Exemple
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Remarque : Internet Explorer ne prend pas en charge le positionnement permanent. Safari nécessite un préfixe -webkit- (voir l'exemple ci-dessus). Vous devez également spécifier au moins l'un des éléments top, right, bottomou leftpour que le positionnement permanent fonctionne.
Plus d'exemples
Topnav réactif
Comment utiliser les requêtes média CSS pour créer une navigation supérieure réactive.
Sidenav réactif
Comment utiliser les requêtes média CSS pour créer une navigation latérale réactive.
Barre de navigation déroulante
Comment ajouter un menu déroulant dans une barre de navigation.
Avez-vous déjà entendu parler des Espaces W3Schools ? Ici, vous pouvez créer votre site Web à partir de zéro ou utiliser un modèle et l'héberger gratuitement.
Commencez gratuitement ❯* Pas de carte de crédit nécessaire