सीएसएस ड्रॉपडाउन मेनू
- पिछला पृष्ठ सीएसएस होरिज़न्टल नेविगेशन बार
- अगला पृष्ठ सीएसएस इमेज लाइब्रेरी
कोर्स प्रस्तावित:
डिमोन्स्ट्रेशन: ड्रॉपडाउन का मामला
इंस्टांस
नीचे के उदाहरण पर माउस की निशानी ले जाएं:
बुनियादी ड्रॉपडाउन मेन्यू
जब उपयोगकर्ता एलीमेंट पर माउस को ले जाए, तो ड्रॉपडाउन बॉक्स दिखाई देगा।
इंस्टांस
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<div class="dropdown">
<span>माउस मुड़ाएं</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
उदाहरण बताया जाता है:
HTML
ड्रॉपडाउन मेन्यू सामग्री खोलने के लिए किसी भी एलीमेंट का उपयोग करें, जैसे <span> या <button> एलीमेंट।
ड्रॉपडाउन सामग्री को बनाने के लिए कंटेनर एलीमेंट (जैसे <div>) का उपयोग करें और उसमें किसी भी सामग्री को जोड़ें।
<div> एलीमेंट के द्वारा इन एलीमेंटों को घेरने, CSS का सही स्थानांतरण करें।
CSS
.dropdown क्लास का उपयोग करते हैं position:relativeसे ड्रॉपडाउन सामग्री को ड्रॉपडाउन बटन के नीचे रखने के लिए (से उपयोग position:absoluteसमय, इस क्लास का उपयोग करना चाहिए।
.dropdown-content क्लास वास्तविक ड्रॉपडाउन मेन्यू की सामग्री को सहेजती है। डिफ़ॉल्ट में यह छुपी हुई है और होवर के समय दिखाई देगी (देखें नीचे)। ध्यान दें किmin-width 160px रूप से सेट किया गया है। इस सेटिंग को किसी समय भी बदल सकते हैं। सुझाव: अगर आप चाहते हैं कि ड्रॉपडाउन की विस्तृतापि ड्रॉपडाउन बटन की विस्तृतापि के बराबर हो, तो विस्तृतापि 100％ (सेट overflow:auto स्माल स्क्रीन पर स्क्रॉल करने के लिए संभव है।
हमने CSS का उपयोग किया है box-shadow विशेषता, न कि किनारा, इस तरह ड्रॉपडाउन मेनू एक 'कार्ड' की तरह दिखता है。
जब उपयोगकर्ता माउस को ड्रॉपडाउन बटन पर ले जाए तो:hover चयनकर्ता को ड्रॉपडाउन मेनू दिखाने के लिए उपयोग किया जाता है。
ड्रॉपडाउन मेनू
एक ड्रॉपडाउन मेनू बनाएं, और उसे उपयोगकर्ता को सूची से एक विकल्प चुनने की अनुमति दें:
यह उदाहरण पिछले उदाहरण के समान है, सिवाय इसके कि हमने ड्रॉपडाउन बॉक्स में लिंक जोड़े हैं और उसे ड्रॉपडाउन बटन के शैली से मेल खाने के लिए शैली निर्धारित की है:
इंस्टांस
<style>
/* 设置下拉按钮的样式 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* 容器 <div> - 需要放置下拉内容 */
.dropdown {
position: relative;
display: inline-block;
}
/* 下拉内容（默认隐藏） */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
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: #f1f1f1}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {
display: block;
}
/* 显示下拉内容时，更改下拉按钮的बैगीचा रंग */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<a href="#">लिंक 1</a>
<a href="#">लिंक 2</a>
<a href="#">लिंक 3</a>
</div>
</div>
दायाँ समानता वाला ड्रॉपडाउन मेन्यू सामग्री
यदि आप चाहते हैं कि ड्रॉपडाउन मेन्यू दायाँ ओर से बाईं ओर की ओर जाए, तो जोड़ें राइट: 0;：
इंस्टांस
.dropdown-content {
राइट: 0;
}
अधिक उदाहरण
1 - ड्रॉपडाउन इमेज
ड्रॉपडाउन बॉक्स में इमेज और अन्य सामग्री कैसे जोड़ें।
इमेज पर माउस पॉइंटर लगाएं:
2 - ड्रॉपडाउन नेविगेशन
नेविगेशन बार में ड्रॉपडाउन मेन्यू कैसे जोड़ें।
- पिछला पृष्ठ सीएसएस होरिज़न्टल नेविगेशन बार
- अगला पृष्ठ सीएसएस इमेज लाइब्रेरी
