Menú desplegable

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

El componente dropdown es un elemento de interfaz de usuario común que revela contenido adicional al hacer clic.

Comienza creando la estructura HTML para un menú desplegable:

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

Añade un poco de CSS básico para dar estilo al menú desplegable:

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

Ahora, añade JavaScript para alternar el menú desplegable:

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

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

Cuando se hace clic en el botón, el JavaScript añade o elimina la clase 'show', que controla la visibilidad del menú desplegable.

Desafío

Fácil

Tu tarea:

Añade la tercera opción llamada “Logout” con la clase logout en el menú desplegable.
Completa el event listener de clic añadiendo la línea que alterna la clase "show" en el menú desplegable.

Pruébalo tú mismo

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