कैसे बनाया जाता है: स्थिति पर ड्रॉपडाउन मेन्यू

CSS के द्वारा ड्रॉपडाउन मेन्यू का स्थिति पर बनाना सीखें。

स्थिति पर ड्रॉपडाउन मेन्यू बनाएं

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

पहला कदम - एचटीएमएल जोड़ें:

<div class="dropdown">
  <button class="dropbtn">ड्रॉपडाउन</button>
  <div class="dropdown-content">
    <a href="#">लिंक 1</a>
    <a href="#">लिंक 2</a>
    <a href="#">लिंक 3</a>
  </div>
</div>

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

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

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

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

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

/* ड्रॉपडाउन बटन */
.ड्रॉपबटन {
  बैकग्राउंड-कलर: #04AA6D;
  कलर: श्वेत;
  पैडिंग: 16 पाइक्सल;
  फ़ॉन्ट-साइज़: 16 पाइक्सल;
  बॉर्डर: निर्दय;
}
/* कंटेनर<div> - ड्रॉपडाउन मेन्यू सामग्री के लिए स्थानीयकरण */
.ड्रॉपडाउन {
  पोजीशन: रिलेटिव;
  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;}
/* माउस हॉवर पर ड्रॉपडाउन मेनू दिखाए जाए */
.dropdown:hover .dropdown-content {display: block;}
/* ड्रॉपडाउन सामग्री दिखाने पर ड्रॉपडाउन बटन के पृष्ठभूमि रंग को बदला जाए */
.dropdown:hover .dropbtn {background-color: #3e8e41;}

खुद एक प्रयास करें

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

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

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

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

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

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

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

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

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