Menu déroulant

Fait partie de la section Front-end pratique du Journey HTML de Coddy. Leçon 20 sur 35.

Un menu déroulant est un élément de navigation qui affiche davantage de liens lorsque l’utilisateur le survole ou lui donne le focus. Bien que les menus déroulants puissent être créés à l’aide de JavaScript, dans ce chapitre, nous nous concentrons sur une approche basée uniquement sur 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

Vous disposez du code HTML d’un menu déroulant avec un bouton intitulé "Select Color" et trois options : Red, Green, Blue.

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

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

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>