Modern Web Navigasyonu: Temel Yaklaşım

Hafif, erişilebilir ve hızlı mobil menü. Ağır JS kütüphaneleri yok. Saf CSS, semantik HTML, minimal DOM manipülasyonu. Başarılı bir dijital ajans işinde navigasyon kullanıcıyı yormaz, siteyi yavaşlatmaz.

Adım 1: Semantik HTML ve ARIA Altyapısı

Navigasyon <nav> etiketi içine kurulur. Ekran okuyucular için durum bildiren ARIA özellikleri şarttır.

<button aria-expanded="false">: Menü açık/kapalı durumu bildirir.
<nav aria-label="Mobil Menü">: Navigasyon amacını tanımlar.
aria-controls: Butonun hedeflediği menü ID değerini bağlar.

JS çökse bile semantik yapı okunabilir kalmalıdır.

Adım 2: Native CSS ile Açılır Menü Mantığı

Gereksiz JavaScript animasyonlarından kaçının. Donanım hızlandırmalı transform: translateX() ve opacity kullanın. Layout thrashing yaratmayın.

Dokunma alanları (Touch Target) minimum 48x48px olmalı.
Başparmak bölgesi (Thumb Zone) kurallarına göre menü tetikleyici veya alt bar konumlandırması yapılmalı.
Gereksiz height: auto animasyonlarından kaçınılmalı; performansı düşürür.

Adım 3: Minimal JavaScript ile Durum Yönetimi

Sadece tek bir sınıf (class) veya aria-expanded niteliği değiştirin. Stil müdahalesini CSS'e bırakın.

Buton tıklandığında: aria-expanded değerini tersine çevirin (true/false).
Menü açıkken arka plan kaydırmasını (scroll lock) önlemek için body üzerine kilit sınıfı verin.
Escape tuşu dinleyicisi ekleyin: Escape basıldığında menü kapansın.

Tasarım Trendleri ve Dijital Ajans İpuçları

Mobil UX tasarımında öne çıkan modern trendler:

Alt Menü Barları (Bottom Navigation): Tek elle kullanım kolaylığı.
Full-Screen Overlay: Odak kaybını önleyen sade tam ekran menüler.
Sub-menu Accordion: İç içe geçmiş menülerde native <details> ve <summary> kullanımı (Sıfır JS).