Mobil Uyumlu Açılır Menü Tasarımı: Modern Web ve UX Rehberi

Mobil Navigasyon Mimarisi ve Temel İlkeler

Mobil ekranda gezinme zor. Yanlış menü kurgusu kullanıcıyı kaçırır. Başarılı bir modern web arayüzü, hafif DOM ve minimum JavaScript ile çalışır. Bu rehber, performans kaybı yaşamadan erişilebilir mobil navigasyon kurma adımlarını içerir.

1. Parmak Bölgesi (Thumb Zone) Uyumu

Kullanıcıların %75'i tek başparmakla etkileşime girer. Kritik butonlar ekranın alt 2/3'lük bölümünde durmalı. Menü tetikleyici (hamburger ikonu) sağ veya sol üstteyse, açılan liste içeriği başparmağın kolay ulaşacağı alt bölgelere hizalanmalı.

2. Dokunma Hedefi Boyutları

Küçük buton tıklama hatası üretir. W3C ve Google standartları gereği minimum dokunma hedefi boyutu:

• Minimum boyut: 48x48 CSS pikseli.
• Hedefler arası boşluk: En az 8px margin.
• İç dolgu: Yazı küçük olsa bile padding değeriyle tıklanabilir alanı geniş tut.

Adım Adım Mobil Açılır Menü Geliştirme

Adım 1: Anlamsal HTML ve ARIA Erişilebilirliği

Ekran okuyucular menü durumunu bilmeli. Doğru etiketleri kullan:

<nav aria-label="Ana Menü">
  <button id="menu-btn" aria-expanded="false" aria-controls="menu-list">Menü</button>
  <ul id="menu-list" class="mobile-menu" hidden>
    <li><a href="/">Anasayfa</a></li>
    <li><a href="/hizmetler">Hizmetler</a></li>
  </ul>
</nav>

Adım 2: Donanım Hızlandırmalı CSS Geçişleri

left, top, height gibi layout tetikleyen özelliklerle animasyon yapma. GPU kullanan transform ve opacity tercih et:

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 280px;
  height: 100vh;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.mobile-menu.active {
  transform: translateX(0);
}

Kural: Reflow tetikleyen animasyon mobil cihazda pil tüketir, kare atlatır (jank). Yalnızca composite katmanında çalışan CSS özelliklerini kullan.

Adım 3: Minimalist JS ile Durum Yönetimi

Büyük kütüphaneler ekleme. Native vanilla JS ile aria-expanded güncelle, body scroll kilidini aç/kapat:

const btn = document.getElementById('menu-btn');
const menu = document.getElementById('menu-list');

btn.addEventListener('click', () => {
  const isOpen = btn.getAttribute('aria-expanded') === 'true';
  btn.setAttribute('aria-expanded', !isOpen);
  menu.hidden = isOpen;
  document.body.style.overflow = isOpen ? '' : 'hidden';
});

Modern Web Trendleri ve Dijital Ajans Yaklaşımları

Önde gelen her dijital ajans, aşırı karmaşık mega-menüler yerine minimalist desenlere geçiyor. Güncel trendler şunları öne çıkarıyor:

• Native Popover API: JS olmadan tarayıcı yerel popover desteği kullanımı.
• Alt Navigasyon Çubuğu (Bottom Navigation Bar): Uygulama benzeri (app-like) tab bar kullanımı.
• Scroll-Driven Animasyonlar: Sayfa aşağı kaydırıldığında gizlenen, yukarı kaydırıldığında beliren dinamik başlıklar.
• Derinliksiz Menü Hiyerarşisi: En fazla 2 kademeli alt menü derinliği; daha fazlası arama odaklı navigasyona devredilmeli.