CSS Açılır Menüler
Navigasyon çubukları bağlantıları bir satıra dizerdi. Açılır menü, tetikleyicinin altında açılan iç içe bir panel ekler — genelde hover ile, daha iyisi klavye odağı içeri girdiğinde de. Dev mega menüler icat etmeden önce sakin bir CSS kalıbını ustalaşın.
Açılır menü araç seti
📊 Açılır menülere bakış
| Parça | Günlük iş |
|---|---|
| Relative tetikleyici | Üst li (veya sarmalayıcı) konumlandırma çapası olur |
| Absolute panel | İç içe menü tetikleyicinin altında oturur (top: 100%) |
| Varsayılan gizli | Açılana kadar display: none veya ekran dışı |
:hover açma |
İşaretçi paneli açar |
:focus-within |
Klavye kullanıcıları sekmelerken paneli açabilir/açık tutabilir |
z-index |
Açık paneli sonraki sayfa içeriğinin üstünde tutar |
Yalnızca CSS açılır menüleri öğretim klasiğidir. Gerçek ürünler sıkça dokunmada tıkla-aç/kapat, Escape ile kapatma ve daha zengin erişilebilirlik için JS ekler — önce burada CSS iskeletini öğrenin.
Relative tetikleyici, iç içe liste
Tetikleyici bağlantıyı üst çubukta tutun ve alt menü için ikinci bir liste iç içe yerleştirin. Üst öğe konumlandırılmış olmalı ki absolute çocuklar evlerini bilsin.
.nav > li {
position: relative;
}
.nav > li > a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Tetikleyicinin altında absolute panel
Alt menüyü position: absolute ile yerleştirin, tetikleyicinin altına sabitleyin ve sayfa metni sızmasın diye katı arka plan verin.
.nav .submenu {
position: absolute;
top: 100%;
left: 0;
min-width: 12rem;
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: #fff;
border: 1px solid #e5e5e5;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}
Açılana kadar gizle
Paneli varsayılan kapalı bırakın. Her şeyi birden açmak açılır menünün anlamını bozar.
.nav .submenu {
display: none;
}
Hover ile göster
İşaretçi üst öğenin üzerindeyken paneli gösterin. Tetikleyicideki padding kenarda istemeden kapanmayı azaltır.
.nav > li:hover > .submenu {
display: block;
}
focus-within’i de tercih edin
Yalnız hover klavye kullanıcılarını bırakır. :focus-within odak öğenin içindeyken paneli açık tutar — sakin bir CSS yükseltmesi.
.nav > li:hover > .submenu,
.nav > li:focus-within > .submenu {
display: block;
}
Sakin bir açılır menü alışkanlığı
Relative üst, absolute panel, varsayılan gizli, hover + focus-within, mütevazı z-index. Tıkla-aç mega menüleri ve karmaşık ARIA’yı daha zengin kalıplara bırakın — bunu düz Navigasyon Çubukları dersiyle karıştırmayın.
.nav .submenu {
z-index: 20;
}
.nav .submenu a {
display: block;
padding: 0.45rem 0.9rem;
text-decoration: none;
color: inherit;
}
Kendiniz deneyin
- Her üst düzey
liöğesiniposition: relativeyapın. - Bir
.submenulistesi iç içe yerleştirin veabsolute; top: 100%; left: 0konumlandırın. display: noneile gizleyin, sonrali:hoverile gösterin.- Klavye odağı da paneli açsın diye
:focus-withinekleyin. z-indexyükseltin ve dokunmada tıkla-aç için JS’yi ne zaman ekleyeceğinizi yazın.
Yaygın hatalar
- Relative üst olmadan absolute alt menü (panel uzağa kaçar)
- Alt menüyü varsayılan görünür bırakmak
- Odak stillerini kaldırmak — klavye kullanıcıları kaybolur
- Bu CSS iskeletini öğrenmeden tam JS mega menü kurmak
- Açılır menüleri tüm sayfa düzeni dersi sanmak
Özet
- Açılır menüler relative tetikleyicinin altında panel iç içe yerleştirir
- Absolute +
top: 100%menüyü bağlantının altına sabitler - Varsayılan gizle; hover ve focus-within ile göster
- Panel sayfa içeriğini örtsün diye z-index kullanın
- Düz nav çubukları önce geldi; iç içe menüler bu ders
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek