レスポンシブ・ナビゲーションバー

CoddyのHTMLジャーニー「JavaScript in Action」セクションの一部 — レッスン 26/27。

チャレンジ

簡単

マヤ文明に関するウェブサイトのバーガーメニューとナビゲーションのHTMLとCSSが用意されています。

あなたのタスクは、ボタンがクリックされたときにメニューが開閉するように、JavaScriptを機能させることです。

以下の手順に従ってください：

getElementById("burger")を使用して、バーガーボタンの要素を格納する変数を作成します。
getElementById("navMenu")を使用して、ナビゲーションメニューを格納する別の変数を作成します。
ボタンにイベントリスナーを追加し、クリックされたときに関数が実行されるようにします。
この関数の中で：
- ボタンの "active" クラスを切り替えます（これにより3本線がアニメーションします）。
- メニューの "active" クラスを切り替えます（これによりリンクが表示または非表示になります）。

正しく完了すると、バーガーボタンをクリックしたときに線が「X」にアニメーションし、ナビゲーションメニューが表示されるようになります。

自分で試してみよう

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