Alternar menú hamburguesa móvil

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

En pantallas pequeñas, los sitios web suelen utilizar un icono de hamburguesa (☰) en lugar de mostrar la navegación completa. Cuando el usuario hace clic en el icono de hamburguesa, JavaScript alterna la visibilidad del menú de navegación.

Primero, crea la estructura HTML básica: un botón con 3 spans (estilizados como líneas en CSS para formar el icono de hamburguesa) y un <nav> oculto que contiene los enlaces del menú.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Ahora vamos a añadir un poco de CSS básico para dar estilo al menú hamburguesa:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* Muestra la navegación cuando no tiene la clase hidden */
nav:not(.hidden) {
  display: block;
}

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

// Selecciona el botón de hamburguesa y la navegación móvil
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Añade un escuchador de eventos de clic al botón de hamburguesa
burgerBtn.addEventListener('click', function() {
  // Alterna la clase 'hidden' en la navegación móvil
  mobileNav.classList.toggle('hidden');
});

Cuando haces clic en el botón de hamburguesa, se alterna la clase hidden en el menú de navegación, haciendo que aparezca o desaparezca.

Desafío

Fácil

Dentro del escuchador de eventos para el botón de hamburguesa, añade dos líneas de código:

Alterna la clase "active" en el button — esto animará las tres líneas para formar una “X”.
Alterna la clase "active" en el menu — esto hará que el menú de navegación aparezca y desaparezca.

Pruébalo tú mismo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Botón de hamburguesa -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Menú de navegación -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Contenido principal -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

  <script src="script.js"></script>
</body>
</html>