CSS Gezinme Çubuğu
Demo: Gezinme Çubukları
Gezinme Çubukları
Kullanımı kolay navigasyona sahip olmak, herhangi bir web sitesi için önemlidir.
CSS ile sıkıcı HTML menülerini güzel görünümlü gezinme çubuklarına dönüştürebilirsiniz.
Gezinme Çubuğu = Bağlantıların Listesi
Bir gezinme çubuğu, temel olarak standart HTML'ye ihtiyaç duyar.
Örneklerimizde gezinme çubuğunu standart bir HTML listesinden oluşturacağız.
Gezinme çubuğu temel olarak bir bağlantı listesidir, bu nedenle <ul> ve <li> öğelerini kullanmak son derece mantıklıdır:
Örnek
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
Şimdi madde işaretlerini, kenar boşluklarını ve dolguyu listeden çıkaralım:
Örnek
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
Örnek açıkladı:
list-style-type: none;
- Mermileri kaldırır. Gezinme çubuğunun liste işaretçilerine ihtiyacı yoktur-
Tarayıcı varsayılan ayarlarını ayarlayın
margin: 0;
ve kaldırınpadding: 0;
Yukarıdaki örnekteki kod, sonraki bölümlerde daha fazlasını öğreneceğiniz hem dikey hem de yatay gezinme çubuklarında kullanılan standart koddur.