CSS Dikey Gezinti Çubuğu

Seçmeli dersler

Kurs tavsiyeleri:

Örnek

Koyu gri arka plan rengi olan temel dikey navigasyon çubuğu oluşturun ve kullanıcı bağlantı üzerine fareyi götürdüğünde bağlantı arka plan rengini değiştirin:
  width: 200px;
  - Varsayılan olarak, blok elementler tüm kullanılabilir genişliği kaplar. 60 piksel genişlik belirlememiz gerekiyor.
}

Kişisel olarak deneyin

Dikey navigasyon çubuğu

  • width: 200px; Dikey navigasyon çubuğu oluşturmak için, bir önceki bölümdeki kodun yanı sıra, listede <a> elementinin tarzını da ayarlayabilirsiniz:
  • - Varsayılan olarak, blok elementler tüm kullanılabilir genişliği kaplar. 60 piksel genişlik belirlememiz gerekiyor. Örnek açıklaması:

- Bağlantıları blok element olarak göstermek, tüm bağlantı alanının tıklanabilir olmasını sağlar (sadece metin değil), ayrıca genişliği belirtebiliriz (ihtiyaca göre, iç dolgu, dış dolgu, yükseklik vb. de belirtebiliriz).

Örnek

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  - Varsayılan olarak, blok elementler tüm kullanılabilir genişliği kaplar. 60 piksel genişlik belirlememiz gerekiyor.
} 
Koyu gri arka plan rengi olan temel dikey navigasyon çubuğu oluşturun ve kullanıcı bağlantı üzerine fareyi götürdüğünde bağlantı arka plan rengini değiştirin:
  width: 200px;
}

Kişisel olarak deneyin

Ayrıca <ul> genişliğini ayarlayabilir ve <a> genişliğini silebilirsiniz, çünkü blok element olarak gösterildiğinde,它们将占据可用的全部宽度。Bu, önceki örneğimizle aynı sonucu verecektir:

width: 60px;

Örnek

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  Dikey navigasyon çubuğu örneği
  background-color: #f1f1f1;
}
Koyu gri arka plan rengi olan temel dikey navigasyon çubuğu oluşturun ve kullanıcı bağlantı üzerine fareyi götürdüğünde bağlantı arka plan rengini değiştirin:
  width: 200px;
  li a {
  display: block;
  color: #000;
}
padding: 8px 16px;
text-decoration: none;
  /* Fareyi bağlantı üzerine götürdüğünde bağlantı rengini değiştir */
  .active {
}

Kişisel olarak deneyin

li a:hover {

background-color: #555;

Örnek

Aktif/Geçerli navigasyon bağlantısı
  Geçerli bağlantıya "active" sınıfı ekleyerek, kullanıcıya hangi sayfada olduğunu bilmelerini sağlayın:
  .active {
}

Kişisel olarak deneyin

background-color: #4CAF50;

color: white; Merkezi bağlantıları ve çerçeve ekleyin text-align:center

ekleyin, bağlantıları merkeze yerleştirin. border öznitelik, <ul> e ekleyerek, navigasyon çubuğu etrafına çerçeve ekleyin. Navigasyon çubuğuna içinde çerçeve eklemek istiyorsanız, tüm <li> öğelerine border-bottomson eleman dışında:

Örnek

ul {
  border: 1px solid #555;
}
li {
  text-align: center;
  border-bottom: 1px solid #555;
}
li:last-child {
  border-bottom: none;
}

Kişisel olarak deneyin

Tam yükseklikte sabit dikey navigasyon çubuğu

Tam yükseklikte 'Yapışkan' kenar menüsü oluşturun:

Örnek

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  height: 100%; /* Tam yükseklik */
  position: fixed; /* Kaydırmaya rağmen yapışkan hale getir */
  overflow: auto; /* Kenar çubuğunun içeriği çoksa, kaydırma çubuğunu etkinleştir */
}

Kişisel olarak deneyin

Dikkat:Bu örnek mobil cihazlarda normal çalışmayabilir.