Açılır menüyü nasıl arama/filtreleme yapılır

CSS ve JavaScript kullanarak açılır menüde projeleri nasıl arama yapacağınızı öğrenin.

Tıklanabilir bir açılır menü oluşturun

Kullanıcının düğmeye tıkladığında görüntülenen bir açılır menü oluşturun.

İlk adım - HTML ekleyin：

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">Açılır Menü</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Ara.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">Hakkında</a>
    <a href="#base">Temel</a>
    <a href="#blog">Blog</a>
    <a href="#contact">İletişim</a>
    <a href="#custom">Özel</a>
    <a href="#support">Destek</a>
    <a href="#tools">Araçlar</a>
  </div>
</div>

Örnek açıklama:

Açılır menüyü açmak için herhangi bir öğe kullanılabilir, örneğin bir <button>, <a> veya <p> öğesi.

Açılır menüyü oluşturmak için bir konteyner öğesi (örneğin <div>) kullanın ve içinde açılır menü bağlantılarını ekleyin.

Düğmeyi ve bir diğer <div> öğesini bir <div> öğesi içinde sarın, böylece açılır menü CSS ile doğru şekilde konumlandırılır.

İkinci adım - CSS ekleyin：

/* Açılır menü düğmesi */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* Fareyi üzerine getirdiğinde ve odaklandığında açılır menü düğmesi */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}
/* Arama alanı */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
/* Arama çubuğu odaklandığında veya tıklandığında */
#myInput:focus {outline: 3px solid #ddd;}
/* Konteyner <div> - Açılır menü içeriğini konumlandırmak için kullanılır */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Açılır menü içeriği (varsayılan olarak gizlidir) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
}
/* Açılır menü içindeki bağlantılar */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Fareyi üzerine getirdiğinde açılır menü bağlantısının rengini değiştirin */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Açılır menü gösterecek (kullanıcı açılır menü düğmesine tıkladığında, bu sınıfı .dropdown-content konteynerine JS ile ekleyin) */
.show {display:block;}

Örnek açıklama:

Açılır menü düğmemizi stil tasarımı yaptık, arka plan rengi, iç boşluk, üzerine gelme etkisi vb. dahil.

.dropdown sınıfı kullanarak position:relativebu, aşağıdaki nedenle budur; biz aşağıdaki açılır içeriklerin açılır menü düğmesinin altında tam olarak yerleştirilmesini istiyoruz (kullanarak position:absolute uygulanır).

.dropdown-content sınıfı gerçek açılır menü içerir.Varsayılan olarak gizlidir ve üzerine gelindiğinde gösterilir (aşağıda görülebilir).Dikkat etmelisiniz ki,min-width 230px olarak ayarlanmıştır. Gereksinimlerinize göre değiştirebilirsiniz. İpucu: Eğer açılır içeriğin genişliğini açılır menü düğmesinin genişliği ile aynı yapmak istiyorsanız, width 100% olarak ayarlanır (ve overflow Auto olarak ayarlanır, böylece küçük ekranlarda kaydırma etkinleştirilir).

Arama çubuğu (#myInput) stil tasarımı yapıldı, aşağıdaki açılır menüye uyum sağlamak için. Bir arama simgesi ekledik, bu da arama çubuğunun solunda ve bu aslında bir arama çubuğu olduğunu gösterir.

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

/* Kullanıcı düğmesine tıkladığında, açılır içeriğin gizlenmesi ve gösterilmesi arasında geçiş yapılır */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

Kişisel olarak deneyin

İlgili Sayfalar

Eğitimler:CSS Açılır Menü

Eğitimler:Üzerinde Geçiş Yapılabilir Açılır Menü Nasıl Oluşturulur