Modern Web Navigasyonunda Mobil Standartlar

Mobil navigasyon, kullanıcı deneyimi ve dönüşüm oranlarının merkezinde yer alır. Bir dijital ajans yaklaşımıyla; karmaşık menü yapıları yerine performanslı, erişilebilir ve başparmak dostu çözümler tercih edilmelidir. Bu rehber, modern web trendleri doğrultusunda mobil açılır menü inşasını adım adım açıklar.

Adım 1: Semantik HTML ve Erişilebilirlik (A11y) Altyapısı

Doğru menü yapısı semantik HTML etiketleri ve ARIA nitelikleri gerektirir. Ekran okuyucular menü durumunu (açık/kapalı) aria-expanded ile takip eder.

<nav role="navigation" aria-label="Ana Menü">
  <button id="menu-toggle" aria-expanded="false" aria-controls="menu-list" aria-label="Menüyü Aç">
    <span></span>
  </button>
  <ul id="menu-list" class="nav-list" hidden>
    <li><a href="/">Ana Sayfa</a></li>
    <li class="has-dropdown">
      <button aria-expanded="false" class="dropdown-btn">Hizmetler</button>
      <ul class="sub-menu" hidden>
        <li><a href="/tasarim">Tasarım</a></li>
        <li><a href="/yazilim">Yazılım</a></li>
      </ul>
    </li>
    <li><a href="/iletisim">İletişim</a></li>
  </ul>
</nav>

Adım 2: Modern CSS ile Düzen ve Animasyon

CSS katmanında ağır JavaScript animasyon kütüphaneleri yerine native CSS transform ve transition özellikleri kullanılır. Bu, 60 FPS akıcılık sağlar.

Kritik Tasarım Trendleri ve Ölçüler:

Dokunma Alanı (Touch Target): Butonlar ve linkler en az 48x48 piksel boyuta sahip olmalıdır.
Başparmak Bölgesi (Thumb Zone): Sık kullanılan menü öğeleri ekranın alt veya orta-alt bölümüne konumlandırılmalıdır.
Performans: Menü açılışında left/top yerine GPU hızlandırmalı transform: translateX() kullanılmalıdır.

.nav-list {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  background: #ffffff;
  transform: translateX(100%);
  transition: transform 0.25s ease-in-out;
}
.nav-list.is-active {
  transform: translateX(0);
}

Adım 3: Minimal JavaScript ile Etkileşim Yönetimi

JavaScript yalnızca durum (state) yönetimi, klavye odağı (focus trap) ve ARIA niteliklerini güncellemek için kullanılır. Gereksiz bağımlılıklar eklenmez.

const toggleBtn = document.getElementById('menu-toggle');
const menuList = document.getElementById('menu-list');

toggleBtn.addEventListener('click', () => {
  const isOpen = toggleBtn.getAttribute('aria-expanded') === 'true';
  toggleBtn.setAttribute('aria-expanded', !isOpen);
  menuList.classList.toggle('is-active', !isOpen);
  menuList.hidden = isOpen;
});

// ESC tuşu ile kapatma
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape' && toggleBtn.getAttribute('aria-expanded') === 'true') {
    toggleBtn.setAttribute('aria-expanded', 'false');
    menuList.classList.remove('is-active');
    menuList.hidden = true;
    toggleBtn.focus();
  }
});

Adım 4: Dijital Ajans Kalite Kontrolü ve Test

Geliştirme tamamlandıktan sonra aşağıdaki doğrulama listesi uygulanmalıdır:

Lighthouse Skoru: Erişilebilirlik ve En İyi Pratikler bölümleri 95+ olmalıdır.
Klavye Navigasyonu: Tab ve Shift+Tab ile tüm alt menülere girilip çıkılabilmelidir.
Body Scroll Lock: Menü açıkken arka plan kaydırması overflow: hidden ile kilitlenmelidir.

Önemli Kural: Modern web projelerinde CSS ile çözülebilen hiçbir durum için harici JavaScript kütüphaneleri (jQuery, ağır animasyon paketleri) yüklenmemelidir.