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

CSS और JavaScript के जरिए क्लिक करनेवाला ड्रॉपडाउन मेनू का उपयोग कैसे करें पाने की सीखें。

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

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

पहला कदम - HTML जोड़ें:

<div class="dropdown">
  <button onclick="myFunction()" class="dropbtn">ड्रॉपडाउन</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

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

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

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

बटन और डिव डिव को <div> एलिमेंट के भीतर रखकर डाउनलोड मेन्यू को सही तरीके से स्थानांतरित करें।

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

/* डाउनलोड बटन */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* माउस होवर और फोकस पर डाउनलोड मेन्यू बटन */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}
/* डिव डिव - डाउनलोड मेन्यू सामग्री को स्थानांतरित करने के लिए निर्देशांक एलिमेंट */
.dropdown {
  position: relative;
  display: inline-block;
}
/* डाउनलोड मेन्यू की सामग्री (डिफ़ॉल्ट में छुपा हुआ) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* डाउनलोड मेन्यू के अंदर के लिंक */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* माउस होवर पर डाउनलोड मेन्यू लिंक का रंग बदलें */
.dropdown-content a:hover {background-color: #ddd;}
/* ड्रॉपडाउन मेन्यू को दिखाएं (जब उपयोगकर्ता ड्रॉपडाउन बटन पर क्लिक करता है, तो JS के द्वारा इस क्लास को .dropdown-content कोश्चे में जोड़ा जाए) */
.show {display:block;}

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

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

.dropdown क्लास का उपयोग करते हैं position:relativeसे, जब हम ड्रॉपडाउन मेन्यू सामग्री को ड्रॉपडाउन बटन के नीचे रखना चाहते हैं ( position:absolute），यह आवश्यक है।

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

बाहरी किनारा नहीं इस्तेमाल किया, बजाय इसके box-shadow गुण, ताकि ड्रॉपडाउन मेन्यू एक 'कार्ड' की तरह दिखाई दे। हमने इसके साथ z-index ड्रॉपडाउन मेन्यू को अन्य एलिमेंट के सामने रखें

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

/* जब उपयोगकर्ता बटन पर क्लिक करता है, ड्रॉपडाउन मेन्यू की छुपी हुई और दिखाई देने की स्थिति बदलें */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
// यदि उपयोगकर्ता ड्रॉपडाउन मेन्यू के बाहर क्लिक करता है, तो ड्रॉपडाउन मेन्यू बंद करें
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

स्वयं को परीक्षण करें

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

पाठ्यक्रम:CSS ड्रॉपडाउन मेनू

पाठ्यक्रम:कैसे करें: हॉवर करने वाला ड्रॉपडाउन मेनू