Menus déroulants

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

Les menus déroulants sont des composants d’interface utilisateur 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 occuper trop d’espace.

Commençons par créer la structure HTML d’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>

Ajoutons maintenant le JavaScript pour basculer la visibilité du menu déroulant :

// Get the dropdown toggle button
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Get the dropdown menu
const dropdownMenu = document.querySelector('.dropdown-menu');

// Add click event listener to the toggle button
dropdownToggle.addEventListener('click', function() {
  // Toggle the 'show' class on the dropdown menu
  dropdownMenu.classList.toggle('show');
});

Enfin, ajoute 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ît. Cliquez à nouveau dessus pour masquer le menu.

Défi

Facile

Créez un menu déroulant qui s’affiche/se masque lorsqu’un bouton est cliqué.

Étapes :

En HTML :
- Ajoutez un attribut onclick au bouton qui appelle une fonction nommée toggleDropdown lorsqu’il est cliqué
En JavaScript :
- Créez une fonction appelée toggleDropdown
- À l’intérieur de la fonction, activez ou désactivez la classe "show" sur l’élément ayant pour 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>