Bir e-ticaret sitesinde 200'den fazla ürün kategorisi var. Kullanıcı aradığı ürüne 3 tıklamayla ulaşamıyor, menüde kaybolup çıkıyor. Bounce rate %68'e çıkmış. Sorun navigasyon mimarisi: klasik dropdown menü bu yükü taşıyamıyor.

Mega menü, çok sayıda bağlantıyı hiyerarşik ve görsel olarak organize eden, genellikle çok sütunlu yapıda açılan geniş bir navigasyon paneli. Standart dropdown'dan farkı, yalnızca liste göstermek yerine içerik grupları, görseller, açıklamalar ve hatta arama kutusu gibi ek bileşenler barındırabilmesi.

Mega menünün ne zaman gerekli olduğunu, nasıl tasarlanacağını, hangi durumlarda ters etki üretebileceğini göreceğiz. Erişilebilirlik, mobil davranış, performans ve SEO etkilerini de inceleyeceğiz.

Mega Menü Ne Zaman Gerekli?

Her sitede kullanılacak bir çözüm değil. İçerik hacmi 50 sayfayı geçtiğinde klasik dropdown kullanıcıyı 4-5 seviye derinliğe iter. Fare kontrolü kaybolunca tüm yol başa döner. Mega menü tüm seçenekleri tek panelde gösterir, bu sorunu düzleştirir.

E-ticaret, haber siteleri, kurumsal portaller gibi farklı içerik tiplerinin bir arada olduğu yapılarda kullanıcı hangi kategoriye bakacağını bilmeyebilir. Görsel ipuçları ve açıklamalar bu belirsizliği azaltır. Bir moda sitesinde "Kadın" kategorisi altında hem ürün grupları (elbise, ayakkabı) hem de içerik tipleri (lookbook, kampanyalar) görünebilir.

Landing page veya kampanya sayfalarında dikkat dağıtır. Kullanıcı hızlı karar vermeli, geniş menü seçenek fazlalığı yaratır. Oysa ana sayfada veya kategori sayfalarında keşif davranışını destekler.

Sayısal eşik: 30'dan az bağlantı varsa klasik menü yeterli. 30-100 arası değerlendirilebilir. 100'den fazla bağlantıda neredeyse zorunlu. Bu eşikler sayfa tipine ve kullanıcı davranışına göre değişir.

Temel Mimari Kararlar

İlk karar: tetikleme yöntemi. Hover hızlı ama yanlışlıkla açılma riski taşır. Mobilde çalışmaz, click davranışı da desteklenmeli. Hibrit yaklaşım: masaüstünde hover, mobilde click.

Açılma yönü ve boyut: tam genişlik (full-width) daha fazla alan sağlar ama küçük ekranlarda boşluk israfı yaratır. İçerik genişliği (container-width) dengeli görünür ama çok sütunlu yapıda sıkışabilir.

Sütun sayısı: 2-6 arası yaygın. 2 sütun basit kategoriler için yeterli. 4-6 sütun e-ticaret gibi yoğun içerikler için uygun. 6'dan fazla göz taramasını zorlaştırır. Her sütunda 5-10 bağlantı ideal; daha fazlası dikey kaydırma gerektirir, bu mega menü mantığına ters.

Görsel kullanımı dikkat çeker ama yükleme süresini artırır. Lazy loading veya düşük çözünürlüklü placeholder ile başlanmalı. Yalnızca kategori tanıtımı veya kampanya vurgusu için kullanın; her bağlantıya görsel eklemek gereksiz yük.

HTML ve CSS Yapısı

Mega menü semantik HTML ile kurulmalı. Temel yapı: <nav> içinde <ul> listesi, her üst kategori bir <li>, mega panel ise iç içe <div> veya <ul> yapısı. ARIA etiketleri eklenmelidir: aria-haspopup="true", aria-expanded="false", role="menu".

CSS ile mega panel gizlenir (display: none veya opacity: 0). Hover veya click ile display: block yapılır. Ancak display: none kullanımı animasyonu engeller. Daha iyi yöntem: visibility: hidden + opacity: 0 kombinasyonu, açılırken visibility: visible + opacity: 1 geçişi. Bu şekilde CSS transition ile yumuşak açılma sağlanır.

Pozisyonlama için position: absolute kullanılır. Mega panel, üst menü öğesine göre değil, <nav> veya <body>'ye göre konumlandırılmalı. Aksi halde sütun genişlikleri ve hizalama sorunları çıkar. Z-index değeri header'dan yüksek, modal'dan düşük olmalı (genellikle 100-500 arası).

