Barre de navigation responsive

Fait partie de la section JavaScript en action du Journey HTML de Coddy. Leçon 26 sur 27.

Défi

Facile

Nous avons le HTML et le CSS du menu hamburger et de la navigation sur notre site consacré à la civilisation maya.

Votre tâche consiste à faire fonctionner le JavaScript afin que le menu s’ouvre et se ferme lorsque l’on clique sur le bouton.

Suivez ces étapes :

Créez une variable pour stocker l’élément du bouton hamburger à l’aide de getElementById("burger").
Créez une autre variable pour stocker le menu de navigation à l’aide de getElementById("navMenu").
Ajoutez un écouteur d’événement au bouton afin que, lorsqu’on clique dessus, une fonction s’exécute.
À l’intérieur de cette fonction :
- Basculez la classe "active" sur le bouton (cela animera les 3 lignes).
- Basculez la classe "active" sur le menu (cela affichera ou masquera les liens).

Une fois terminé correctement, cliquer sur le bouton hamburger devrait transformer les lignes en un « X » animé et afficher le menu de navigation.

Essayez vous-même

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