Dropdown menus

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

Dropdown menus sont des composants d’interface utilisateur qui révèlent des options supplémentaires lorsqu’ils sont déclenchés. Ils sont couramment utilisés dans la navigation pour organiser le contenu sans prendre trop de place.

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 click sur le "Menu" button, le dropdown menu apparaîtra. En cliquant à nouveau dessus, le menu sera masqué.

Défi

Facile

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

Étapes :

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