Ö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.

Sıradaki ders: Piksel ve yüzde

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler