Wie sucht man/筛选下拉菜单
- Previous page Filter elements
- Next page Sorted list
Lernen Sie, wie Sie mit CSS und JavaScript in einem Dropdown-Menü nach Projekten suchen.
Filtern Sie das Dropdown-Menü
Erstellen Sie ein klickbares Dropdown-Menü
Erstellen Sie ein Dropdown-Menü, das erscheint, wenn der Benutzer auf den Button klickt.
Schritt 1 - HTML hinzufügen：
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<input type="text" placeholder="Suche.." id="myInput" onkeyup="filterFunction()">
<a href="#about">Über uns</a>
<a href="#base">Basis</a>
<a href="#blog">Blog</a>
<a href="#contact">Kontakt</a>
<a href="#custom">Custom</a>
<a href="#support">Support</a>
<a href="#tools">Tools</a>
</div>
</div>
Beispiel Erklärung:
Sie können jeden Element, um das Dropdown-Menü zu öffnen, verwenden, z.B. ein <button>, <a> oder <p>-Element.
Erstellen Sie ein Container-Element (z.B. <div>) zum Erstellen des Dropdown-Menüs und fügen Sie darin die Links des Dropdown-Menüs hinzu.
Um die Dropdown-Menü mit CSS korrekt zu positionieren, umwickeln Sie den Button und einen anderen <div>-Element mit einem <div>-Element.
Schritt 2 - CSS hinzufügen：
/* 下拉菜单按钮 */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 鼠标悬停和聚焦时的下拉菜单按钮 */
.dropbtn:hover, .dropbtn:focus {
background-color: #3e8e41;
}
/* 搜索字段 */
#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;
}
/* 当搜索框获得焦点/被点击时 */
#myInput:focus {outline: 3px solid #ddd;}
/* 容器 <div> - 用于定位下拉菜单内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉菜单内容（默认是隐藏的） */
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
}
/* 下拉菜单内的链接 */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* 更改鼠标悬停时下拉菜单链接的颜色 */
.dropdown-content a:hover {background-color: #f1f1f1}
/* 显示下拉菜单（当用户点击下拉菜单按钮时，使用 JS 将此类添加到 .dropdown-content 容器中） */
.show {display:block;}
Beispiel Erklärung:
Wir haben das Dropdown-Menü-Schaltflächen-Design gestylt, einschließlich Hintergrundfarbe, Innenabstand, Hover-Effekt usw.
.dropdown Klasse verwendet position:relativedaher, weil wir möchten, dass der Dropdown-Inhalt genau unter der Dropdown-Schaltfläche liegt (durch die Verwendung von position:absolute implementiert).
.dropdown-content Klasse enthält das tatsächliche Dropdown-Menü. Standardmäßig ist es versteckt und wird bei der Überlagerung angezeigt (siehe unten). Beachten Sie,min-width wird auf 230px gesetzt. Sie können es nach Bedarf ändern. Hinweis: Wenn Sie möchten, dass die Breite des Dropdown-Inhalts mit der der Dropdown-Schaltfläche übereinstimmt, können Sie width Auf 100% gesetzt (und overflow Auf auto gesetzt, um auf kleinen Bildschirmen Scrollen zu ermöglichen).
Das Suchfeld (#myInput) wurde gestylt, um in das Dropdown-Menü zu passen. Wir haben ein Suchsymbol hinzugefügt, das sich links im Suchfeld befindet, um anzuzeigen, dass es sich tatsächlich um ein Suchfeld handelt.
Dritter Schritt - Fügen Sie JavaScript hinzu:
/* Wenn der Benutzer auf die Schaltfläche klickt, wird zwischen der Versteckung und Anzeige des Dropdown-Inhalts umgeschaltet */
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";
}
}
}
Related pages
Tutorial:CSS dropdown menu
- Previous page Filter elements
- Next page Sorted list
