M.AIM.AISoloLabsUI Sözlüğü · Gezinme

← UI Sözlüğü

Hamburger menü hamburger menu

bilinen diğer adları hamburger menu · üç çizgi · menü ikonu

Böyle diyorsan: "üç çizgili menü" · "mobildeki şu çizgiler" → bunun adı hamburger menü.

Mobilde menüyü açan üç yatay çizgi ikonu.

Hamburger, menüyü açan üç yatay çizgi ikonudur ve arayüz dünyasının en çok tartışılan parçalarından biridir. Tartışmanın sebebi şu: menüyü gizlemek yer kazandırır ama gizlenen şeyin kullanımı düşer — kullanıcı görmediği seçeneği aramaz. Bu yüzden mobilde makul olan karar, masaüstünde çoğu zaman gereksizdir. Teknik tarafta ise iki şey belirleyicidir: ikonun bir DÜĞME olması (div değil) ve açık/kapalı durumunun aria-expanded ile bildirilmesi. Bu ikisi olmadan ekran okuyucu kullanıcısı menünün açıldığını hiç öğrenmez; ikon yalnız bir çizim olarak kalır.

Kapsam: Bu madde menüyü açan TETİĞİ kapsar. Açılan panelin kendisi Kenar Menü, içindeki bağlantı yapısı ise Üst Çubuk maddesindedir. Eylem listeleyen küçük menüler için Açılır Menü'ye bak.

CANLI ÖRNEK — kullan, numaralara tıkla, parçayı tanı
markam
AnasayfaÜrünlerİletişim
Aşama aşama gezmek için okları ya da numaraları kullan.
YAPIM PROMPTU — AJANINA YAPIŞTIR
Mobil kırılımda navbar linklerini hamburgere topla: üç çizgi ikonu tıklanınca tam-ekran menü açılsın (arkadaki sayfa kaydırılamasın), ikon ✕'e dönüşsün, aria-expanded güncellensin; menüdeki bir linke tıklayınca menü KAPANSIN; ESC ve dışa tıklama da kapatsın; animasyon transform tabanlı olsun (takılmasın).
DEBUG PROMPTU — HUYSUZLANIRSA

Yapıştır, sonuna belirtiyi ekle — ajana klasik hata kalıplarını önden verir.

Hamburger menüm huysuz; klasikleri sırayla ele: (1) aria-expanded hiç değişmiyor — erişilebilirlik açısından menü hep kapalı görünüyor; (2) menü açıkken arka sayfa kaydırılabiliyor (scroll kilidi yok); (3) linke tıklayınca sayfa değişiyor ama menü AÇIK kalıyor; (4) ikon ✕'e dönüşmüyor, kullanıcı nasıl kapatacağını bilmiyor; (5) animasyon top/height ile yapılmış, telefonda teklıyor (transform kullanılmalı); (6) menü z-index'te navbar'ın altında kalıyor. Belirti şu:
ANATOMİ — HER PARÇANIN ADI VAR (tıkla ya da üzerine gel → örnekte yansın)
  • 1Üç çizgi ikonuaria-expanded

    Menünün kapalı hâldeki yüzü; duruma göre aria-expanded true/false taşır — ekran okuyucu menünün açık olduğunu buradan bilir.

  • 2Menü panelidrawer / fullscreen

    Tıklayınca inen/kayan liste; mobilde çoğu zaman tam ekran olur, arkadaki sayfa kaydırılamaz.

  • 3Kapatma (✕ dönüşümü)animasyon

    Üç çizginin ✕'e dönüşmesi: 'aynı düğme artık kapatır' sinyali. Ek olarak ESC ve dışa tıklama da kapatmalı.

  • 4Marka çıpasılogo

    Menü kapalıyken bile solda kalan kimlik; tıklayınca ana sayfa.

DURUMLAR — HANGİ HÂLDE NE OLUR
  • AKapalıaria-expanded="false"

    Menü gizli. İkonun tek başına anlaşılır olduğu varsayılır ama 'Menü' yazısı eklemek kullanımı ölçülebilir biçimde artırır.

  • BAçıkaria-expanded="true"

    Panel görünür. İkon çoğu zaman ✕'e döner; bu dönüşüm durumu görsel olarak anlatır ama aria-expanded'ın yerine geçmez.

  • CPanel odaklıodak panele taşınır

    Açılınca odak panelin içine gider ve arka plan inert yapılır; yoksa klavye kullanıcısı görünmeyen bağlantılar arasında dolaşır.

  • DKapanıyorEscape / dışına tık

    İki yol da beklenir. Kapanınca odak hamburger düğmesine GERİ döner.

  • EMasaüstügizlenir

    Geniş ekranda menü açıkta durur, hamburger kaybolur. Yer varken menüyü gizlemek, kullanımı sebepsiz düşürür.

KODDAKİ ADLARI
ARIAaria-expanded + aria-controlsikon-panel bağı
CSStransform: translateX/Ytakılmayan açılış animasyonu
HTML<dialog> / inertarka planı kilitleme yolları
ERİŞİLEBİLİRLİK & SIK HATA
  • Gerçek bir <button> kullan. Div ile yapılmış hamburger klavyeyle çalışmaz ve ekran okuyucuda düğme olarak duyurulmaz.
  • aria-expanded ile durumu bildir ve aria-controls ile açtığı paneli işaret et; ikonun ✕'e dönmesi görsel bir ipucudur, programatik bilgi değildir.
  • Düğmenin erişilebilir adı olsun ('Menüyü aç'); üç çizgiden oluşan bir ikonun kendi başına adı yoktur.
  • Panel açıkken arka planı inert yap; aksi hâlde Tab tuşu görünmeyen bağlantılar arasında gezinir ve kullanıcı nerede olduğunu kaybeder.
  • Kapanınca odağı hamburger düğmesine geri döndür — kip pencerede olduğu gibi, bu en sık atlanan kuraldır.
SIK KARIŞTIRILANLAR

Kenar menüden farkı. Hamburger TETİKTİR, kenar menü açılan PANELDİR. İkisi bir arada çalışır ama aynı şey değildir: hamburger olmadan da açık duran bir kenar menü olabilir (masaüstünde yaygındır), kenar menü olmadan hamburger bir şeye yaramaz. Karıştırıldığında ortaya masaüstünde de gizlenen, hep tıklama isteyen bir menü çıkar.

Kenar menü sayfasına git →

Açılır menüden farkı. Hamburger sayfanın ANA gezinmesini açar; açılır menü ise belirli bir öğeye ait eylemleri listeler (Düzenle, Sil). Biri 'nereye gidebilirim', diğeri 'bununla ne yapabilirim' sorusuna cevap verir. Ana gezinmeyi bir eylem menüsü gibi sunmak, kullanıcının site yapısını hiç görememesine yol açar.

Açılır menü sayfasına git →

KAYNAKLAR
İLGİLİ PARÇALAR

Kenar menü sidebarÜst çubuk navbar / headerAçılır menü dropdownKip pencere modal / dialog

AYNI AİLEDE · GEZINME