कैसे बनाया जाता है: उठावी मेन्यू

CSS के द्वारा उठावी मेन्यू का उपयोग सीखें。

स्थिर उठावी मेन्यू बनाएं

एक उठावी मेन्यू बनाएं जो उपयोगकर्ता के माउस को एलीमेंट पर ले जाने पर दिखाया जाए।

पहला कदम - 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>

उदाहरण ब्याज:

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

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

बटन और <div> एलीमेंट को <div> के भीतर रखकर उठावी मेन्यू को CSS द्वारा सही तरीके से स्थापित करने के लिए उपयोग करें。

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

/* नीचे ड्रॉप बटन */
.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
/* डिवर के भीतर <div> - बारिश मेनू सामग्री को स्थानांतरित करने के लिए आवश्यक एलिमेंट */
.dropup {
  position: relative;
  display: inline-block;
}
/* बारिश मेनू सामग्री (डिफ़ॉल्ट में छुपा हुआ) */
.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;
}
/* नीचे लिंक */
.dropup-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* माउस ओवर करने पर नीचे लिंक का रंग बदलें */
.dropup-content a:hover {background-color: #ddd}
/* माउस ओवर करने पर बारिश मेनू दिखाएं */
.dropup:hover .dropup-content {
  display: block;
}
/* जब बारिश मेनू सामग्री दिखाई देती है, तो बारिश बटन के पृष्ठभूमि रंग को बदलें */
.dropup:hover .dropbtn {
  background-color: #2980B9;
}

अपने आप साफ़ी करें

उदाहरण ब्याज:

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

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

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

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

:hover चयनकर्ता यह दिखाता है कि उपयोगकर्ता उठाने वाले बटन पर माउस पर स्थित हो तब अप डाउन मेनू दिखाया जाए।