Modern Web İçin Mobil Navigasyon Mimarisi

Kötü mobil menü kullanıcı kaybettirir. Ağır JavaScript kütüphaneleri yükleme süresini artırır. Native HTML ve CSS öncelikli mimari, hız ve erişilebilirlik sağlar. Bir dijital ajans standardında menü; hafif, dokunmatik hedef alanı geniş (minimum 48x48px) ve ekran okuyucu uyumlu olmalı.

Adım 1: Semantik HTML Yapısı

Menüyü <nav> ve liste elemanlarıyla kurun. Hamburger butonu için semantik <button> kullanın. ARIA durumlarını ekleyin.

Doğru semantik yapı olmadan erişilebilirlik sağlanamaz. aria-expanded ekran okuyuculara menü durumunu bildirir.

nav: Ana gezinme alanı sarmalayıcısı.
button: Açma/kapatma tetikleyicisi (type='button', aria-controls, aria-expanded).
ul / li: Navigasyon bağlantı listesi.

Adım 2: CSS ile Performans Odaklı Yerleşim

Gereksiz animasyonlardan kaçının. left veya top yerine donanım hızlandırmalı transform: translateX() tercih edin. Modern web trendleri arasında alt bar (bottom navigation) ve tam ekran açılır çekmece (drawer) öne çıkıyor.

Dokunma alanlarını başparmak erişim bölgesine (thumb zone) göre konumlandırın.
Açık durumda arkaplan kaymasını engellemek için overflow: hidden sınıfı tanımlayın.
Görünür odak stillerini (focus-visible) koruyun; klavye navigasyonunu bozmayın.

Adım 3: Minimal JavaScript ile Durum Kontrolü

Menü açma-kapama için minimum JS yeterli. 30 satırdan az kodla tam işlevsellik sağlayın.

Tıklamada aria-expanded değerini tersine çevirin.
Menü açıkken Escape tuşu basıldığında kapatın.
Dış alana tıklandığında menüyü kapatın (overlay click).

Mobil Navigasyonda Öne Çıkan Trendler

Kullanıcı alışkanlıkları ve ekran boyutları değiştikçe menü desenleri evrilir:

Alt Navigasyon Barları (Bottom Tabs): Büyük ekranlı telefonlarda tek elle kullanım kolaylığı.
Kademeli Açılır Menüler (Drill-down Menus): Çok seviyeli e-ticaret sitelerinde ekranı boğmayan akıcı geçişler.
Mikro Etkileşimler: Menü ikonunun net, karmaşık olmayan açılış animasyonları.

Sık Yapılan Hatalar ve Çözümleri

Küçük dokunma hedefleri: Linkler arasına boşluk bırakın, padding değerini artırın.
Z-index karmaşası: Navigasyon katmanını belirli bir z-index ölçeğinde sabitleyin.
Aşırı DOM derinliği: İç içe onlarca div kullanmayın; CSS grid ve flexbox kullanın.