Mobil Navigasyon ve Modern Web Standartları

Küçük ekran, dar alan, yüksek dikkat dağınıklığı. Kötü menü kullanıcıyı kaçırır, hemen çıkma oranını artırır. Modern web geliştirmede navigasyon hafif, hızlı ve erişilebilir olmalı. Dijital ajans standartlarında mobil açılır menü mimarisi için temel adımlar:

Adım 1: Semantik Yapı ve Erişilebilirlik (a11y)

Div çorbası yok. Native HTML etiketleri şart. Ekran okuyucular ve arama motorları için <nav>, <button> ve liste elemanları kullan:

<nav aria-label='Ana Navigasyon'>: Menü konteyneri.
<button aria-expanded='false' aria-controls='menu-list'>: Menü tetikleyici buton. State JS ile güncellenir.
<ul id='menu-list'>: Link listesi. Gizleme/gösterme CSS ile kontrol edilir.

Adım 2: Native HTML ve Minimal CSS (Sıfır Fazla JS)

Ağır kütüphanelere gerek yok. Native <details> ve <summary> açılır alt menüler için JS gerektirmez. CSS transform ve transition ile GPU hızlandırması sağla:

Kural: Reflow ve Repaint maliyetini düşür. top/left yerine transform: translateX() kullan. CSS will-change: transform ekle.

Adım 3: Başparmak Alanı (Thumb Zone) ve Dokunmatik Hedefler

Kullanıcılar tek elle gezinir. Ekranın üst köşelerine erişim zordur. Trendler alt gezinme çubuklarını (bottom navigation bar) öne çıkarıyor.

Dokunma Hedefi: Minimum 48x48px tıklama alanı. CSS ile: min-height: 48px; display: flex; align-items: center;
Hover Tetikleyicilerini Bırak: Mobilde hover durumu belirsizdir. Tıklama/dokunma ile açılan akordeon menü kullan.
Boşluklar: Yanlış tıklamaları önlemek için menü öğeleri arasına en az 8px boşluk bırak.

Adım 4: Core Web Vitals ve Performans İyileştirmesi

Menü açıldığında sayfa düzeni kaymamalı (CLS). Menü açılış tepkisi anlık olmalı (INP):

CSS content-visibility: auto ile ekran dışı menü render yükünü azalt.
Menü açıldığında arkaplan kaymasını durdur: body { overflow: hidden; }.
Gereksiz animasyon gecikmelerini sil (maksimum 200-250ms CSS easing).

Dijital Ajans Kontrol Listesi

Canlıya almadan önce kontrol et:

Klavye odağı (Tab / Shift+Tab) açık menü içinde hapsoluyor mu (Focus Trap)?
Escape tuşu açık menüyü kapatıyor mu?
Büyük ekran boyutuna (Desktop breakpoint) geçişte mobil stiller temizleniyor mu?
Lighthouse Erişilebilirlik ve Performans puanı 95+ mı?