Hamburger Menü Animasyonu

Gelişmiş bir mikro etkileşim (micro-interaction) deneyimi sunan, modern bir hamburger menü animasyonudur. Tıklandığında üst üste duran 3 çizgi pürüzsüz ve akıcı bir şekilde çarpı (‘X’) simgesine dönüşerek kullanıcıya anında sezgisel bir geri bildirim sağlar.

Uygulama Kodu

Bu etkileyici animasyon oldukça yalın bir HTML, CSS ve JavaScript yapısıyla çalışmaktadır.

<!-- HTML -->
<button class="hamburger-menu" aria-label="Menu" aria-expanded="false">
  <span class="line line-1"></span>
  <span class="line line-2"></span>
  <span class="line line-3"></span>
</button>

/* CSS */
.hamburger-menu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 48px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: transform 0.3s ease;
}

.hamburger-menu:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 6px;
  border-radius: 4px;
}

.hamburger-menu:hover {
  transform: scale(1.05);
}

.hamburger-menu .line {
  display: block;
  width: 100%;
  height: 4px;
  background-color: #1e293b;
  border-radius: 9999px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}

/* Aktif (Genişletilmiş) durum stili */
.hamburger-menu.active .line-1 {
  transform: translateY(14px) rotate(45deg);
  background-color: #ef4444;
}

.hamburger-menu.active .line-2 {
  opacity: 0;
  transform: translateX(-20px);
}

.hamburger-menu.active .line-3 {
  transform: translateY(-14px) rotate(-45deg);
  background-color: #ef4444;
}

// JavaScript
const hamburger = document.querySelector('.hamburger-menu');

hamburger.addEventListener('click', function() {
  // active sınıfının değiştirilmesi
  this.classList.toggle('active');
  
  // Erişilebilirlik (A11y) desteği (aria-expanded güncellemesi)
  const isExpanded = this.classList.contains('active');
  this.setAttribute('aria-expanded', isExpanded);
});

Özellikler ve Açıklama

Pürüzsüz Animasyon: Zamanlama için `cubic-bezier` (easing) fonksiyonu tercih edilmiş; böylece mekanik olmaktan uzak, son derece doğal ve akıcı bir hareket elde edilmiştir.
Erişilebilirlik (A11y): `aria-label ve \aria-expanded nitelikleri dinamik olarak güncellenerek ekran okuyucuların menü durumunu (açık/kapalı) doğru algılaması sağlanmıştır. Aynı zamanda klavye navigasyonunda odaklama (focus) durumunu netleştirmek için \:focus-visible` sözde sınıfından (pseudo-class) yararlanılmıştır.
Üstün Performans: Hareketli animasyonlarda yalnızca `transform ve \opacity` özellikleri kullanılarak tarayıcının yeniden hesaplama (reflow) ve yeniden boyama (repaint) maliyetleri en aza indirgenmiş, pürüzsüz bir performans garanti edilmiştir.