Barra di navigazione responsive

Fa parte della sezione JavaScript in azione del percorso HTML di Coddy. Lezione 26 di 27.

Sfida

Facile

Abbiamo l'HTML e il CSS per il menu hamburger e la navigazione sul nostro sito web sulla civiltà Maya.

Il tuo compito è far funzionare JavaScript in modo che il menu si apra e si chiuda quando si fa clic sul pulsante.

Segui questi passaggi:

Crea una variabile per memorizzare l'elemento del pulsante hamburger usando getElementById("burger").
Crea un'altra variabile per memorizzare il menu di navigazione usando getElementById("navMenu").
Aggiungi un listener di eventi al pulsante, in modo che al clic venga eseguita una funzione.
All'interno di questa funzione:
- Attiva o disattiva la classe "active" sul pulsante (questo animerà le 3 linee).
- Attiva o disattiva la classe "active" sul menu (questo mostrerà o nasconderà i collegamenti).

Se tutto è corretto, facendo clic sul pulsante hamburger le linee si animeranno formando una “X” e verrà mostrato il menu di navigazione.

Provalo tu

<!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>