Comment créer : grand menu

Apprenez à créer un grand menu (menu déroulant pleine largeur dans la barre de navigation).

Créer un grand menu

Créez un menu déroulant qui s'affiche lorsque l'utilisateur place le curseur sur un élément de la barre de navigation.

Étape 1 - Ajouter HTML :

<div class="navbar">
  <a href="#home">Accueil</a>
  <a href="#news">Nouvelles</a>
  <div class="dropdown">
    <button class="dropbtn">Menu déroulant
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <div class="header">
        <h2>Menu Mega</h2>
      </div>
      <div class="row">
        <div class="column">
          <h3>Catégorie 1</h3>
          <a href="#">Lien 1</a>
          <a href="#">Lien 2</a>
          <a href="#">Lien 3</a>
        </div>
        <div class="column">
          <h3>Catégorie 2</h3>
          <a href="#">Lien 1</a>
          <a href="#">Lien 2</a>
          <a href="#">Lien 3</a>
        </div>
        <div class="column">
          <h3>Catégorie 3</h3>
          <a href="#">Lien 1</a>
          <a href="#">Lien 2</a>
          <a href="#">Lien 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

Exemple d'explication :

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

Utilisez l'élément conteneur (comme <div class="dropdown-content">) pour créer le menu déroulant, puis ajoutez une grille (colonnes) et ajoutez des liens de menu déroulant à l'intérieur de la grille.

Utilisez l'élément <div class="dropdown"> pour envelopper le bouton et l'élément conteneur (comme <div class="dropdown-content">) afin de positionner correctement le menu déroulant avec CSS.

Deuxième étape - Ajoutez CSS :

/* Conteneur de la barre de navigation */
.navbar {
  overflow: hidden;
  background-color: #333;
  font-family: Arial;
}
/* Liens à l'intérieur de 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: inherit; /* Très important pour l'alignement vertical sur les appareils mobiles */
  margin: 0; /* Très important pour l'alignement vertical sur les appareils mobiles */
}
/* Ajoute 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 de la liste déroulante (masqué par défaut) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Grand titre de menu (si nécessaire) */
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
/* Afficher le menu déroulant au survol de la souris */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Créer trois colonnes égales et les aligner côte à côte */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
/* Définir les styles pour les liens dans les colonnes */
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
/* Ajouter une couleur de fond au survol de la souris */
.column a:hover {
  background-color: #ddd;
}
/* Nettoyer les flottants après les colonnes */
.row:after {
  content: "";
  display: table;
  clear: both;
}

Essayez-le vous-même

Exemple d'explication :

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

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

.dropdown-content La classe contient le menu déroulant réel. Il est masqué par défaut et s'affiche au survol de la souris (voir ci-dessous). Il est positionné sous le bouton du menu déroulant et la largeur est définie à 100%, pour couvrir tout l'écran.

Nous n'avons pas utilisé de bordure, mais nous avons utilisé box-shadow L'attribut, afin que le menu déroulant semble comme 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.

.column La classe est utilisée pour créer trois colonnes flottantes côte à côte dans le menu déroulant (pour afficher différentes catégories).

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