Thanh điều hướng thích ứng

Thuộc phần JavaScript trong thực tế trong hành trình HTML của Coddy. Bài học 26 trên 27.

Thử thách

Dễ

Chúng ta đã có HTML và CSS cho menu burger và phần điều hướng trên trang web về nền văn minh Maya.

Nhiệm vụ của bạn là làm cho JavaScript hoạt động để menu mở và đóng khi bạn nhấp vào nút.

Hãy làm theo các bước sau:

Tạo một biến để lưu phần tử nút burger bằng getElementById("burger").
Tạo một biến khác để lưu menu điều hướng bằng getElementById("navMenu").
Thêm trình lắng nghe sự kiện vào nút để khi được nhấp vào, một hàm sẽ chạy.
Bên trong hàm này:
- Bật hoặc tắt lớp "active" trên nút (thao tác này sẽ làm động 3 đường kẻ).
- Bật hoặc tắt lớp "active" trên menu (thao tác này sẽ hiện hoặc ẩn các liên kết).

Khi hoàn thành đúng, nhấp vào nút burger sẽ làm các đường kẻ chuyển thành chữ “X” và hiện menu điều hướng.

Tự làm thử

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