W3.CSS ड्रॉपडाउन
W3.CSS ड्रॉपडाउन क्लासेस
W3.CSS निम्नलिखित ड्रॉपडाउन कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-ड्रॉपडाउन-होवर | एक होवर करने योग्य ड्रॉपडाउन तत्व |
| w3-ड्रॉपडाउन-सामग्री | प्रदर्शित होने वाला ड्रॉपडाउन भाग |
| w3-ड्रॉपडाउन-क्लिक करें | एक क्लिक करने योग्य ड्रॉपडाउन तत्व |
ड्रॉपडाउन तत्व
W3- ड्रॉपडाउन -होवर वर्ग एक होवर करने योग्य ड्रॉपडाउन तत्व को परिभाषित करता है।
W3- ड्रॉपडाउन-सामग्री वर्ग प्रदर्शित होने वाली ड्रॉपडाउन सामग्री को परिभाषित करता है।
उदाहरण
<div class="w3-dropdown-hover">
<button class="w3-button">Hover Over Me!</button>
<div class="w3-dropdown-content w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
होवर करने योग्य तत्व और ड्रॉपडाउन सामग्री तत्व दोनों कोई HTML तत्व हो सकते हैं।
ऊपर के उदाहरण में होवर तत्व एक <बटन> था, और ड्रॉपडाउन सामग्री एक <div> थी।
अगले उदाहरण में होवर तत्व एक <p> है, और ड्रॉपडाउन सामग्री एक <span> है:
उदाहरण
<p class="w3-dropdown-hover">Hover over me!
<span class="w3-dropdown-content w3-green">Hello World!</span>
</p>
मेनू ड्रॉपडाउन
w3- ड्रॉपडाउन-होवर वर्ग ड्रॉपडाउन मेनू के साथ नेविगेशन बार बनाने के लिए एकदम सही है:
उदाहरण
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link
1</a>
<div class="w3-dropdown-hover">
<button
class="w3-button">Dropdown</button>
<div
class="w3-dropdown-content w3-bar-block w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#"
class="w3-bar-item w3-button">Link
2</a>
<a href="#" class="w3-bar-item
w3-button">Link 3</a>
</div>
</div>
</div>
नोट: आप इस ट्यूटोरियल में बाद में नेविगेशन बार्स के बारे में और जानेंगे ।
क्लिक करने योग्य ड्रॉपडाउन
W3- ड्रॉपडाउन-क्लिक वर्ग एक क्लिक करने योग्य ड्रॉपडाउन तत्व बनाता है।
इस वर्ग के साथ, ड्रॉपडाउन जावास्क्रिप्ट द्वारा खोला जाता है:
उदाहरण
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
<div id="Demo" class="w3-dropdown-content
w3-bar-block w3-border">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
<script>
function myFunction() {
var x = document.getElementById("Demo");
if (x.className.indexOf("w3-show")
== -1) {
x.className += " w3-show";
} else {
x.className = x.className.replace(" w3-show", "");
}
}
</script>
छवि ड्रॉपडाउन
छवि पर माउस ले जाएँ:
उदाहरण
<div class="w3-dropdown-hover">
<img src="img_snowtops.jpg" alt="Norway" style="width:20%">
<div
class="w3-dropdown-content" style="width:300px">
<img src="img_snowtops.jpg"
alt="Norway" style="width:100%">
</div>
</div>
कार्ड ड्रॉपडाउन
नीचे दिए गए शहरों में से किसी एक पर माउस ले जाएँ:
लंदन इंग्लैंड की राजधानी है।
यह 9 मिलियन से अधिक निवासियों के महानगरीय क्षेत्र के साथ यूनाइटेड किंगडम का सबसे अधिक आबादी वाला शहर है।
Tokyo is the capital city of Japan.
13 million inhabitants.
उदाहरण
<div class="w3-dropdown-hover">London
<div class="w3-dropdown-content
w3-card-4" style="width:250px">
<img src="img_london.jpg"
alt="London" style="width:100%">
<div
class="w3-container">
<p>London is the
capital city of England.</p>
<p>It is the
most populous city in the UK.</p>
</div>
</div>
</div>
एनिमेटेड ड्रॉपडाउन
ड्रॉपडाउन सामग्री में फीका, ज़ूम या स्लाइड करने के लिए किसी भी w3-चेतन- वर्ग का उपयोग करें:
उदाहरण
<div class="w3-dropdown-click">
<button onclick="myFunction()"
class="w3-button">Click Me</button>
<div id="Demo"
class="w3-dropdown-content w3-bar-block w3-animate-zoom">
<a href="#"
class="w3-bar-item w3-button">Link
1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
राइट-एलाइन ड्रॉपडाउन
ड्रॉपडाउन को दाईं ओर फ़्लोट करने के लिए w3-right वर्ग का उपयोग करें । ड्रॉपडाउन सामग्री की स्थिति के लिए CSS का उपयोग करें ( दाएं: 0 ड्रॉपडाउन मेनू को बाएं से दाएं के बजाय दाएं से बाएं कर देगा):
उदाहरण
<div class="w3-dropdown-hover w3-right">
<button class="w3-button">Dropdown</button>
<div class="w3-dropdown-content
w3-bar-block w3-border" style="right:0">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>