कैसे करें - क्लिक करने योग्य ड्रॉपडाउन
CSS और JavaScript के साथ क्लिक करने योग्य ड्रॉपडाउन मेनू बनाने का तरीका जानें।
ड्रॉप डाउन
ड्रॉपडाउन मेनू एक टॉगल करने योग्य मेनू है जो उपयोगकर्ता को पूर्वनिर्धारित सूची से एक मान चुनने की अनुमति देता है:
एक क्लिक करने योग्य ड्रॉपडाउन बनाएं
एक ड्रॉपडाउन मेनू बनाएं जो तब प्रकट होता है जब उपयोगकर्ता किसी बटन पर क्लिक करता है।
चरण 1) HTML जोड़ें:
उदाहरण
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Link
1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
उदाहरण समझाया गया
ड्रॉपडाउन मेनू खोलने के लिए किसी भी तत्व का उपयोग करें, जैसे <बटन>, <a> या <p> तत्व।
ड्रॉपडाउन मेनू बनाने और उसके अंदर ड्रॉपडाउन लिंक जोड़ने के लिए एक कंटेनर तत्व (जैसे <div>) का उपयोग करें।
CSS के साथ ड्रॉपडाउन मेनू को सही स्थिति में लाने के लिए बटन के चारों ओर <div> तत्व और <div> लपेटें।
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown
button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* 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: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
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: #ddd}
/* 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-width160px पर सेट है। इसे बदलने के लिए स्वतंत्र महसूस करें। युक्ति: यदि आप चाहते हैं कि ड्रॉपडाउन सामग्री की चौड़ाई ड्रॉपडाउन बटन जितनी चौड़ी हो, तो width100% पर सेट करें (और overflow:autoछोटी स्क्रीन पर स्क्रॉल सक्षम करने के लिए)।
बॉर्डर का उपयोग करने के बजाय, हमने box-shadowड्रॉपडाउन मेनू को "कार्ड" जैसा बनाने के लिए प्रॉपर्टी का उपयोग किया है। हम ड्रॉपडाउन को अन्य तत्वों के सामने रखने के लिए z-index का भी उपयोग करते हैं।
चरण 3) जावास्क्रिप्ट जोड़ें:
उदाहरण
/* When the user clicks on the button,
toggle between hiding and showing
the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
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');
}
}
}
}
राइट-अलाइन ड्रॉपडाउन
उदाहरण
नवबार में ड्रॉपडाउन मेनू
उदाहरण
खोज (फ़िल्टर) ड्रॉपडाउन
उदाहरण
युक्ति: ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे सीएसएस ड्रॉपडाउन ट्यूटोरियल पर जाएं।
युक्ति: होवर करने योग्य ड्रॉपडाउन के बारे में अधिक जानने के लिए हमारे होवरेबल ड्रॉपडाउन पर जाएं