Menus déroulants

Fait partie de la section JavaScript in Action du Journey HTML de Coddy — leçon 15 sur 27.

Les menus déroulants sont des composants d'interface utilisateur (UI) qui révèlent des options supplémentaires lorsqu'ils sont activés. Ils sont couramment utilisés dans la navigation pour organiser le contenu sans prendre trop de place.

Tout d'abord, créons la structure HTML pour un menu déroulant de base :

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

Maintenant, ajoutons le JavaScript pour basculer la visibilité du menu déroulant :

// Récupérer le bouton de bascule du menu déroulant
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Récupérer le menu déroulant
const dropdownMenu = document.querySelector('.dropdown-menu');

// Ajouter un écouteur d'événement de clic au bouton de bascule
dropdownToggle.addEventListener('click', function() {
  // Basculer la classe 'show' sur le menu déroulant
  dropdownMenu.classList.toggle('show');
});

Enfin, ajoutez du CSS de base pour masquer/afficher le menu déroulant :

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

Lorsque vous cliquez sur le bouton « Menu », le menu déroulant apparaîtra. Cliquer à nouveau dessus masquera le menu.

Défi

Facile

Créez un menu déroulant qui s'affiche ou se masque lorsqu'on clique sur un bouton.

Étapes :

En HTML :
- Ajoutez un attribut onclick au bouton qui appelle une fonction nommée toggleDropdown lors du clic
En JavaScript :
- Créez une fonction appelée toggleDropdown
- À l'intérieur de la fonction, basculez la classe "show" sur l'élément ayant l'ID “myDropdown”

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

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