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 avec 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 :

Permettent de gagner de la place dans les barres de navigation.
Gardent l’interface propre et organisée.
Conviennent bien aux conceptions pensées d’abord pour les mobiles et aux conceptions adaptatives lorsqu’elles sont correctement adaptées.

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 :

//The .dropdown is position: relative 
//so the dropdown content can be positioned correctly with position: absolute.
.dropdown {
  position: relative;
  display: inline-block;
}

//The .dropdown-content is hidden by default using display: none.
.dropdown-content {
  display: none;
  position: absolute;
}

//When the user hovers over the .dropdown container, 
//the .dropdown-content is shown using display: block.
.dropdown:hover .dropdown-content {
  display: block;
}

Avec ce code, lorsque tu survoles le conteneur de la liste déroulante (y compris le bouton), son contenu s’affiche.

Défi

Facile

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

Ta tâche consiste à mettre en forme le menu déroulant avec 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>