🍔 Responsive Menüler: Hamburger’den Epik Açılır Menülere (Gelişmiş Sürüm)

Merhaba sevgili web kaşifi! 🕵️‍♀️💻
Bugün menülerden bahsedeceğiz… Ama sıradan menüler değil! Hem mobil hem masaüstünde harika görünen, hover ile açılan, animasyonlu, JS ile ekstra efektli epik menüler yaratacağız. ✨

Hazırsan, hamburger ikonun sadece aç-kapa düğmesi olmanın ötesine geçecek. 🍔➡️🎉

1️⃣ Hamburger Menünün Temeli 🍔

HTML Yapısı

Mobilin kurtarıcısı, minimalistin gözdesi: hamburger menü.
HTML ile temel yapı şöyle:

&lt;nav>
  &lt;div class="hamburger" id="hamburger">
    &amp;#9776; &lt;!-- Üç çizgi simgesi -->
  &lt;/div>
  &lt;ul class="menu" id="menu">
    &lt;li>&lt;a href="#">Ana Sayfa&lt;/a>&lt;/li>
    &lt;li>&lt;a href="#">Hakkımızda&lt;/a>&lt;/li>
    &lt;li>
      &lt;a href="#">Hizmetler&lt;/a>
      &lt;ul class="submenu">
        &lt;li>&lt;a href="#">Web Tasarım&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">SEO&lt;/a>&lt;/li>
        &lt;li>&lt;a href="#">Dijital Pazarlama&lt;/a>&lt;/li>
      &lt;/ul>
    &lt;/li>
    &lt;li>&lt;a href="#">İletişim&lt;/a>&lt;/li>
  &lt;/ul>
&lt;/nav>

💡 İpucu: Alt menüleri <ul class="submenu"> içinde gruplamak, hem HTML’i düzenli tutar hem CSS ile animasyon eklemeyi kolaylaştırır.

CSS ile İlk Stil 🎨

/* Genel Nav Stilleri */
nav {
  background-color: #222;
  color: white;
  padding: 10px 20px;
  position: relative;
  font-family: Arial, sans-serif;
}

/* Hamburger ikonu */
.hamburger {
  font-size: 30px;
  cursor: pointer;
  display: none; /* Masaüstünde gizle, mobilde göstereceğiz */
}

/* Menü stili */
.menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.menu li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s, transform 0.3s;
}

.menu li a:hover {
  color: #ff6347;
  transform: scale(1.1);
}

/* Alt menü gizleme */
.submenu {
  display: none;
  position: absolute;
  background-color: #444;
  list-style: none;
  padding: 10px 0;
  top: 100%;
  left: 0;
  border-radius: 5px;
  min-width: 180px;
}

.submenu li a {
  padding: 10px 20px;
  display: block;
}

/* Hover ile alt menü açma */
.menu li:hover .submenu {
  display: block;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobil duyarlılık */
@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    left: 0;
    background-color: #333;
    width: 100%;
    padding: 10px 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out;
  }
  .menu li {
    padding: 10px 20px;
  }
}

💡 İpucu: max-height ve transition ile mobil menü açılırken smooth animasyon elde edebilirsin.

2️⃣ Hamburger Menüye JS Efekti 🕹️

Artık menüyü tıkla aç-kapa yapacağız!

const hamburger = document.getElementById('hamburger');
const menu = document.getElementById('menu');

hamburger.addEventListener('click', () => {
  if(menu.style.maxHeight &amp;&amp; menu.style.maxHeight !== "0px"){
    menu.style.maxHeight = "0px";
  } else {
    menu.style.maxHeight = menu.scrollHeight + "px";
  }
});

💡 İpucu: scrollHeight ile menü içeriğine göre otomatik yükseklik ayarlanır. Böylece içerik eklesen de JS ile ekstra kod yazmana gerek kalmaz.

3️⃣ Animasyonlu Açılır Alt Menüler ✨

Hover ile açılan alt menüler, menüyü hem interaktif hem epik yapar.

.submenu {
  display: block; /* Hover JS yerine sadece CSS ile açabiliriz */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease-in-out;
}

.menu li:hover .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

💡 İpucu: Opacity + translate kombinasyonu, alt menünün yumuşak ve profesyonel görünmesini sağlar.

4️⃣ JS ile Ekstra Menü Efektleri 🎢

Animasyonlu aç-kapa: max-height ile yumuşak kaydırma
Alt menü açılırken delay: Kullanıcı hover yaparken mini delay ile efektli açılma

const submenuItems = document.querySelectorAll('.submenu li');

submenuItems.forEach((item, index) => {
  item.style.transitionDelay = `${index * 0.05}s`;
});

💡 Küçük gecikmeler (0.05s, 0.1s) menüyü daha canlı ve “profesyonel” gösterir.

5️⃣ Pratik İpuçları💖

Alt menü genişliğini sabitle: Menü karışmasın, responsive de olsun.
Renk ve hover kontrastını unutma: Mobilde dokunmatik ekranlarda hover yok, tıklama ile açılmalı.
JS ve CSS uyumu: CSS animasyon + JS aç-kapa en temiz çözüm.
İkon animasyonu ekle: Hamburger ikonu tıklandığında X simgesine dönüşebilir.

.hamburger.active::after {
  content: "✖";
  color: #ff6347;
}

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('active');
});

🎯 Bu küçük detay, kullanıcıya menünün açık mı kapalı mı olduğunu gösterir.

6️⃣ Özet ve Son Dokunuşlar 🎨

Hamburger menü mobilin dostu 🍔
Hover ve CSS ile alt menüler epik hale gelir ✨
JS ile aç-kapa ve animasyon efektleri eklenir 🕹️
Delay ve transition ile menü daha canlı olur 🌟
Responsive tasarım ile her cihazda mükemmel görünür 📱💻

🎉 İşte, hamburger menüden epik açılır menülere giden yol bu! Sayfan artık hem şık, hem eğlenceli, hem interaktif bir navigasyona sahip. 🍔➡️🎯