Açılır menüler

Coddy'nin HTML Journey'sinin JavaScript in Action bölümünün bir parçası — ders 15 / 27.

Açılır menüler, tetiklendiğinde ek seçenekleri ortaya çıkaran kullanıcı arayüzü (UI) bileşenleridir. Çok fazla yer kaplamadan içeriği düzenlemek için navigasyonda yaygın olarak kullanılırlar.

İlk olarak, temel bir açılır menü için HTML yapısını oluşturalım:

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

Şimdi, açılır menü görünürlüğünü değiştirmek için JavaScript'i ekleyelim:

// Açılır menü değiştirme düğmesini al
const dropdownToggle = document.querySelector('.dropdown-toggle');

// Açılır menüyü al
const dropdownMenu = document.querySelector('.dropdown-menu');

// Değiştirme düğmesine tıklama olayı dinleyicisi ekle
dropdownToggle.addEventListener('click', function() {
  // Açılır menüde 'show' sınıfını değiştir
  dropdownMenu.classList.toggle('show');
});

Son olarak, açılır menüyü gizlemek/göstermek için bazı temel CSS'ler ekleyin:

.dropdown-menu {
  display: none;
}

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

"Menü" düğmesine tıkladığınızda açılır menü görünecektir. Tekrar tıklamak menüyü gizleyecektir.

Görev

Kolay

Bir düğmeye tıklandığında gösterilen/gizlenen bir açılır menü (dropdown) oluşturun.

Adımlar:

HTML'de:
- Düğmeye, tıklandığında toggleDropdown adlı bir fonksiyonu çağıran bir onclick özniteliği ekleyin
JavaScript'te:
- toggleDropdown adında bir fonksiyon oluşturun
- Fonksiyonun içinde, "show" sınıfını ID'si “myDropdown” olan öğe üzerinde değiştirin (toggle)

Kendin dene

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