Comment créer : bouton "Plus" dans la barre de navigation

Apprenez à créer un bouton "Plus".

Créez une barre de navigation avec menu déroulant

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">Plus
      <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 un élément <button>, <a> ou <p>.

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

Enveloppez le bouton et un autre élément <div> avec un é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 du menu déroulant */
.dropdown {
  float: left;
  overflow: hidden;
}
/* Bouton du menu 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 appareils mobiles */
  margin: 0; /* Très important pour l'alignement vertical sur les téléphones */
}
/* 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 (par défaut, il est caché) */
.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;
}

Essayez-le vous-même

Exemple d'explication :

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

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

.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 définie à 160px. Vous pouvez librement modifier ce réglage.

Nous n'avons pas utilisé de bordure, mais nous avons utilisé box-shadow La propriété, afin que le menu déroulant ressemble à une carte. Nous utilisons également z-index Placez le menu déroulant devant d'autres éléments.

:hover Le sélecteur est utilisé pour afficher le menu déroulant lorsque l'utilisateur place le curseur sur le bouton du menu déroulant.

Pages associées

Tutoriel :Menu déroulant CSS

Tutoriel :Comment créer un menu déroulant cliquable

Tutoriel :Barre de navigation CSS

Tutoriel :Comment créer une barre de navigation en tête responsive