Menu déroulant

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 4 sur 27.

Le composant de liste déroulante est un élément d’interface utilisateur courant qui révèle du contenu supplémentaire lorsqu’on clique dessus.

Commencez par créer la structure HTML pour un menu déroulant :

<div class="dropdown">
  <button class="dropdown-toggle">Select an option</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Ajoutez du CSS de base pour styliser le menu déroulant :

.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  z-index: 1;
}
.show {
  display: block;
}

Maintenant, ajoutez du JavaScript pour basculer l'affichage du menu déroulant :

const dropdownToggle = document.querySelector('.dropdown-toggle');
const dropdownMenu = document.querySelector('.dropdown-menu');

dropdownToggle.addEventListener('click', function() {
  dropdownMenu.classList.toggle('show');
});

Lorsque le bouton est cliqué, JavaScript ajoute ou supprime la classe 'show', qui contrôle la visibilité du menu déroulant.

Défi

Facile

Votre tâche :

Ajoutez la troisième option appelée “Logout” avec la classe logout dans le menu déroulant.
Complétez l’écouteur d’événement de clic en ajoutant la ligne qui active ou désactive la classe "show" sur le menu déroulant.

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Dropdown Challenge</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <h2>Welcome to the Dashboard</h2>
  <p>Click the button below to open your profile menu:</p>

  <div id="profileDropdown" class="dropdown">
    <button class="dropdown-toggle">
      My Profile
    </button>
    <div class="dropdown-menu">
      <a href="#">View Profile</a>
      <a href="#">Settings</a>
    </div>
  </div>

    <script src="script.js"></script>
</body>
</html>