1. Navigasyon Mimarisi ve Dijital Strateji

Mobil kullanıcı parmak erişim alanına (thumb-zone) odaklanır. Kötü menü dönüşümü düşürür. Sağlam dijital strateji minimal hiyerarşi ve hızlı erişim gerektirir. 3 tıklama kuralı esastır: kullanıcı aradığı sayfaya en fazla 3 adımda ulaşmalıdır.

2. Modern Trendler: Hamburger Menü Ötesi

Bottom Navigation (Alt Bar): En kritik 4-5 rota ekran altına konur. Tek el kullanımı kolaylaşır.
Yatay Kaydırılabilir Sekmeler (Scrollable Tabs): E-ticaret kategori ağaçları için ideal çözüm. Hiyerarşik derinliği azaltır.
Native Popover / Dialog API: Harici JavaScript paketleri gereksiz. Tarayıcı native bileşenleri daha hızlıdır.

3. Adım Adım Açılır Menü Uygulaması

Adım 1: Anlamsal ve Erişilebilir HTML İskeleti

Native <nav> ve <details>/<summary> veya CSS odaklı yapı kullanın. JS bağımlılığı kalkar.

<nav aria-label="Ana Menü" class="site-nav">
  <details class="mobile-menu">
    <summary aria-haspopup="true">Menü</summary>
    <ul class="menu-list">
      <li><a href="/">Ana Sayfa</a></li>
      <li><a href="/trendler">Trendler</a></li>
      <li><a href="/rehber">Rehber</a></li>
    </ul>
  </details>
</nav>

Adım 2: CSS ile Responsive Davranış

Masaüstünde liste açık kalır; mobilde akordiyon mantığı çalışır.

@media (min-width: 768px) {
  .mobile-menu summary { display: none; }
  .mobile-menu[open] .menu-list, .mobile-menu .menu-list { display: flex; gap: 1rem; }
}
@media (max-width: 767px) {
  .mobile-menu .menu-list { display: flex; flex-direction: column; width: 100%; }
}

Adım 3: Dokunmatik Hedef Boyutları (Touch Targets)

Tıklanabilir her eleman minimum 48x48 piksel olmalıdır. Yanlış tıklamaları engellemek için menü öğeleri arasına en az 8px boşluk bırakın.

4. Performans ve Erişilebilirlik Kontrol Listesi

Klavye Gezinimi: Tab tuşu menü içinde sırayla odaklanmalıdır.
Aria Durumları: Menü açıldığında aria-expanded="true" değeri aktarılmalıdır.
Layout Shift (CLS): Menü açılışında içerik kayması olmamalıdır; fixed veya absolute katman tercih edilmelidir.
Zero-JS Önceliği: Temel navigasyon JS devre dışıyken de çalışmalıdır.

Başarılı mobil navigasyon az eleman, native kod ve sıfır gecikmeyle ölçülür.