Barra de navegación adaptable

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

Desafío

Fácil

Tenemos el HTML y el CSS del menú de hamburguesa y la navegación de 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 al hacer 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").
Añade un detector de eventos al botón para que, cuando se haga clic en él, se ejecute una función.
Dentro de esta función:
- Alterna la clase "active" en el botón (esto animará las 3 líneas).
- Alterna la clase "active" en el menú (esto mostrará u ocultará los enlaces).

Cuando esté hecho correctamente, al hacer clic en el botón de hamburguesa las líneas deberían transformarse en una «X» y mostrarse 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>