Nasıl oluşturulur: Dikey menü

Dikey düğme grubu nasıl oluşturulur

İlk Adım - HTML Ekleme:

<div class="vertical-menu">
  <a href="#" class="active">Ana Sayfa</a>
  <a href="#">Bağlantı 1</a>
  <a href="#">Bağlantı 2</a>
  <a href="#">Bağlantı 3</a>
  <a href="#">Bağlantı 4</a>
</div>

İkinci Adım - CSS Ekleme:

.vertical-menu {
  width: 200px; /* İsterseniz genişliği ayarlayabilirsiniz */
}
.vertical-menu a {
  background-color: #eee; /* Gri arka plan rengi */
  color: black; /* Siyah metin rengi */
  display: block; /* Bağlantıları bir bir gösterir */
  padding: 12px; /* Biraz iç boşluk ekleyin */
  text-decoration: none; /* Bağlantı alt çizgisini kaldırın */
}
.vertical-menu a:hover {
  background-color: #ccc; /* Fare üzerine gelindiğinde koyu gri arka plan */
}
.vertical-menu a.active {
  background-color: #04AA6D; /* Etkin/şu anki” bağlantısına yeşil ekleyin */
  color: white;
}

Kişisel olarak deneyin

Dikey kaydırma menüsü

Eğer dikey kaydırma menüsünü istiyorsanız, belirli bir yükseklik belirleyin ve ekleyin overflow Özellikler:

.vertical-menu {
  width: 200px;
  height: 150px;
  overflow-y: auto;
}

Kişisel olarak deneyin

İlgili sayfalar

Eğitim:Kenar navigasyon panosu nasıl oluşturulur