Responsive davranış için media query kullanılır. 768px altında mega menü genellikle hamburger menüye dönüşür. Mobilde mega panel tam ekran veya drawer (yan panel) olarak açılır. Sütunlar dikey sıralanır. Bu durumda accordion yapısı daha uygun olabilir: her kategori başlığı tıklanınca alt bağlantılar açılır.

<nav class="main-nav" role="navigation">
  <ul class="nav-list">
    <li class="nav-item has-mega">
      <a href="#" aria-haspopup="true" aria-expanded="false">Kategoriler</a>
      <div class="mega-panel" role="menu">
        <div class="mega-column">
          <h3>Giyim</h3>
          <ul>
            <li><a href="/elbise">Elbise</a></li>
            <li><a href="/pantolon">Pantolon</a></li>
          </ul>
        </div>
        <div class="mega-column">
          <h3>Aksesuar</h3>
          <ul>
            <li><a href="/canta">Çanta</a></li>
            <li><a href="/ayakkabi">Ayakkabı</a></li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</nav>

Bu yapı hem ekran okuyucular hem de klavye navigasyonu için uygun. JavaScript ile aria-expanded değeri dinamik güncellenir. Escape tuşu ile menü kapatılır, Tab tuşu ile bağlantılar arasında gezilir.

JavaScript Davranışı ve Performans

CSS-only çözüm mümkün ama kullanılabilirlik için JavaScript gerekli. Temel davranışlar: hover delay (300-500ms), click toggle, dışarı tıklama ile kapatma, Escape tuşu, klavye navigasyonu.

Hover delay kritik. 300ms gecikme kasıtlı hover'ı tespit eder, yanlışlıkla açılmayı önler. Çok uzunsa kullanıcı menünün çalışmadığını düşünür. A/B testlerle optimal değer bulun.

En büyük performans riski: DOM boyutu. Açıldığında yüzlerce bağlantı render edilir. Menü her sayfada yükleniyorsa HTML boyutu şişer. Lazy rendering: menü ilk açılışta boş, JavaScript ile içerik yüklenir. Ya da server-side rendering ile HTML'e gömülür ama CSS ile gizlenir, SEO korunur.

Reflow ve repaint riski: panel açılırken layout değişir, tarayıcı yeniden hesaplama yapar. 16ms'den uzun sürerse animasyon takılır (60 FPS için her frame 16ms). transform ve opacity GPU'da çalışır, layout'u tetiklemez.

Event listener sayısı bellek tüketir. Event delegation: üst <nav> elementine tek listener, event.target ile hangi öğeye tıklandığı tespit edilir.

Erişilebilirlik Gereksinimleri

Yanlış uygulandığında klavye kullanıcıları ve ekran okuyucu kullanıcıları içeriğe erişemez. WCAG 2.1 AA: tüm işlevler klavye ile erişilebilir, focus görünür, ARIA etiketleri doğru.

Tab ile menü öğeleri arasında gezilir. Enter veya Space ile panel açılır. Arrow tuşları ile panel içinde gezilir. Escape ile kapanır. Focus açık panelin dışına çıktığında panel otomatik kapanmalı - focusout event'i ile kontrol edilir.

aria-haspopup="true" menü öğesinin alt panel içerdiğini belirtir. aria-expanded="false" panelin kapalı olduğunu gösterir, açıldığında true. role="menu" ve role="menuitem" semantik anlam katar. Bu roller klavye davranışı da gerektirir; yalnızca ARIA eklemek yetmez.

Panel açıldığında focus ilk bağlantıya taşınmalı mı? Tartışmalı. Bazıları bekler, bazıları rahatsız olur. Daha güvenli: focus tetikleyici öğede kalır, kullanıcı Tab ile panele girer. Panel kapandığında focus tetikleyiciye geri döner.

NVDA, JAWS veya VoiceOver ile test edin. Menü yapısını doğru okuyor mu? Bağlantı sayısını bildiriyor mu? Açık/kapalı durumu anlaşılıyor mu? Manuel test gerekli, otomatik araçlar yeterli değil.

WCAG AA: metin-arka plan kontrastı minimum 4.5:1. Hover ve focus durumlarında da korunmalı. Yalnızca renk ile bilgi vermeyin; aktif kategori hem renkle hem alt çizgi ile gösterilmeli.

Mobil Davranış ve Dokunmatik Etkileşim

Hover yok, her şey dokunmatik. Tam genişlik panel küçük ekranda sıkışır. Hamburger menü + drawer veya accordion. Hamburger ikonu sağ üstte, tıklanınca yan veya alttan panel açılır.

