Menu dropdown

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

Menu dropdown adalah komponen UI yang menampilkan opsi tambahan saat diaktifkan. Menu ini umum digunakan dalam navigasi untuk mengatur konten tanpa memakan terlalu banyak ruang.

Pertama, mari kita buat struktur HTML untuk dropdown dasar:

<div class="dropdown">
  <button class="dropdown-toggle">Menu</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Sekarang, mari tambahkan JavaScript untuk mengubah visibilitas dropdown:

// Ambil tombol untuk membuka dan menutup menu dropdown
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Ambil menu dropdown
const dropdownMenu = document.querySelector('.dropdown-menu');

// Tambahkan event listener klik ke tombol untuk membuka dan menutup menu dropdown
dropdownToggle.addEventListener('click', function() {
  // Aktifkan atau nonaktifkan class 'show' pada menu dropdown
  dropdownMenu.classList.toggle('show');
});

Terakhir, tambahkan CSS dasar untuk menyembunyikan/menampilkan menu dropdown:

.dropdown-menu {
  display: none;
}

.dropdown-menu.show {
  display: block;
}

Saat kamu mengeklik tombol "Menu", menu dropdown akan muncul. Mengekliknya lagi akan menyembunyikan menu.

Tantangan

Mudah

Buat menu dropdown yang ditampilkan atau disembunyikan saat tombol diklik.

Langkah-langkah:

Dalam HTML:
- Tambahkan atribut onclick ke tombol yang memanggil fungsi bernama toggleDropdown saat diklik
Dalam JavaScript:
- Buat fungsi bernama toggleDropdown
- Di dalam fungsi, aktifkan atau nonaktifkan class "show" pada elemen dengan ID “myDropdown”

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Save the Forests</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Save the Forests</h1>
    <p>Even planting one or two trees makes a difference.</p>
  </header>

  <div class="dropdown">
    <button class="dropbtn">Learn More ▼</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Why forests matter</a>
      <a href="#">How to grow a tree</a>
      <a href="#">Community projects</a>
    </div>
  </div>

  <main>
    <section>
      <h2>Why Trees Are Important</h2>
      <p>
        Forests clean our air, give us oxygen, and are home to countless animals.  
        Each tree you plant helps fight climate change and supports life on Earth.
      </p>
    </section>
    <section>
      <h2> Start Small</h2>
      <p>
        Don’t wait for a big change. Start with just one or two trees in your yard or community.  
        Your small action inspires others!
      </p>
    </section>
  </main>

  <footer>
    <p> Together we can make the planet greener.</p>
  </footer>

  <script src="script.js"></script>
</body>
</html>