Ochiladigan menyuni filtrlash
CSS va JavaScript yordamida ochiladigan menyudagi elementlarni qidirishni o‘rganing.
Ochiladigan menyuni filtrlash
O‘zingiz sinab ko‘ring »Bosish bilan ochiladigan menyu yaratish
Foydalanuvchi tugmani bosganda paydo bo‘ladigan ochiladigan menyu yarating.
1-qadam) HTML qo‘shing:
Misol
<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>
Misol tahlili
Ochiladigan menyuni ochish uchun istalgan elementdan, masalan, <button>, <a> yoki <p> elementidan foydalaning.
Ochiladigan menyuni yaratish uchun konteyner elementdan (masalan, <div>) foydalaning va menyu havolalarini uning ichiga qo‘shing.
Ochiladigan menyuni CSS yordamida to‘g‘ri joylashtirish uchun tugma va <div> atrofini <div> elementi bilan o‘rang.
2-qadam) CSS qo‘shing:
Misol
/* 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;}
Misol tahlili
Ochiladigan menyu tugmasiga background-color, padding, hover effekti va hokazolar yordamida uslub berdik.
.dropdown klassi position:relative dan foydalanadi — bu ochiladigan kontentni menyu tugmasining aynan ostiga (position:absolute yordamida) joylashtirish uchun kerak.
.dropdown-content klassi ochiladigan menyuning o‘zini saqlaydi. U standart holatda yashirin bo‘ladi va hover holatida ko‘rsatiladi (quyiga qarang). E’tibor bering, min-width 230px ga o‘rnatilgan. Uni bemalol o‘zgartirishingiz mumkin. Maslahat: Agar ochiladigan kontent kengligi menyu tugmasi kengligiga teng bo‘lishini istasangiz, width ni 100% ga o‘rnating (kichik ekranlarda aylantirishni yoqish uchun esa overflow:auto ni ham).
Qidiruv maydoni (#myInput) ochiladigan menyu ichiga mos tushadigan qilib uslublangan. Bu haqiqatan ham qidiruv maydoni ekanini ko‘rsatish uchun uning ichida chap tomonga qidiruv ikonkasini joylashtirdik.
3-qadam) JavaScript qo‘shing:
Misol
/* 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";
}
}
}
O‘zingiz sinab ko‘ring »
Maslahat: Ochiladigan menyular haqida ko‘proq bilish uchun CSS dropdown darsligimizga o‘ting.
Maslahat: Hover bilan ochiladigan menyular haqida ko‘proq bilish uchun Hover bilan ochiladigan menyular sahifasiga o‘ting
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!