Modern Web İçin Mobil Navigasyon Standartları

Mobil trafik web kullanımının çoğunluğunu oluşturur. Yanlış tasarlanmış menü dönüşüm oranını düşürür. Profesyonel bir dijital ajans standardında navigasyon; hafif, erişilebilir ve başparmak dostu olmalıdır.

Öne Çıkan Tasarım Trendleri

Başparmak Bölgesi (Thumb Zone): Kritik butonlar tek elle erişim için alt veya sağ alt konuma yerleştirilir.
Tam Ekran Overlay: Karmaşık alt menüler yerine odağı toplayan temiz tam ekran katmanlar kullanılır.
Yerel Tarayıcı API'leri: Ağır JavaScript paketleri yerine native Popover ve Dialog API tercih edilir.
Minimum Derinlik: 2 seviyeden fazla iç içe menü yapısından kaçınılır.

Adım Adım: Erişilebilir Mobil Açılır Menü Yapımı

Adım 1: Semantik HTML ve ARIA Tanımları

Navigasyon <nav> etiketiyle sarmalanmalı, ekran okuyucu desteği için aria-expanded ve aria-controls öznitelikleri eklenmelidir.

<nav aria-label="Ana Navigasyon">
  <button id="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Menüyü Aç">
    Menü
  </button>
  <ul id="nav-menu" hidden>
    <li><a href="/">Ana Sayfa</a></li>
    <li><a href="/hizmetler">Hizmetler</a></li>
    <li><a href="/iletisim">İletişim</a></li>
  </ul>
</nav>

Adım 2: CSS ile Dokunmatik Alanları Optimize Edin

Tıklanabilir alanlar minimum 44x44 piksel boyutunda olmalıdır. Performans için animasyonlarda sadece transform ve opacity kullanılmalıdır.

#nav-menu {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 2rem;
}
#nav-menu[hidden] {
  display: none;
}
a, button {
  min-height: 44px;
  display: flex;
  align-items: center;
}

Adım 3: Minimal Durum Yönetimi

Harici kütüphane eklemeyin. Doğal JavaScript ile DOM özniteliklerini güncelleyin.

const btn = document.getElementById('nav-toggle');
const menu = document.getElementById('nav-menu');

btn.addEventListener('click', () => {
  const isOpen = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', String(!isOpen));
  menu.hidden = isOpen;
});

Kritik Hatalar ve Kaçınma Yolları

Küçük Tıklama Alanları: 44 piksel altı butonlar mobilde tıklama hatasına yol açar.
Erişilebilirlik Eksikliği: div etiketine click event bağlamak klavye ve ekran okuyucu erişimini bozar. Daima <button> kullanın.
Aşırı Yükleme: Menü animasyonları için harici script yüklemeyin. CSS geçişleri yeterlidir.

Yalın kod, yüksek mobil hız puanı ve sorunsuz kullanıcı deneyimi sağlar.