कैसे करें - ड्रॉपअप
CSS के साथ ड्रॉपअप मेनू बनाने का तरीका जानें।
ऊपर की ओर जाना
ड्रॉपअप मेनू एक टॉगल करने योग्य मेनू है जो उपयोगकर्ता को पूर्वनिर्धारित सूची से एक मान चुनने की अनुमति देता है:
एक होवरेबल ड्रॉपअप बनाएं
एक ड्रॉपअप मेनू बनाएं जो तब प्रकट होता है जब उपयोगकर्ता माउस को किसी तत्व पर ले जाता है।
चरण 1) HTML जोड़ें:
उदाहरण
<div class="dropup">
<button class="dropbtn">Dropup</button>
<div class="dropup-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) सीएसएस जोड़ें:
उदाहरण
/* Dropup Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
/* The
container <div> - needed to position the dropup content */
.dropup {
position: relative;
display:
inline-block;
}
/* Dropup content (Hidden by Default) */
.dropup-content {
display: none;
position:
absolute;
bottom: 50px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow:
0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the
dropup */
.dropup-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropup links on hover */
.dropup-content a:hover {background-color: #ddd}
/* Show the
dropup menu on hover */
.dropup:hover .dropup-content {
display: block;
}
/* Change the background color of the dropup button when the
dropup content is shown */
.dropup:hover .dropbtn {
background-color: #2980B9;
}
उदाहरण समझाया गया
हमने ड्रॉपअप बटन को बैकग्राउंड-कलर, पैडिंग आदि के साथ स्टाइल किया है।
.dropupवर्ग उपयोग करता है, जिसकी आवश्यकता तब position:relativeहोती है जब हम ड्रॉपअप सामग्री को ड्रॉपअप बटन के शीर्ष पर रखना चाहते हैं (का उपयोग करके position:absolute)।
.dropup-contentकक्षा वास्तविक ड्रॉपअप मेनू रखती है । यह डिफ़ॉल्ट रूप से छिपा होता है, और होवर पर प्रदर्शित किया जाएगा (नीचे देखें)। ध्यान दें कि min-width160px पर सेट है। इसे बदलने के लिए स्वतंत्र महसूस करें। युक्ति: यदि आप चाहते हैं कि ड्रॉपअप सामग्री की चौड़ाई ड्रॉपअप बटन जितनी चौड़ी हो, तो width100% पर सेट करें (और overflow:autoछोटी स्क्रीन पर स्क्रॉल सक्षम करने के लिए)।
बॉर्डर का उपयोग करने के बजाय, हमने box-shadowड्रॉपअप मेनू को "कार्ड" जैसा दिखने के लिए प्रॉपर्टी का उपयोग किया है। ड्रॉपअप को अन्य तत्वों के सामने रखने के लिए हम z-index का भी उपयोग करते हैं।
:hoverजब उपयोगकर्ता माउस को ड्रॉपअप बटन पर ले जाता है तो चयनकर्ता का उपयोग ड्रॉपअप मेनू दिखाने के लिए किया जाता है ।