Özet - Menü çubuğu
Liste ve bağlantı stilleriyle yatay menü çubuğu kurarsın.
Menü çubuğunun iskeleti
Bu derste önceki kavramları birleştirip yatay bir menü çubuğu kuracaksın. Bir menü çubuğu genellikle bir ul içinde li ögeleri ve her ögenin içinde bir a bağlantısından oluşur.
Varsayılan liste görünümünü kaldırmak, bağlantıları yatay dizmek ve fareyle üzerine gelince vurgulamak gerekir. Adım adım ilerleyeceğiz: önce iskelet, sonra bağlantılar.
display: inline ile yatay sıralama
Liste ögeleri varsayılan olarak dikey dizilir; her li yeni satırda durur. display: inline bildirimi bir ögeyi satır içi yapar: ögeler yan yana akar, satır yetmeyince alt satıra geçer.
Menü çubuğunda li veya a ögelerine display: inline verirsen yatay sıralanırlar. Böylece dikey liste, yatay menüye dönüşür.
Uygulama Menü iskeletini sıfırla
Bir ul.menu sınıf seçicisi yaz ve şu üç bildirimi tanımla: list-style-type: none, margin: 0, padding: 0. Böylece varsayılan madde işareti ve kenar boşlukları kalkar.
Örnek çözümü göster
/* menü çubuğu iskeletini sıfırla */
ul.menu {
list-style-type: none;
margin: 0;
padding: 0;
}Uygulama Bağlantıları yatay diz ve vurgula
İki stil bloğu ekle. Birincisi ul.menu a alt seçici; display: inline, text-decoration: none ve padding: 0.5rem 1rem tanımlasın. İkincisi ul.menu a:hover sahte sınıfı; color: tomato tanımlasın.
Örnek çözümü göster
/* menü bağlantı ve üzerine gelme stilleri */
ul.menu a {
display: inline;
text-decoration: none;
padding: 0.5rem 1rem;
}
ul.menu a:hover {
color: tomato;
}Kendini test et
-
Menü çubuğu için en uygun iskelet?
- Bir dizi div içinde span etiketleri
- Bir ul içinde li etiketleri, her birinde a bağlantısı
- Bir table içinde tr satırları
- Ardışık p paragrafları
Cevabı göster
Bir ul içinde li etiketleri, her birinde a bağlantısı — Doğru. ul + li + a yapısı anlamsal olarak menü için en uygun iskelettedir.