Nasıl Yapılır - Arama/Filtre Açılır Menüsü
CSS ve JavaScript ile bir açılır menüde öğeleri nasıl arayacağınızı öğrenin.
Filtre Açılır Menüsü
Tıklanabilir Bir Açılır Menü Oluşturun
Kullanıcı bir düğmeye tıkladığında görünen bir açılır menü oluşturun.
Adım 1) HTML'yi ekleyin:
Örnek
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input
type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
<a href="#about">About</a>
<a href="#base">Base</a>
<a href="#blog">Blog</a>
<a href="#contact">Contact</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
Örnek Açıklama
Açılır menüyü açmak için herhangi bir öğeyi kullanın, örneğin bir <button>, <a> veya <p> öğesi.
Açılır menüyü oluşturmak ve içine açılan bağlantıları eklemek için bir kapsayıcı öğesi (<div> gibi) kullanın.
Açılır menüyü CSS ile doğru şekilde konumlandırmak için düğmenin ve <div> öğesinin etrafına bir <div> öğesi sarın.
Adım 2) CSS'yi ekleyin:
Örnek
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* The search field */
#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;
}
/* The search field
when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}
/* The
container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display:
inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:
absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content
container when the user clicks on the dropdown button) */
.show {display:block;}
Örnek Açıklama
Açılır düğmeyi arka plan rengi, dolgu, fareyle üzerine gelme efekti vb. ile biçimlendirdik.
Sınıf , açılır içeriğin açılır düğmenin hemen altına yerleştirilmesini istediğimizde ( kullanarak) gerekli olan .dropdownkullanır .position:relativeposition:absolute
Sınıf .dropdown-content, gerçek açılır menüyü tutar. Varsayılan olarak gizlidir ve üzerine gelindiğinde görüntülenecektir (aşağıya bakın). min-width230 piksel olarak ayarlandığını unutmayın . Bunu değiştirmekten çekinmeyin. İpucu: Açılan içeriğin genişliğinin aşağı açılan düğme kadar geniş olmasını istiyorsanız, width%100'e ayarlayın (ve overflow:autoküçük ekranlarda kaydırmayı etkinleştirmek için).
Arama alanı (#myInput) açılır menünün içine sığacak şekilde tasarlanmıştır. Bunun aslında bir arama alanı olduğunu belirtmek için arama alanının soluna yerleştirilen bir arama simgesi ekledik.
Adım 3) JavaScript'i ekleyin:
Örnek
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
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";
}
}
}
İpucu: Açılır menüler hakkında daha fazla bilgi edinmek için CSS Açılanlar Eğitimimize gidin .
İpucu: Üzerine gelinebilir açılır listeler hakkında daha fazla bilgi edinmek için Gezinebilir Açılır Listelerimize gidin