Drawer: menü soldan veya sağdan kayarak açılır, tam ekranı kaplar. Kategoriler listelenir, her kategori tıklanınca alt bağlantılar accordion gibi açılır. iOS ve Android native uygulamalara benzer.

Accordion: kategoriler dikey listelenir, her başlık tıklanınca alt bağlantılar genişler. Exclusive (diğerleri kapanır) temiz görünür ama kullanıcı iki kategoriyi karşılaştıramaz. Inclusive (açık kalır) esnek ama uzun liste oluşturur.

Dokunmatik hedef: WCAG 2.1'e göre minimum 44x44 piksel. Bağlantılar arası boşluk en az 8px. Yoksa yanlış bağlantıya dokunur. Yaşlı kullanıcılar ve motor beceri sorunu olanlar için kritik.

Panel içinde dikey kaydırma gerekiyorsa body kaydırmasını engelleyin. Yoksa menüde kaydırırken sayfa da kayar. body { overflow: hidden } ekleyin, menü kapanınca kaldırın. Scroll pozisyonunu sıfırlayabilir, dikkatli uygulayın.

Ne Zaman Ters Etki Üretir?

20 sayfalık bir blog için abartı. Klasik menü daha hızlı yüklenir, daha az kod gerektirir, bakımı kolay.

Landing page'de dikkat dağıtır. Kullanıcı tek hedefe (form doldurmak, ürün satın almak) yönlendiriliyorsa geniş menü seçenek fazlalığı yaratır. A/B testler gösteriyor: landing page'de menü kaldırıldığında dönüşüm %10-30 artabiliyor.

Performans hassas sayfalarda yük bindirir. İlk yükleme sırasında 50-100 KB HTML ve CSS ekler. Mobil 3G bağlantıda 1-2 saniye gecikme. LCP metriği bozulur. Menü above-the-fold'daysa daha kritik. Defer etmek veya critical CSS ile yalnızca görünen kısmı yüklemek gerekir.

SEO çift etkili. Tüm önemli sayfalar header'da linkleniyor, internal linking güçlenir. Ama yüzlerce link header'da olunca sayfa içi linklerin değeri azalır. Google ilk birkaç linke daha fazla ağırlık verir. 100 link varsa asıl içerikteki linkler gölgede kalır.

Aşırı seçenek felç eder. Hick's Law: seçenek sayısı arttıkça karar süresi uzar. 50 kategori kullanıcıyı bunaltır. En popüler 10-15 kategori mega menüde, geri kalanı "Tümünü Gör" linki ile ayrı sayfada.

Sayfa Tipine Göre Strateji

Ana sayfada en değerli. Kullanıcı siteyi keşfediyor, nereye gideceğini bilmiyor. Harita görevi görür. Hero section'ın üstünde durmamalı; scroll sonrası sticky header'a geçildiğinde basitleştirilmeli (sadece üst kategoriler).

Kategori sayfalarında ikincil öncelikte. Kullanıcı zaten bir kategoride, yan navigasyon veya breadcrumb daha kullanışlı. Varsa mevcut kategori vurgulanmalı, ilgili alt kategoriler öne çıkarılmalı.

Ürün sayfalarında minimal. Kullanıcı ürüne odaklanmış, menü dikkat dağıtmamalı. Sticky header küçültülmeli, click ile açılmalı (hover değil). Bazı siteler ürün sayfasında menüyü tamamen gizliyor, sadece logo ve sepet ikonu bırakıyor.

Blog sayfalarında içerik keşfine yardımcı. Kategoriler, etiketler, popüler yazılar gösterilebilir. Okuma deneyimini bozmamalı; scroll sonrası kaybolmalı veya minimize edilmeli.

Arama sonuç sayfalarında gereksiz. Kullanıcı zaten arama yaptı, menüde gezinmeyecek. Basit header yeterli. Yüklenirse sayfa performansını düşürür.

Test ve Doğrulama

Canlıya alınmadan önce test edin. Tarayıcı uyumluluğu: Chrome, Firefox, Safari, Edge'de çalışıyor mu? Eski tarayıcılarda fallback var mı? Polyfill gerekiyor mu?

Cihaz çeşitliliği: iPhone, Android, tablet, masaüstü. Farklı ekran boyutları (320px, 768px, 1024px, 1920px). Dokunmatik ve fare davranışı. Yatay ve dikey oryantasyon.

Performans: Lighthouse ile LCP, FID, CLS. Menü açılırken layout shift var mı? JavaScript yükleme süresi? Render-blocking kaynak? WebPageTest ile 3G bağlantıda test.

