Nasıl oluşturulur: Açılır menü kenar çubuğu

Önceki sayfa Üst navigasyon çubuğundaki açılır menü
Sonraki Sayfa Açılır Menü İle Yanıt Veren Gezinti Çubuğu

Yan navigasyonda açılır menü nasıl eklenir öğrenin.

Yan navigasyon çubuğundaki açılır menü

Yan menü kenar çubuğu oluşturma

Adım 1 - HTML Ekleme:

<div class="sidenav">
  <a href="#about">Hakkımızda</a>
  <a href="#services">Hizmetler</a>
  <a href="#clients">Müşteriler</a>
  <a href="#contact">İletişim</a>
  <button class="dropdown-btn">Açılır Menü
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Bağlantı 1</a>
    <a href="#">Bağlantı 2</a>
    <a href="#">Bağlantı 3</a>
  </div>
  <a href="#contact">Ara</a>
</div>

Örnek Açıklaması:

Açılır menüleri herhangi bir elemanla açın, örneğin <button>, <a> veya <p> elemanı.

Açılır menüleri oluşturmak için konteyner elemanları (örneğin <div>) kullanın ve içinde açılır menü bağlantıları ekleyin. Kenar çubuğundaki tüm bağlantılara aynı stili uygulayacağız.

İkinci Adım - CSS Ekle:

/* Tam yüksekliğinde sabit kenar çubuğu navigasyonu */
.sidenav {
  yükseklik: 100%;
  genişlik: 200px;
  konum: sabit;
  z_eksen: 1;
  üst: 0;
  sol: 0;
  arka_plan_rengi: #111;
  yatay_akış: gizli;
  üst_dolgu: 20px;
}
/* Kenar çubuğu bağlantıları ve açılır menü düğmelerinin stilleri */
.sidenav a, .dropdown-btn {
  dolgu: 6px 8px 6px 16px;
  metin_düzenleme: yok;
  yazı_boyutu: 20px;
  renk: #818181;
  görünüm: blok;
  çerçeve: yok;
  arka_plan: yok;
  genişlik:100%;
  metin-yerleştirme: sol;
  imleç: işaretçi;
  çizgi: yok;
}
/* Faretleme sırasında */
.sidenav a:hover, .dropdown-btn:hover {
  color: #f1f1f1;
}
/* Ana içerik */
.main {
  margin-left: 200px; /* Kenar çubuğunun genişliği ile aynı */
  font-size: 20px; /* Kaydırma için metni büyütün */
  padding: 0px 10px;
}
/* Aktif olan açılır menü düğmelerine bir etkin sınıf ekleyin */
.active {
  background-color: green;
  color: white;
}
/* Açılır menü konteyneri (varsayılan olarak gizlidir). Seçmeli: Açılır menü içeriği için daha parlak bir arka plan rengi ve bazı sol iç boşluk ekleyerek tasarımı değiştirin */
.dropdown-container {
  display: none;
  background-color: #262626;
  padding-left: 8px;
}
/* Seçmeli: Aşağı ok çizgisinin stilini ayarlayın */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}

Kendi kendine deneyin

Üçüncü adım - JavaScript ekleme:

//* Tüm açılır menü düğmelerini tarayarak, gizli ve gösterili açılır menü içerikleri arasında geçiş yapmayı sağlar - bu, kullanıcıya çoklu açılır menüye sahip olmasına rağmen herhangi bir çakışma olmamasını sağlar */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

Kendi kendine deneyin