Barra de navegación responsive

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

Desafío

Fácil

Tenemos el HTML y el CSS para el menú de hamburguesa y la navegación en nuestro sitio web sobre la civilización Maya.

Tu tarea es hacer que el JavaScript funcione para que el menú se abra y se cierre cuando se haga clic en el botón.

Sigue estos pasos:

Crea una variable para almacenar el elemento del botón de hamburguesa usando getElementById("burger").
Crea otra variable para almacenar el menú de navegación usando getElementById("navMenu").
Agrega un escuchador de eventos (event listener) al botón para que, cuando se haga clic en él, se ejecute una función.
Dentro de esta función:
- Alterna (toggle) la clase "active" en el botón (esto animará las 3 líneas).
- Alterna (toggle) la clase "active" en el menú (esto mostrará u ocultará los enlaces).

Cuando se haga correctamente, al hacer clic en el botón de hamburguesa las líneas deberían animarse para formar una "X" y mostrar el menú de navegación.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Maya Civilization</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <div class="logo">Maya World</div>
    <div id="burger" class="burger-btn">
      <div class="line"></div>
      <div class="line"></div>
      <div class="line"></div>
    </div>
    <nav id="navMenu" class="nav-links">
      <a href="#">Home</a>
      <a href="#">History</a>
      <a href="#">Culture</a>
      <a href="#">Architecture</a>
    </nav>
  </header>

  <main>
    <section class="hero">
      <h1>The Maya Civilization</h1>
      <p>
        The Maya civilization thrived in Mesoamerica, known for its remarkable
        achievements in astronomy, mathematics, and monumental architecture.
      </p>
    </section>

    <section class="content">
      <h2>Legacy of the Maya</h2>
      <p>
        The Maya left behind impressive cities, pyramids, and written language. 
        Their deep knowledge of astronomy influenced calendars and rituals, while 
        their art and traditions continue to inspire today.
      </p>
      <img src="https://upload.wikimedia.org/wikipedia/commons/e/ea/El_Castillo%2C_Chich%C3%A9n_Itz%C3%A1.jpg"
           alt="Maya Pyramid" class="content-img">
    </section>
  </main>

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