Mobil hamburger menü geçişi

Coddy'nin HTML Journey'sinin JavaScript Eylemde bölümünün bir parçası. Ders 13 / 27.

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

İlk olarak temel HTML yapısını oluşturun: 3 içeren bir düğme (burger simgesini oluşturmak üzere CSS'te çizgiler olarak stillendirilmiş) 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="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Şimdi burger menüsünü biçimlendirmek için bazı temel CSS kuralları 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;
}

/* Show the navigation when it doesn't have the hidden class */
nav:not(.hidden) {
  display: block;
}

Şimdi, menüyü değiştirmek için JavaScript ekleyin:

// Select the burger button and mobile navigation
const burgerBtn = document.getElementById('burger-btn');
const mobileNav = document.getElementById('mobile-nav');

// Add click event listener to the burger button
burgerBtn.addEventListener('click', function() {
  // Toggle the hidden class on the mobile navigation
  mobileNav.classList.toggle('hidden');
});

Hamburger düğmesine tıkladığınızda, gezinme menüsündeki hidden sınıfı açılıp kapatılarak menünün görünmesi veya kaybolması sağlanır.

Görev

Kolay

Burger düğmesinin olay dinleyicisinin içine iki satır kod ekleyin:

düğme üzerindeki "active" sınıfını değiştirin. Bu, üç çizgiyi bir “X” şekline dönüştürür.
menü üzerindeki "active" sınıfını değiştirin. Bu, gezinme menüsünün görünmesini ve kaybolmasını sağlar.

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>