कैसे ड्रॉपडाउन मेन्यू को खोजने/फिल्टर करने

CSS और JavaScript के इस्तेमाल से ड्रॉपडाउन मेन्यू में अनुसूची खोजना सीखें

क्लिक कर सकने वाला ड्रॉपडाउन मेन्यू बनाएं

एक ऐसा ड्रॉपडाउन मेन्यू बनाएं जो उपयोगकर्ता बटन पर क्लिक करने पर दिखाया जाए。

पहला कदम - 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">बारे में</a>
    <a href="#base">बेस</a>
    <a href="#blog">ब्लॉग</a>
    <a href="#contact">कॉन्टैक्ट</a>
    <a href="#custom">कस्टम</a>
    <a href="#support">सपोर्ट</a>
    <a href="#tools">टूल्स</a>
  </div>
</div>

उदाहरण व्याख्या:

ड्रॉपडाउन मेन्यू खोलने के लिए किसी भी एलीमेंट का इस्तेमाल कर सकते हैं, जैसे <button>, <a> या <p> एलीमेंट。

ड्रॉपडाउन मेन्यू को बनाने के लिए एक कंटेनर एलीमेंट (जैसे <div>) इस्तेमाल करें और उसमें ड्रॉपडाउन मेन्यू के लिंक जोड़ें。

बटन और एक अन्य <div> एलीमेंट को एक <div> एलीमेंट में रखकर ड्रॉपडाउन मेन्यू को सही तरीके से स्थानांतरित करने के लिए इस्तेमाल करें。

दूसरा कदम - CSS जोड़ें:

/* ड्रॉपडाउन मेन्यू बटन */
.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;}

उदाहरण व्याख्या:

हमने ड्रॉपडाउन मेन्यू बटन की शैली डिजाइन की है, जिसमें पृष्ठभूमि रंग, इनर-स्पेसिंग, होटर इफेक्ट आदि शामिल हैं।

.dropdown को उपयोग करके position:relativeक्योंकि हम चाहते हैं कि नीचे की सामग्री ड्रॉपडाउन मेन्यू बटन के नीचे सटीक रूप से स्थित हो (द्वारा position:absolute साधन)।

.dropdown-content को वास्तविक ड्रॉपडाउन मेन्यू शामिल करें। मूल रूप से यह छुपा हुआ है और होटर के दौरान दिखाया जाता है (देखें नीचे)। ध्यान दें किmin-width सेट किया गया है 230px। आपको आवश्यकता के अनुसार इसे संशोधित कर सकते हैं। सूचना: अगर आप चाहते हैं कि नीचे के सामग्री की चौड़ाई ड्रॉपडाउन मेन्यू बटन के बराबर हो, तो आप width सेट करें 100%（और overflow अटो सेट करें, ताकि छोटे स्क्रीन पर स्क्रॉलिंग सक्षम करने के लिए।

सर्च बॉक्स (#myInput) को शैली डिजाइन कर दिया गया है, ताकि नीचे के ड्रॉपडाउन मेन्यू के अंदर इसे सहज करने के लिए। हमने एक सर्च आइकन जोड़ा है, जो सर्च बॉक्स के अंदर बाईं तरफ स्थित है, यह इंगित करने के लिए कि यह वास्तव में एक सर्च बॉक्स है।

तीसरा कदम - जावास्क्रिप्ट जोड़ें:

/* जब उपयोगकर्ता बटन पर क्लिक करता है, निचले सामग्री के छुपे जाने और दिखाने के बीच परिवर्तन करें */
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";
    }
  }
}

स्वयं प्रयास करें

संबंधित पृष्ठ

शिक्षा:CSS ड्रॉपडाउन मेनू

शिक्षा:कैसे बनाएं: हॉवर करने वाला ड्रॉपडाउन मेनू