Erişilebilirlik: axe DevTools veya WAVE ile otomatik tarama. Sonra manuel: klavye ile gezinme, ekran okuyucu ile okuma, zoom ile büyütme (%200 zoom'da kullanılabilir mi?).

Kullanıcı davranışı: Heatmap ve session recording (Hotjar, Clarity). Menüyü kullanıyor mu? Hangi kategorilere tıklıyorlar? Menüde kaybolup çıkıyorlar mı? Bounce rate değişti mi?

A/B test: mega menü vs klasik menü. Dönüşüm oranı, sayfa başına görüntüleme, site içi arama kullanımı, çıkış oranı. En az 2 hafta, %95 güven aralığı. Segmentasyon: yeni vs dönen kullanıcı, mobil vs masaüstü.

Bakım ve Güncelleme

İçerik değiştikçe güncellenmeli. Yeni kategori eklendiğinde yapı bozulmamalı. Silinen sayfa kırık link olmamalı. CMS veya veritabanından beslensin.

Server-side rendering (SSR): her sayfa yüklendiğinde menü HTML'e gömülür, SEO dostu, hızlı ilk yükleme. Client-side rendering (CSR): JavaScript ile yüklenir, esnek, cache'lenebilir, ama SEO riski var.

Menü yapısı değiştiğinde eski tarayıcı cache'i sorun çıkarır. CSS ve JS dosyalarına versiyon numarası ekleyin (style.css?v=1.2.3). Ya da build sırasında dosya adına hash (style.a3f2b1.css).

Menü yapısı, CSS sınıfları, JavaScript API dokümante edin. Yeni geliştirici ekibe katıldığında menüyü nasıl güncelleyeceğini bilmeli. Hangi sınıf ne işe yarıyor? Hangi ARIA etiketi neden var?

Her deploy sonrası Lighthouse skoru kontrol edin. LCP 2.5 saniyeden 3 saniyeye çıktıysa menüde sorun var. Real User Monitoring (RUM) ile canlı kullanıcı verileri izleyin.

Yaygın Hatalar ve Çözümleri

Hover delay yok: fareyi menü üzerinden geçirirken sürekli panel açılıp kapanıyor. 300ms setTimeout ekleyin. Fare menüden ayrılırken de delay olmalı, yoksa kullanıcı panele geçerken menü kapanır.

Mobilde hover davranışı kalmış: dokunmatik cihazda çalışmaz. @media (hover: none) ile hover'ı devre dışı bırakın, click davranışı ekleyin.

Z-index çatışması: panel modal veya notification altında kalıyor. Hiyerarşi belirleyin - header: 100, mega menü: 200, modal: 1000. CSS değişkeni (--z-header: 100) tutarlılık sağlar.

Focus trap yok: klavye kullanıcısı Tab ile menüden çıkıyor, arka plandaki linklere gidiyor. Menü açıkken Tab tuşu sadece menü içinde dolaşmalı. Son linkten sonra ilk linke dönmeli.

Scroll lock yok: mobilde menü açıkken arka plan kaydırılabiliyor. body { overflow: hidden } ekleyin. Scroll pozisyonunu korumak için position: fixed + top değeri hesaplayın.

200 link var, kullanıcı bunalıyor. En önemli 20-30 link mega menüde, geri kalanı "Tüm Kategoriler" sayfasında. Ya da arama kutusu ekleyin.

Her kategoride büyük görsel, menü 2 MB. Görselleri optimize edin (WebP, 50-100 KB), lazy loading, düşük çözünürlüklü placeholder. Ya da ikonlar kullanın.

Alternatif Yaklaşımlar

Tek çözüm değil. Alternatifler: klasik dropdown, sidebar navigasyon, breadcrumb + yan menü, arama odaklı navigasyon, tab navigasyon.

Klasik dropdown: 30'dan az link varsa yeterli. Daha basit, daha hızlı, daha az kod. Çok seviyeli dropdown (nested) kullanıcı deneyimini bozar. 3 seviyeden fazla gitmeyin.

Sidebar: dashboard ve admin panellerde yaygın. Sol tarafta sabit menü, sağda içerik. Geniş ekranlarda iyi ama mobilde yer kaplar. Collapsible sidebar (daraltılabilir) çözüm olabilir.

Breadcrumb + yan menü: içerik yoğun sitelerde etkili. Üstte breadcrumb konumu gösterir, yanda ilgili sayfalar listelenir. Kullanıcı hem nerede olduğunu bilir hem ilgili içeriği keşfeder.

Arama odaklı: kullanıcı ne istediğini biliyorsa en hızlı yol. Dokümantasyon, e-ticaret sitelerinde. Arama kutusu header'da prominent, autocomplete desteklemeli.

Tab: az sayıda üst kategori varsa (3-7) daha temiz. Her tab tıklanınca içerik değişir. SPA davranışı gerektirir, SEO için dikkatli kurgulanmalı.

Gerçek Dünya Örnekleri

Amazon: mega menü kullanıyor ama minimal. "Tümü" kategorisine tıklanınca sol taraftan drawer açılıyor, kategoriler listeleniyor. Her kategori tıklanınca alt kategoriler genişliyor. Görseller yok, sadece metin. Hızlı yükleniyor, mobilde de aynı davranış.

Apple: mega menü yok. Üstte 5-6 ana kategori (Mac, iPad, iPhone, Watch, AirPods), her biri tıklanınca tam ekran overlay açılıyor. İçeride büyük görseller, ürün modelleri, kampanyalar. Daha çok landing page gibi. Performans öncelikli, görseller lazy loading.

BBC: haber sitesi, çok kategori var. Mega menü hover ile açılıyor, 4 sütun. Sol tarafta ana kategoriler (News, Sport, Weather), sağda alt kategoriler ve popüler haberler. Görseller küçük, thumbnail boyutunda. Mobilde hamburger menü + accordion.

Zalando: e-ticaret, yüzlerce kategori. Mega menü hover ile açılıyor, 5-6 sütun. Sol tarafta cinsiyet seçimi (Kadın, Erkek, Çocuk), ortada ürün kategorileri, sağda kampanyalar ve görseller. Mobilde tam ekran drawer, kategoriler accordion. Performans için görseller WebP, lazy loading.

GitHub: dokümantasyon sitesi, mega menü yok. Üstte basit menü (Product, Solutions, Open Source, Pricing), her biri tıklanınca küçük dropdown. İçeride 5-10 link, görseller yok. Hızlı, minimal, odak içerikte. Arama kutusu prominent, kullanıcı repo adı yazarak buluyor.

Hangi Araçlar ve Kütüphaneler Kullanılabilir?

Hazır kütüphaneler kullanılabilir. Kütüphane boyutu, bağımlılıklar, özelleştirme esnekliği değerlendirin.

Headless UI (React, Vue): erişilebilirlik odaklı, ARIA etiketleri hazır, klavye navigasyonu built-in. Stil yok, Tailwind CSS ile kullanılır. Hafif (10-20 KB), tree-shakeable. Menu ve Popover bileşenleri.

Radix UI (React): erişilebilirlik öncelikli. NavigationMenu bileşeni uygun. Animasyon desteği var, Framer Motion ile entegre. Dokümantasyon detaylı.

Bootstrap: navbar ve dropdown bileşenleri var ama mega menü built-in değil, custom CSS gerekir. Ağır (50-100 KB), tüm framework yüklenmeli. Küçük projeler için overkill.

Vanilla JavaScript: 100-200 satır kod yeterli. Event listener, class toggle, ARIA güncelleme. Performans en iyi, bağımlılık yok. Erişilebilirlik ve edge case'ler manuel halledilmeli.

CSS-only: :hover ve :focus-within pseudo-class'ları. Hafif, hızlı, ama klavye navigasyonu sınırlı. Escape tuşu, dışarı tıklama yok. Basit siteler için uygun.

Sonraki Adımlar

Tek seferlik iş değil. Canlıya aldıktan sonra izleyin, kullanıcı geri bildirimine göre iyileştirin. Hangi kategoriler tıklanıyor? Hangileri hiç kullanılmıyor? Menü açılma oranı ne? Menüden gelen dönüşüm ne?

Google Analytics veya benzeri araçla menü tıklamaları izleyin. Event tracking: category: "Mega Menu", action: "Click", label: "Kadın > Elbise". Bu verilerle hangi kategorilerin öne çıkarılacağı, hangilerin kaldırılacağı belirlenir.

İlk versiyonda mükemmel olmak zorunda değil. Basit başlayın, kullanıcı davranışına göre geliştirin. Belki ilk versiyonda görseller yok, sonra popüler kategorilere görsel eklersiniz. Belki ilk versiyonda 4 sütun, sonra 6 sütuna çıkarırsınız.

Diğer navigasyon bileşenleriyle entegrasyon: tek başına yeterli değil. Breadcrumb, sidebar, footer menü, site haritası birlikte çalışmalı. Kullanıcı her durumda nerede olduğunu bilmeli, istediği yere ulaşabilmeli.