कैसे करें - ड्रॉपडाउन खोजें/फ़िल्टर करें
CSS और JavaScript के साथ ड्रॉपडाउन मेनू में आइटम खोजने का तरीका जानें।
ड्रॉपडाउन मेनू फ़िल्टर करें
एक क्लिक करने योग्य ड्रॉपडाउन बनाएं
एक ड्रॉपडाउन मेनू बनाएं जो तब प्रकट होता है जब उपयोगकर्ता किसी बटन पर क्लिक करता है।
चरण 1) HTML जोड़ें:
उदाहरण
<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>
उदाहरण समझाया गया
ड्रॉपडाउन मेनू खोलने के लिए किसी भी तत्व का उपयोग करें, जैसे <बटन>, <a> या <p> तत्व।
ड्रॉपडाउन मेनू बनाने और उसके अंदर ड्रॉपडाउन लिंक जोड़ने के लिए एक कंटेनर तत्व (जैसे <div>) का उपयोग करें।
CSS के साथ ड्रॉपडाउन मेनू को सही स्थिति में लाने के लिए बटन के चारों ओर <div> तत्व और <div> लपेटें।
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* 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;}
उदाहरण समझाया गया
हमने ड्रॉपडाउन बटन को बैकग्राउंड-कलर, पैडिंग, होवर इफेक्ट आदि के साथ स्टाइल किया है।
.dropdownवर्ग उपयोग करता है, जिसकी आवश्यकता तब position:relativeहोती है जब हम ड्रॉपडाउन सामग्री को ड्रॉपडाउन बटन के ठीक नीचे रखना चाहते हैं (का उपयोग करके position:absolute)।
.dropdown-contentकक्षा वास्तविक ड्रॉपडाउन मेनू रखती है । यह डिफ़ॉल्ट रूप से छिपा होता है, और होवर पर प्रदर्शित किया जाएगा (नीचे देखें)। ध्यान दें कि min-width230px पर सेट है। इसे बदलने के लिए स्वतंत्र महसूस करें। युक्ति: यदि आप चाहते हैं कि ड्रॉपडाउन सामग्री की चौड़ाई ड्रॉपडाउन बटन जितनी चौड़ी हो, तो width100% पर सेट करें (और overflow:autoछोटी स्क्रीन पर स्क्रॉल सक्षम करने के लिए)।
खोज फ़ील्ड (#myInput) को ड्रॉपडाउन मेनू के अंदर फ़िट करने के लिए स्टाइल किया गया है। हमने एक खोज आइकन जोड़ा है, जो यह इंगित करने के लिए खोज फ़ील्ड के अंदर बाईं ओर रखा गया है कि यह वास्तव में एक खोज फ़ील्ड है।
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
/* 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";
}
}
}
युक्ति: ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे सीएसएस ड्रॉपडाउन ट्यूटोरियल पर जाएं।
युक्ति: होवर करने योग्य ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे होवरेबल ड्रॉपडाउन पर जाएं