Comment créer : Barre de navigation déroulante

Page précédente Menu déroulant en cascade
Page suivante Menu déroulant dans la barre de navigation latérale

Apprendre à créer une barre de navigation déroulante.

Menu déroulant dans la barre de navigation

Créer une barre de navigation déroulante

Un menu déroulant apparaît lorsque l'utilisateur place le curseur sur un élément de la barre de navigation.

Première étape - Ajouter HTML :

<div class="navbar">
  <a href="#home">Accueil</a>
  <a href="#news">Actualités</a>
  <div class="dropdown">
    <button class="dropbtn">Déroulant
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Lien 1</a>
      <a href="#">Lien 2</a>
      <a href="#">Lien 3</a>
    </div>
  </div>
</div>

Exemple d'explication :

Utilisez n'importe quel élément pour ouvrir le menu déroulant, par exemple <button>, <a> ou l'élément <p>.

Créez un menu déroulant en utilisant un élément conteneur (comme <div>) et ajoutez des liens de menu déroulant.

Enveloppez le bouton et un autre élément <div> pour utiliser CSS pour positionner correctement le menu déroulant.

Deuxième étape - Ajouter CSS :

/* Conteneur de la barre de navigation */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Liens dans la barre de navigation */
.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* Conteneur déroulant */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Bouton déroulant */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Très important pour l'alignement vertical sur les téléphones mobiles */
  margin: 0; /* Important pour l'alignement vertical sur les smartphones */
}
/* Ajoutez une couleur de fond rouge aux liens de la barre de navigation au survol de la souris */
.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: red;
}
/* Contenu du menu déroulant (caché par défaut) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Liens dans le menu déroulant */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Ajoutez une couleur de fond grise au lien du menu déroulant au survol de la souris */
.dropdown-content a:hover {
  background-color: #ddd;
}
/* Affichez le menu déroulant au survol de la souris */
.dropdown:hover .dropdown-content {
  display: block;
}

Essaye-le toi-même

Exemple d'explication :

Nous avons déjà défini des styles pour la barre de navigation et les liens de navigation, tels que la couleur de fond, la marge interne, etc.

Nous avons déjà défini des styles pour le bouton du menu déroulant, tels que la couleur de fond, la marge interne, etc.

.dropdown La classe est .dropdown-content Le conteneur. Comme c'est un élément <div> et non un élément <a>, nous devons le faire flotter pour nous assurer qu'il reste à côté du lien.

.dropdown-content La classe contient le menu déroulant réel. Il est par défaut caché et s'affichera au survol de la souris (voir ci-dessous). Notez que la largeur minimale est réglée sur 160px. Vous pouvez librement modifier ce réglage.

Nous n'avons pas utilisé de bordure, mais box-shadow La propriété, pour que le menu déroulant apparaisse comme une carte. Nous utilisons également z-index Placer le menu déroulant devant d'autres éléments.

:hover Les sélecteurs s'affichent lorsque l'utilisateur passe la souris sur le bouton du menu déroulant.