CSS Yatay Gezinti Çubuğu
Yatay Gezinti Çubuğu
Yatay gezinme çubuğu oluşturmanın iki yolu vardır. Satır içi veya kayan liste öğelerini kullanma .
Satır İçi Liste Öğeleri
Yatay gezinme çubuğu oluşturmanın bir yolu, önceki sayfadaki "standart" koda ek olarak <li> öğelerini satır içi olarak belirtmektir:
Örnek
li
{
display: inline;
}
Örnek açıkladı:
display: inline;- Varsayılan olarak, <li> öğeleri blok öğelerdir. Burada, bir satırda görüntülemek için her liste öğesinden önceki ve sonraki satır sonlarını kaldırıyoruz.
Kayan Liste Öğeleri
Yatay gezinme çubuğu oluşturmanın başka bir yolu, <li> öğelerini yüzdürmek ve gezinme bağlantıları için bir düzen belirlemektir:
Örnek
li
{
float: left;
}
a
{
display: block;
padding: 8px;
background-color:
#dddddd;
}
Örnek açıkladı:
float: left;- Blok öğelerinin yan yana yüzmesini sağlamak için kayan noktayı kullanındisplay: block;- Dolguyu (ve isterseniz yükseklik, genişlik, kenar boşlukları vb.) belirtmemize izin verir.padding: 8px;- İyi görünmelerini sağlamak için her <a> öğesi arasında bir miktar dolgu belirtinbackground-color: #dddddd;- Her <a> öğesine gri bir arka plan rengi ekleyin
İpucu: Tam genişlikte bir arka plan rengi istiyorsanız, her <a> öğesi yerine arka plan rengini <ul> öğesine ekleyin:
Örnek
ul
{
background-color: #dddddd;
}
Yatay Gezinti Çubuğu Örnekleri
Koyu arka plan rengine sahip temel bir yatay gezinme çubuğu oluşturun ve kullanıcı fareyi üzerlerine getirdiğinde bağlantıların arka plan rengini değiştirin:
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow:
hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color:
#111;
}
Aktif/Mevcut Navigasyon Bağlantısı
Kullanıcıya hangi sayfada olduğunu bildirmek için mevcut bağlantıya "aktif" bir sınıf ekleyin:
Örnek
.active {
background-color: #04AA6D;
}
Sağa Hizala Bağlantılar
Liste öğelerini sağa kaydırarak bağlantıları sağa hizalayın ( float:right;):
Örnek
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a
class="active" href="#about">About</a></li>
</ul>
Sınır Bölücüler
border-rightBağlantı bölücüler oluşturmak için özelliği <li> öğesine ekleyin :
Örnek
/* Add a gray right border to all list items, except the last item
(last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Sabit Gezinti Çubuğu
Kullanıcı sayfayı kaydırdığında bile gezinme çubuğunun sayfanın üstünde veya altında kalmasını sağlayın:
Sabit Üst
ul {
position: fixed;
top: 0;
width: 100%;
}
Sabit Alt
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Not: Sabit konum, mobil cihazlarda düzgün çalışmayabilir.
Gri Yatay Gezinme Çubuğu
İnce gri kenarlıklı gri yatay gezinme çubuğu örneği:
Örnek
ul {
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
}
li a {
color:
#666;
}
Yapışkan gezinme çubuğu
position: sticky;Yapışkan bir gezinme çubuğu oluşturmak için <ul> öğesine ekleyin .
Yapışkan bir öğe, kaydırma konumuna bağlı olarak göreli ve sabit arasında geçiş yapar. Görünüm alanında belirli bir ofset konumu karşılanana kadar göreli olarak konumlandırılır - ardından yerine "yapışır" (konum:sabit gibi).
Örnek
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Not: Internet Explorer, yapışkan konumlandırmayı desteklemez. Safari bir -webkit- öneki gerektirir (yukarıdaki örneğe bakın). Yapışkan konumlandırmanın çalışması için top, veya öğelerinden en az birini rightde belirtmelisiniz .bottomleft
Daha fazla örnek
Duyarlı Topnav
Duyarlı bir üst gezinme oluşturmak için CSS medya sorguları nasıl kullanılır?
Duyarlı Sidenav
Duyarlı bir yan gezinme oluşturmak için CSS medya sorguları nasıl kullanılır?
Açılır Gezinme Çubuğu
Gezinme çubuğuna açılır menü nasıl eklenir.
W3Schools Spaces'ı hiç duydunuz mu? Burada web sitenizi sıfırdan oluşturabilir veya bir şablon kullanabilir ve ücretsiz olarak barındırabilirsiniz.
Ücretsiz başlayın ❯* Kredi kartına gerek yok