Responsywna nawigacja

Część sekcji JavaScript w praktyce ścieżki HTML w Coddy. Lekcja 26 z 27.

Wyzwanie

Łatwy

Mamy HTML i CSS dla menu hamburgerowego i nawigacji na naszej stronie o cywilizacji Majów.

Twoim zadaniem jest sprawić, by JavaScript działał, tak aby menu otwierało się i zamykało po kliknięciu przycisku.

Wykonaj następujące kroki:

Utwórz zmienną przechowującą element przycisku menu hamburgerowego za pomocą getElementById("burger").
Utwórz kolejną zmienną przechowującą menu nawigacyjne za pomocą getElementById("navMenu").
Dodaj do przycisku detektor zdarzeń, aby po jego kliknięciu uruchamiała się funkcja.
Wewnątrz tej funkcji:
- Przełącz klasę "active" przycisku (spowoduje to animację 3 linii).
- Przełącz klasę "active" menu (spowoduje to wyświetlenie lub ukrycie linków).

Po poprawnym wykonaniu kliknięcie przycisku menu hamburgerowego powinno animować linie, tworząc „X”, i wyświetlić menu nawigacyjne.

Spróbuj swoich sił

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