CSS Gezinti Çubuğu

Gösteri: navigasyon çubuğu

Dik navigasyon çubuğu

Yatay navigasyon çubuğu


Navigasyon çubuğu

Navigasyon çubuğu, her web sitesi için önemlidir.

CSS kullanarak, sıradan HTML menülerinizi güzel navigasyon çubuklarına dönüştürebilirsiniz.

Navigasyon çubuğu = bağlantı listesi

Navigasyon çubuğu, standart HTML'ye dayanmaktadır.

Örnekimizde, navigasyon çubuğunu standart HTML listesi ile inşa edeceğiz.

Navigasyon çubuğu genellikle bağlantı listesidir, bu yüzden <ul> ve <li> öğeleri kullanmak çok anlamlıdır:

Örnek

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">Haberler</a></li>
  <li><a href="contact.asp">İletişim</a></li>
  <li><a href="about.asp">Hakkında</a></li>
</ul>

Kişisel olarak deneyin

Şimdi, listeden liste işaretlerini ve dış kenar boşluklarını (dolgu) kaldırın:

Örnek

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

Kişisel olarak deneyin

Örnek Açıklaması:

  • list-style-type: none; - Liste işaretlerini kaldırın. Nav menüsü liste işaretlerini gerektirmez.
  • Ayarlamak margin: 0; ve padding: 0; Tarayıcıların varsayılan ayarlarını silin.

Önceki örnekteki kod, dikey ve yatay navigasyon çubuğunda kullanılan standart koddur, bir sonraki bölümde daha fazla içerik öğreneceksiniz.