Menús desplegables

Parte de la sección JavaScript in Action del Journey de HTML de Coddy — lección 15 de 27.

Los menús desplegables son componentes de interfaz de usuario (UI) que revelan opciones adicionales cuando se activan. Se utilizan comúnmente en la navegación para organizar el contenido sin ocupar demasiado espacio.

Primero, vamos a crear la estructura HTML para un menú desplegable básico:

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

Ahora, añadamos el JavaScript para alternar la visibilidad del menú desplegable:

// Obtener el botón de alternancia del menú desplegable
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Obtener el menú desplegable
const dropdownMenu = document.querySelector('.dropdown-menu');

// Añadir un escuchador de eventos de clic al botón de alternancia
dropdownToggle.addEventListener('click', function() {
  // Alternar la clase 'show' en el menú desplegable
  dropdownMenu.classList.toggle('show');
});

Finalmente, añade algo de CSS básico para ocultar/mostrar el menú desplegable:

.dropdown-menu {
  display: none;
}

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

Cuando hagas clic en el botón "Menu", aparecerá el menú desplegable. Al hacer clic de nuevo, se ocultará el menú.

Desafío

Fácil

Crea un menú desplegable que se muestre/oculte cuando se haga clic en un botón.

Pasos:

En HTML:
- Añade un atributo onclick al botón que llame a una función llamada toggleDropdown cuando se haga clic
En JavaScript:
- Crea una función llamada toggleDropdown
- Dentro de la función, alterna la clase "show" en el elemento con el ID “myDropdown”

Pruébalo tú mismo

<!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>