CSS Dikey Gezinti Çubuğu
Dikey Gezinti Çubuğu
Dikey bir gezinme çubuğu oluşturmak için önceki sayfadaki koda ek olarak listedeki <a> öğelerinin stilini belirleyebilirsiniz:
Örnek
li a
{
display: block;
width: 60px;
}
Örnek açıkladı:
display: block;
- Bağlantıları blok elemanlar olarak göstermek, tüm bağlantı alanını (sadece metni değil) tıklanabilir hale getirir ve genişliği (ve isterseniz dolgu, kenar boşluğu, yükseklik vb.) belirlememizi sağlar.width: 60px;
- Blok öğeleri, varsayılan olarak mevcut olan tam genişliği kaplar. 60 piksel genişlik belirtmek istiyoruz
Ayrıca <ul> genişliğini ayarlayabilir ve <a> genişliğini kaldırabilirsiniz, çünkü bunlar blok öğeler olarak görüntülendiklerinde mevcut olan tam genişliği alacaktır. Bu, önceki örneğimizle aynı sonucu verecektir:
Örnek
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
Dikey Gezinti Çubuğu Örnekleri
Gri arka plan rengine sahip temel bir dikey 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;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
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;
color: white;
}
Bağlantıları Ortala ve Kenarlık Ekle
text-align:center
Bağlantıları ortalamak için <li> veya <a>'ya ekleyin .
<ul> öğesine özelliği ekleyin border
, gezinme çubuğunun çevresine bir kenarlık ekleyin. Gezinme çubuğunun içinde de kenarlıklar istiyorsanız border-bottom
, sonuncusu hariç tüm <li> öğelerine a ekleyin:
Örnek
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Tam yükseklikte Sabit Dikey Gezinti Çubuğu
Tam yükseklikte, "yapışkan" bir yan gezinme oluşturun:
Örnek
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
Not: Bu örnek mobil cihazlarda düzgün çalışmayabilir.