Barre de navigation horizontale CSS

Barre de navigation horizontale

Il y a deux méthodes pour créer une barre de navigation horizontale : utiliserEn ligneouFlottantÉlément de liste.

Élément en ligne

Une méthode pour construire une barre de navigation horizontale consiste à définir l'élément <li> comme inline, en plus du code "standard" du chapitre précédent :

Exemple

li {
  display: inline;
}

Essayez-le vous-même

Explication de l'exemple :

display: inline; - Par défaut, l'élément <li> est un élément en bloc. Ici, nous supprimons les sauts de ligne avant et après chaque élément de liste pour qu'ils puissent s'afficher sur une ligne.

Élément de liste flottant

Une autre méthode pour créer une barre de navigation horizontale consiste à flotter les éléments <li> et à définir la mise en page des liens de navigation :

Exemple

li {
  float: left;
}
a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Essayez-le vous-même

Explication de l'exemple :

  • float: left; - Utilisez float pour faire glisser les éléments en bloc côte à côte
  • display: block; - Afficher le lien en élément en bloc permet de rendre tout le domaine du lien cliquable (pas seulement le texte), et nous permet de spécifier le rembourrage (si nécessaire, nous pouvons également spécifier la hauteur, la largeur, la marge, etc.)
  • padding: 8px; - Rend les éléments en bloc plus esthétiques
  • background-color: #dddddd; - Ajoutez une couleur de fond grise à chaque élément

Astuce :Pour une couleur de fond pleine largeur, ajoutez background-color à <ul> plutôt qu'à chaque élément <a> :

Exemple

ul {
  background-color: #dddddd;
}

Essayez-le vous-même

Exemple de barre de navigation horizontale

Créez une barre de navigation horizontale de base avec un fond de couleur sombre et changez la couleur de fond du lien lorsque l'utilisateur place le curseur au-dessus du lien :

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;
}
/* Changer la couleur du lien en #111 (noir) lorsque le curseur de la souris est dessus */
li a:hover {
  background-color: #111;
}

Essayez-le vous-même

Lien de navigation actif/actuel

Ajouter la classe "active" au lien actuel afin que l'utilisateur sache sur quelle page il se trouve :

Exemple

.active {
  background-color: #4CAF50;
}

Essayez-le vous-même

Aligner les liens à droite

Aligner les liens à droite en flottant les éléments de liste vers la droite (float:right;）：

Exemple

<ul>
  <li><a href="#home">Accueil</a></li>
  <li><a href="#news">Nouvelles</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">À propos</a></li>
</ul>

Essayez-le vous-même

bordure de séparation

Pour bordure-right Ajouter l'attribut

Exemple

/* Ajouter une bordure droite grise à tous les éléments de liste, sauf pour le dernier (last-child) */
li {
  border-right: 1px solid #bbb;
}
li:last-child {
  border-right: none;
}

Essayez-le vous-même

Barre de navigation fixe

Maintenir la barre de navigation au sommet ou en bas de la page, même si l'utilisateur fait défiler la page :

Fixe en haut

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Essayez-le vous-même

Fixe en bas

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Essayez-le vous-même

Attention :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 bordure fine grise

Exemple

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li a {
  color: #666;
}

Essayez-le vous-même

Barre de navigation collante

Ajouter position: sticky;pour créer une barre de navigation collante.

Les éléments collants changent entre relatif et fixe en fonction de la position de défilement. Ils sont positionnés relativement jusqu'à ce qu'ils atteignent la position offset donnée dans la fenêtre de visualisation - puis ils sont «collés» à la position appropriée (par exemple, position:fixed).

Exemple

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Essayez-le vous-même

Attention :Internet Explorer, Edge 15 et les versions antérieures ne prennent pas en charge la position collée. Safari nécessite le préfixe -webkit- (voir l'exemple ci-dessus). Vous devez également spécifier haut、droite、bas ou gauche Au moins un, pour que la position collée fonctionne.

Plus d'exemples

Barre de navigation supérieure réactive
Comment utiliser les requêtes media CSS pour créer une navigation supérieure réactive.
Barre de navigation latérale réactive
Comment utiliser les requêtes media CSS pour créer une navigation latérale réactive.
Barre de navigation déroulante
Comment ajouter un menu déroulant dans la barre de navigation.