Navbar Responsif

Termasuk bagian JavaScript dalam Aksi dalam perjalanan HTML di Coddy. Pelajaran 26 dari 27.

Tantangan

Mudah

Kita sudah memiliki HTML dan CSS untuk menu burger dan navigasi di situs web kita tentang peradaban Maya.

Tugasmu adalah membuat JavaScript berfungsi agar menu terbuka dan tertutup saat tombol diklik.

Ikuti langkah-langkah berikut:

Buat variabel untuk menyimpan elemen tombol burger menggunakan getElementById("burger").
Buat variabel lain untuk menyimpan menu navigasi menggunakan getElementById("navMenu").
Tambahkan event listener pada tombol agar sebuah fungsi dijalankan saat tombol diklik.
Di dalam fungsi ini:
- Aktifkan atau nonaktifkan class "active" pada tombol. Ini akan menganimasikan 3 garis.
- Aktifkan atau nonaktifkan class "active" pada menu. Ini akan menampilkan atau menyembunyikan tautan.

Jika dilakukan dengan benar, mengeklik tombol burger akan menganimasikan garis-garis hingga membentuk “X” dan menampilkan menu navigasi.

Coba sendiri

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