Alternar el menú hamburguesa móvil

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

En pantallas pequeñas, los sitios web suelen usar 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 elementos (con estilos de 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 añadamos algo de CSS básico para dar estilo al menú de 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

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

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

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

Desafío

Fácil

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

Alterna la clase "active" en el botón. Esto animará las tres líneas para formar una “X”.
Alterna la clase "active" en el menú. 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>