W3.CSS नेविगेशन बार्स
खड़ा:
क्षैतिज:
W3.CSS नेविगेशन बार क्लासेस
W3.CSS नेविगेशन बार के लिए निम्नलिखित कक्षाएं प्रदान करता है:
| कक्षा | को परिभाषित करता है |
|---|---|
| w3-बार | HTML तत्वों के लिए क्षैतिज कंटेनर |
| w3-बार-ब्लॉक | HTML तत्वों के लिए लंबवत कंटेनर |
| w3-बार-आइटम | कंटेनर बार तत्व |
| w3-साइडबार | HTML तत्वों के लिए लंबवत साइडबार |
| w3-मोबाइल | किसी भी बार तत्व को मोबाइल के लिए सबसे पहले उत्तरदायी बनाता है |
| w3-ड्रॉपडाउन-होवर | होवर करने योग्य ड्रॉपडाउन तत्व |
| w3-ड्रॉपडाउन-क्लिक करें | क्लिक करने योग्य ड्रॉपडाउन तत्व (होवर के बजाय) |
बुनियादी नेविगेशन
W3-bar वर्ग HTML तत्वों को क्षैतिज रूप से प्रदर्शित करने के लिए एक कंटेनर है ।
W3- बार-आइटम वर्ग कंटेनर तत्वों को परिभाषित करता है।
नेविगेशन बार बनाने के लिए यह एक आदर्श उपकरण है:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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>
उत्तरदायी नेविगेशन
w3-mobile वर्ग किसी भी बार तत्वों को उत्तरदायी बनाता है ( बड़ी स्क्रीन पर क्षैतिज और छोटे पर लंबवत)।
मध्यम और बड़ी स्क्रीन:
छोटे पर्दे:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button w3-mobile">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
रंगीन नेविगेशन बार्स
नेविगेशन बार में रंग जोड़ने के लिए w3-रंग वर्ग का उपयोग करें :
उदाहरण
<div class="w3-bar w3-light-grey">
<div
class="w3-bar w3-green">
<div
class="w3-bar w3-blue">
सीमावर्ती नेविगेशन बार्स
नेविगेशन बार के चारों ओर बॉर्डर जोड़ने के लिए या इसे कार्ड के रूप में प्रदर्शित करने के लिए w3- सीमा या w3-कार्ड वर्ग का उपयोग करें :
उदाहरण
<div class="w3-bar w3-border w3-light-grey">
<div
class="w3-bar w3-border w3-card-4">
सक्रिय/वर्तमान लिंक
किसी लिंक को हाइलाइट करने के लिए उसमें w3-रंग वर्ग जोड़ें :
उदाहरण
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<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>
मंडराने योग्य लिंक
जब आप किसी बटन पर माउस ले जाते हैं, तो पृष्ठभूमि का रंग ग्रे में बदल जाएगा।
यदि आप होवर पर एक अलग पृष्ठभूमि रंग चाहते हैं, तो किसी भी w3-hover- रंग वर्ग का उपयोग करें:
उदाहरण
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button w3-hover-green">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-blue">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-teal">Link 3</a>
</div>
यदि आप इसके बजाय टेक्स्ट का रंग बदलना चाहते हैं, तो डिफ़ॉल्ट होवर प्रभाव को w3-hover-none क्लास के साथ बंद करें, और w3-hover-text क्लास जोड़ें।
उदाहरण
<div class="w3-bar w3-border w3-black">
<a href="#"
class="w3-bar-item w3-button">Default</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-hover-none w3-text-grey w3-hover-text-white">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-text-grey
w3-hover-text-white">Link 3</a>
</div>
विभिन्न होवर प्रभावों के साथ खेलने के लिए कुछ समय बिताएं:
उदाहरण
<div class="w3-bar">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-border-white w3-bottombar w3-hover-border-black">Link 3</a>
</div>
सही-संरेखित कड़ियाँ
किसी विशिष्ट लिंक को राइट-एलाइन करने के लिए सूची आइटम पर w3-right वर्ग का उपयोग करें :
उदाहरण
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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 w3-green w3-right">Link 3</a>
</div>
नेविगेशन बार का आकार
नेवबार के अंदर लिंक के फ़ॉन्ट-आकार को बदलने के लिए w3-आकार वर्ग का उपयोग करें :
उदाहरण
<div class="w3-bar w3-green w3-large">
<div class="w3-bar w3-green w3-xlarge">
नेवबार के अंदर प्रत्येक लिंक की पैडिंग बदलने के लिए w3-पैडिंग क्लास का उपयोग करें :
उदाहरण
<div class="w3-bar w3-border w3-green">
<a href="#" class="w3-bar-item w3-button w3-padding-16">Home</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-padding-16">Link 3</a>
</div>
नोट: आप प्रत्येक बटन के बजाय नेविगेशन बार में पैडिंग भी जोड़ सकते हैं। हालाँकि, यदि आप ऐसा करते हैं, तो ध्यान दें कि होवर पर लिंक्स को पूर्ण पैडिंग नहीं मिलती है:
उदाहरण
<div class="w3-bar w3-green w3-padding-16"></div>
CSS चौड़ाई संपत्ति के साथ लिंक की चौड़ाई को अनुकूलित करें
( नोट : छोटे स्क्रीन पर लिंक को 100% चौड़ाई में बदलने के लिए w3-mobile का उपयोग करें):
उदाहरण
<div class="w3-bar w3-dark-grey">
<a href="#"
class="w3-bar-item w3-button w3-mobile w3-green" style="width:33%">Home</a>
<a href="#" class="w3-bar-item w3-button w3-mobile"
style="width:33%">Link 1</a>
<a href="#" class="w3-bar-item
w3-button w3-mobile" style="width:33%">Link 2</a>
</div>
प्रतीक के साथ नेविगेशन बार
उदाहरण
<div class="w3-bar w3-light-grey w3-border">
<a href="#"
class="w3-bar-item w3-button w3-green"><i class="fa fa-home"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-search"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-globe"></i></a>
<a href="#" class="w3-bar-item w3-button"><i class="fa fa-sign-in"></i></a>
</div>
ऊपर दिए गए उदाहरण में "fa fa" वर्ग "विस्मयकारी फ़ॉन्ट" आइकन प्रदर्शित करते हैं।
W3.CSS Icons अध्याय में आइकन प्रदर्शित करने के तरीके के बारे में और जानें ।
नेविगेशन बार टेक्स्ट
यदि आप नेविगेशन बार के अंदर बटन के बजाय टेक्स्ट चाहते हैं, तो बटन के समान पैडिंग प्राप्त करने के लिए w3-bar-item क्लास का उपयोग करें।
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button">Home</a>
<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>
<span
class="w3-bar-item">Text</span>
</div>
इनपुट और बटन के साथ नेवबार
उदाहरण
<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>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<input type="text" class="w3-bar-item w3-input" placeholder="Search..">
<a href="#" class="w3-bar-item w3-button w3-green">Go</a>
</div>
ड्रॉपडाउन के साथ नेविगेशन बार
माउस को "ड्रॉपडाउन" लिंक पर ले जाएं:
उदाहरण
<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 class="w3-button" onclick="myFunction()">
Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div id="demo"
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>
क्षैतिज ड्रॉपडाउन मेनू
यदि आप चाहते हैं कि ड्रॉपडाउन लिंक लंबवत के बजाय क्षैतिज रूप से प्रदर्शित हों, तो ड्रॉपडाउन कंटेनर से w3-bar-block वर्ग को हटा दें:
उदाहरण
<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-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-mobile क्लास का इस्तेमाल करें।
प्रभाव देखने के लिए ब्राउज़र विंडो का आकार बदलें:
उदाहरण
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item
w3-button w3-mobile w3-green">Home</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-mobile">Link 2</a>
<div
class="w3-dropdown-hover w3-mobile">
<button
class="w3-button">Dropdown <i class="fa fa-caret-down"></i></button>
<div class="w3-dropdown-content w3-bar-block w3-dark-grey">
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-mobile">Link 3</a>
</div>
</div>
</div>
Fixed Navigation Bar
To force the navigation bar to stay at the top or at the bottom of the page, even when the user scrolls the page, wrap a <div> element around the bar and add the w3-top or w3-bottom class:
Fixed Top
<div class="w3-top">
<div class="w3-bar">
...
...
</div>
</div>
Fixed Bottom
<div class="w3-bottom">
<div class="w3-bar">
...
...
</div>
</div>
Vertical Navigation Bar
The w3-bar-block class is a container for displaying HTML elements vertically.
Example
<div class="w3-bar-block w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<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>
Collapsing the Navigation Bar
When the navigation bar takes up too much space on a small screen, and you do not want to display it vertically by default, you can use hide and show classes on specific links in the navigation bar.
In the example below, the navigation bar is replaced with a button (☰) in the top right corner when shown on tablets and mobile devices. When the button is clicked, the links in the navigation bar will vertically stack:
Example
Side Navigation
The w3-sidebar class creates a side navigation:
Go to the next chapter to learn more about the side navigation.