Menú desplegable

Parte de la sección JavaScript en Acción del Journey de HTML de Coddy. Lección 4 de 27.

El componente de menú desplegable es un elemento común de la interfaz de usuario que revela contenido adicional al hacer clic en él.

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, JavaScript agrega 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 detector de eventos 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>