Mobil burger menü açma/kapama

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

Küçük ekranlarda, web siteleri tam navigasyonu göstermek yerine genellikle bir burger (☰) simgesi kullanır. Kullanıcı burger simgesine tıkladığında, JavaScript navigasyon menüsünün görünürlüğünü değiştirir.

İlk olarak, temel HTML yapısını oluşturun: 3 span içeren (burger simgesini oluşturmak için CSS'de çizgiler olarak stillendirilmiş) bir buton ve menü bağlantılarını içeren gizli bir <nav>.

<button id="burger-btn" class="burger-menu">
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
</button>

<nav id="mobile-nav" class="hidden">
  <ul>
    <li><a href="#">Ana Sayfa</a></li>
    <li><a href="#">Hakkımızda</a></li>
    <li><a href="#">Hizmetler</a></li>
    <li><a href="#">İletişim</a></li>
  </ul>
</nav>

Şimdi burger menüsünü stillendirmek için bazı temel CSS'ler ekleyelim:

.burger-menu {
  display: block;
  cursor: pointer;
  background: none;
  border: none;
  padding: 10px;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: #333;
}

.hidden {
  display: none;
}

/* Navigasyon hidden sınıfına sahip olmadığında göster */
nav:not(.hidden) {
  display: block;
}

Şimdi, menüyü açıp kapatmak için JavaScript ekleyin:

// Burger butonunu ve mobil navigasyonu seçin
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Burger butonuna tıklama olayı dinleyicisi ekleyin
burgerBtn.addEventListener('click', function() {
  // Mobil navigasyonda hidden sınıfını aç/kapat (toggle)
  mobileNav.classList.toggle('hidden');
});

Burger düğmesine tıkladığınızda, navigasyon menüsünde hidden sınıfı açılıp kapatılır ve bu da menünün görünmesini veya kaybolmasını sağlar.

Görev

Kolay

Burger butonu için olay dinleyicisinin (event listener) içine iki satır kod ekleyin:

button üzerinde "active" sınıfını değiştirin (toggle) — bu, üç çizgiyi bir “X” şekline dönüştürecektir.
menu üzerinde "active" sınıfını değiştirin (toggle) — bu, navigasyon menüsünün görünmesini ve kaybolmasını sağlayacaktır.

Kendin dene

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Minimalism Lifestyle</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Burger Butonu -->
  <div id="myButton" class="burger-btn">
    <div class="line"></div>
    <div class="line"></div>
    <div class="line"></div>
  </div>

  <!-- Navigasyon Menüsü -->
  <nav id="myMenu" class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Philosophy</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <!-- Ana İçerik -->
  <header class="hero">
    <h1>Minimalism</h1>
    <p>Less but better. Enjoy the essentials, remove the noise.</p>
    <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?auto=format&fit=crop&w=1200&q=80" alt="Minimalist interior">
  </header>

  <section class="content">
    <h2>The Essence of Minimalism</h2>
    <p>
      Minimalism is not about having less, but about making room for what truly matters. 
      It is about quality over quantity, clarity over clutter, and creating spaces that breathe. 
      Whether in design or lifestyle, minimalism helps us live with purpose and appreciation.
    </p>
  </section>

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