CSS Navigasyon Çubukları
Layout dersi sayfa bölgelerini taslakladı. Navigasyon çubuğu, insanların bu bölgeler ve sayfalar arasında gezinmesine yardım eden bağlantı şerididir. Anlamsal bir bağlantı listesiyle başlayın, onları sakin bir satıra dizin, sonra hover ipuçları ekleyin — iç içe açılır menüleri sonraki derse saklayın.
Bir navigasyon araç seti
📊 Navigasyona bakış
| Parça | Günlük iş |
|---|---|
nav |
Birincil/ikincil site bağlantıları için landmark |
ul / li / a |
Hedeflerin yapılandırılmış listesi |
| Liste sıfırlama | Çubuk düzenleri için madde işaretlerini ve varsayılan girintiyi kaldır |
| Yatay satır | Bağlantılar yan yana dursun diye flex veya inline-block |
| Hover / geçerli | İşaretçi geri bildirimi ve «buradasınız» |
| Dikey nav | Aynı listenin yığını — kenar çubuklarında yararlı |
Navigasyon hâlâ bağlantılardır. Odak dış çizgilerini görünür tutun, rahat padding verin ve anlamı adsız div yığınlarında gizlemeyin.
nav içinde anlamsal liste
Menüyü nav ile sarın ve hedefleri listede gerçek çapa olarak tutun. Ekran okuyucular ve gelecekteki siz yapıya teşekkür edecek.
.nav {
list-style: none;
margin: 0;
padding: 0;
}
.nav a {
text-decoration: none;
color: inherit;
}
Flex ile yatay çubuk
Basit bir flex satırı listeyi çubuğa çevirir. Gap ve padding, sıkışık tıklama hedeflerini yener. (Daha derin Flexbox ustalığı sonra gelir — temiz bir navbar için bu yeter.)
.navbar .nav {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
align-items: center;
}
.navbar .nav a {
display: inline-block;
padding: 0.5rem 0.75rem;
}
Hover ve geçerli sayfa ipuçları
Hover’da geri bildirim verin ve geçerli sayfayı bir sınıfla işaretleyin. :focus dış çizgilerini asla «temizlik» diye kaldırmayın.
.nav a:hover {
background: #f0f4ff;
border-radius: 0.35rem;
}
.nav a.is-current {
font-weight: 700;
color: #0b5fff;
}
Dikey yan navigasyon
Aynı liste bir kenar çubuğunda yığılabilir. Her bağlantı kolay vurulsun diye boşluğu cömert tutun.
.sidenav .nav {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sidenav .nav a {
padding: 0.55rem 0.75rem;
}
Sakin bir navigasyon alışkanlığı
nav + liste + okunabilir padding kullanın. Yatay çubuklar için flex satırlarını tercih edin. Mega menüleri ve açılırları sonraki derse bırakın. Bağlantı çubuğunu tam sayfa düzen kabuğuyla karıştırmayın.
.site-nav { /* landmark wrapper */ }
.site-nav__list { /* the ul */ }
.site-nav__link { /* each a */ }
.site-nav__link.is-current { /* active page */ }
Kendiniz deneyin
nav > ul.nav > li > aoluşturun ve liste stillerini sıfırlayın.- Bağlantıları padding ve gap ile yatay flex satırına dizin.
:hoverve.is-currentstili ekleyin.- Listeyi dikey sidenav varyantı olarak çoğaltın.
- Bir cümle yazın: Dropdowns dersine burada değil de ne ait?
Yaygın hatalar
- Dokunma ve fare hedeflerini kaçıran minik padding
- Odak dış çizgilerini kalıcı kaldırmak
navve listeler yerine div çorbası- Bu derste iç içe açılır mega menüler kurmak
- Navbar’ı tüm site düzeni saymak
Özet
- Navigasyon çubukları
naviçindeki yapılandırılmış bağlantı listeleridir - Madde işaretlerini sıfırlayın, sonra flex (veya inline-block) ile dizin
- Hover ve geçerli stiller odağı öldürmeden yönlendirir
- Dikey nav aynı listenin yığınıdır
- Açılır menüler sonraki dersi bekler
🧠 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