Menu déroulant

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 20 sur 35.

Un menu déroulant est un élément de navigation qui affiche plus de liens lorsque l'utilisateur le survole ou met le focus dessus. Bien que les menus déroulants puissent être construits à l'aide de JavaScript, dans ce chapitre, nous nous concentrons sur une approche exclusivement CSS, qui utilise :hover ou :focus-within pour révéler le menu masqué.

Pourquoi les utiliser :

Économise de l'espace dans les barres de navigation.
Maintient l'interface propre et organisée.
Fonctionne bien pour les designs mobile-first et responsives lorsqu'ils sont adaptés correctement.

HTML :

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

CSS :

//Le .dropdown est en position: relative 
//pour que le contenu du menu déroulant puisse être positionné correctement avec position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//Le .dropdown-content est masqué par défaut en utilisant display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//Lorsque l'utilisateur survole le conteneur .dropdown, 
//le .dropdown-content est affiché en utilisant display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

Avec ce code, lorsque vous survolez le conteneur du menu déroulant (y compris le bouton), le contenu du menu déroulant apparaîtra.

Défi

Facile

On vous donne le code HTML d'un menu déroulant avec un bouton étiqueté "Select Color" et trois options : Red, Green, Blue.

Votre tâche consiste à styliser le menu déroulant avec CSS de sorte que :

Les options soient masquées par défaut.
Les options deviennent visibles lorsque l'utilisateur survole le conteneur du menu déroulant.

Aide-mémoire

Un menu déroulant affiche plus de liens lorsque l'utilisateur le survole ou se focalise dessus. Utilisez :hover ou :focus-within pour révéler le menu masqué.

Structure HTML :

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Implémentation CSS :

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
}

.dropdown:hover .dropdown-content {
  display: block;
}

Le conteneur du menu déroulant utilise position: relative afin que le contenu du menu puisse être positionné avec position: absolute. Le contenu est masqué par défaut avec display: none et affiché au survol avec display: block.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown menu</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 50px;
      background-color: #f0f0f0;
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }

    .dropdown-button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      border: 1px solid #333;
      border-radius: 5px;
      background-color: #ffffff;
    }

    .dropdown-content {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #ffffff;
      min-width: 160px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.2);
      z-index: 1;
    }

    .dropdown-content a {
      display: block;
      padding: 10px;
      text-decoration: none;
      color: #333;
    }

    .dropdown-content a:hover {
      background-color: #f2f2f2;
    }

    /* Show dropdown on hover or focus */
    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {

    }
  </style>
</head>
<body>

  <div class="dropdown">
    <button class="dropdown-button">Select Color</button>
    <div class="dropdown-content">
      <a href="#">Red</a>
      <a href="#">Green</a>
      <a href="#">Blue</a>
    </div>
  </div>

</body>
</html>