W3.CSS साइडबार
W3.CSS वर्टिकल नेविगेशन बार्स
पार्श्व नेविगेशन के साथ, आपके पास कई विकल्प हैं:
- हमेशा पृष्ठ सामग्री के बाईं ओर नेविगेशन फलक प्रदर्शित करें
- एक संक्षिप्त, "पूरी तरह से स्वचालित" उत्तरदायी साइड नेविगेशन का उपयोग करें
- पृष्ठ सामग्री के बाएँ भाग पर खुला नेविगेशन फलक
- संपूर्ण पृष्ठ सामग्री पर खुला नेविगेशन फलक
- नेविगेशन फलक खोलते समय पृष्ठ सामग्री को दाईं ओर स्लाइड करें
- नेविगेशन फलक को बाईं ओर के बजाय दाईं ओर प्रदर्शित करें
हमेशा साइडबार प्रदर्शित करें
उदाहरण
<div class="w3-sidebar w3-bar-block" style="width:25%">
<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 style="margin-left:25%">
... page content ...
</div>
सामग्री के एक भाग पर साइडबार नेविगेशन खोलें
उदाहरण
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
सामग्री पर साइडबार नेविगेशन खोलें
उदाहरण
function w3_open() {
document.getElementById("mySidebar").style.width
= "100%";
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
बंधनेवाला उत्तरदायी साइड नेविगेशन
उदाहरण
<div class="w3-sidebar
w3-bar-block w3-collapse w3-card" style="width:200px;" id="mySidebar">
<button class="w3-bar-item
w3-button w3-hide-large"
onclick="w3_close()">Close ×</button>
<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 class="w3-main" style="margin-left:200px">
<div class="w3-teal">
<button class="w3-button w3-teal
w3-xlarge" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h1>My Page</h1>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
पृष्ठ सामग्री को दाईं ओर स्लाइड करें
उदाहरण
function w3_open() {
document.getElementById("main").style.marginLeft
= "25%";
document.getElementById("mySidebar").style.width
= "25%";
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("openNav").style.display
= 'none';
}
function w3_close() {
document.getElementById("main").style.marginLeft
= "0%";
document.getElementById("mySidebar").style.display
= "none";
document.getElementById("openNav").style.display
= "inline-block";
}
राइट साइडेड साइड नेविगेशन
उदाहरण
<div class="w3-sidebar
w3-bar-block" style="width:25%;right:0">
<h5 class="w3-bar-item">Menu</h5>
<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 style="margin-right:25%">
... page content ...
</div>
दाएं तरफा बंधने योग्य नेविगेशन
उदाहरण
<div class="w3-sidebar w3-bar-block w3-collapse" style="width:200px;right:0"
id="mySidebar">
<button class="w3-bar-item w3-button w3-hide-large"
onclick="w3_close()">Close
×</button>
<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 class="w3-main" style="margin-right:200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge
w3-right w3-hide-large" onclick="w3_open()">☰</button>
<div
class="w3-container">
<h2>My Page</h2>
</div>
</div>
</div>
<script>
function w3_open()
{
document.getElementById("mySidebar").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
लेफ्ट और राइट साइड नेविगेशन
उदाहरण
साइड नेविगेशन को स्टाइल करना
पृष्ठभूमि का रंग बदलने के लिए w3- रंग वर्ग को w3-साइडबार में जोड़ें । यदि आप एक सक्रिय/वर्तमान लिंक चाहते हैं, तो उपयोगकर्ता को यह बताने के लिए कि वह किस पृष्ठ पर है, किसी एक लिंक में w3- रंग वर्ग भी जोड़ें:
उदाहरण
<div class="w3-sidebar w3-red">
बॉर्डर साइड नेविगेशन
साइड नेविगेशन के चारों ओर बॉर्डर जोड़ने के लिए w3-बॉर्डर क्लास का उपयोग करें :
उदाहरण
<div class="w3-sidebar w3-border">
लिंक डिवाइडर बनाने के लिए लिंक में w3-सीमा-निचला वर्ग जोड़ें :
उदाहरण
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-border-bottom">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-border-bottom">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</div>
साइड नेविगेशन को कार्ड के रूप में प्रदर्शित करने के लिए w3-card वर्ग का उपयोग करें :
उदाहरण
<nav class="w3-sidebar w3-card">
मंडराने योग्य लिंक
जब आप बार ब्लॉक के अंदर लिंक पर माउस ले जाते हैं, तो पृष्ठभूमि का रंग ग्रे में बदल जाएगा।
यदि आप होवर पर एक अलग पृष्ठभूमि रंग चाहते हैं, तो किसी भी w3-होवर-रंग वर्ग का उपयोग करें:
उदाहरण
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-black">Link 1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-green">Link 2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-blue">Link 3</a>
</div>
आप डिफ़ॉल्ट होवर प्रभाव को w3-hover-none वर्ग के साथ बंद कर सकते हैं । इसका उपयोग अक्सर तब किया जाता है जब आप होवर पर केवल टेक्स्ट रंग (और पृष्ठभूमि रंग नहीं) को हाइलाइट करना चाहते हैं:
उदाहरण
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button w3-hover-none w3-hover-text-grey">Link
1</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-green">Link
2</a>
<a href="#"
class="w3-bar-item w3-button w3-hover-none w3-hover-text-teal">Link
3</a>
</div>
साइड नेविगेशन आकार
बढ़ा हुआ फ़ॉन्ट-आकार (w3-बड़ा आदि):
बढ़ी हुई गद्दी (w3- गद्दी आदि):
उदाहरण
<div class="w3-sidebar w3-bar-block w3-large">
<a href="#" class="w3-bar-item
w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#" class="w3-bar-item w3-button">Link</a>
</div>
प्रतीक के साथ साइड नेविगेशन
उदाहरण
<div class="w3-sidebar w3-bar-block w3-black" style="width:70px">
<a href="#"
class="w3-bar-item w3-button"><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>
</div>
ड्रॉपडाउन के साथ साइडबार
उदाहरण
<div class="w3-sidebar w3-bar-block">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<div
class="w3-dropdown-hover">
<button
class="w3-button">Dropdown
<i class="fa fa-caret-down"></i></button>
<div
class="w3-dropdown-content w3-bar-block">
<a href="#"
class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div>
Tip: When the dropdown menu is "open", the dropdown link gets a grey background color to indicate that it is active. To override this, add a w3-hover-color class to both the "dropdown" <div> and <a>.
Sidebar with Accordion
Example
<div class="w3-sidebar w3-light-grey w3-card" style="width:200px">
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<button class="w3-button w3-block w3-left-align" onclick="myAccFunc()">Accordion</button>
<div
id="demoAcc" class="w3-bar-block w3-hide w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
<div class="w3-dropdown-click">
<button class="w3-button" onclick="myDropFunc()">Dropdown</button>
<div
id="demoDrop" class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
<a href="#" class="w3-bar-item w3-button">Link</a>
<a href="#"
class="w3-bar-item w3-button">Link</a>
</div>
</div>
<a href="#" class="w3-bar-item
w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link
3</a>
</div>
Animated Sidebar
Use any of the w3-animate-classes to fade, zoom or slide in side navigation:
Example
<div class="w3-sidebar w3-animate-left">
Sidebar Overlay
The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation.
Example
<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="display:none;z-index:5" id="mySidebar">
<button
class="w3-bar-item w3-button"
onclick="w3_close()">Close</button>
<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>
<!-- Overlay -->
<div class="w3-overlay" onclick="w3_close()" style="cursor:pointer"
id="myOverlay"></div>
<!-- Page content -->
<button class="w3-button w3-xxlarge"
onclick="w3_open()">☰</button>
<div class="w3-container">
<h1>Sidebar Overlay</h1>
<p>Click on the "hamburger" icon to slide
in the side navigation.</p>
</div>
<!-- JS to
open and close sidebar with overlay effect -->
<script>
function
w3_open() {
document.getElementById("mySidebar").style.display
= "block";
document.getElementById("myOverlay").style.display
= "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
</script>
Sidebar Content
Add whatever you like inside the side navigation:
Example
<div class="w3-sidebar w3-bar-block w3-light-grey" style="width:50%">
<div
class="w3-container w3-dark-grey">
<h4>Menu</h4>
</div>
<img src="img_snowtops.jpg">
<a href="#"
class="w3-bar-item w3-button w3-red">Home</a>
<a href="#" class="w3-bar-item w3-button">Projects
<span
class="w3-tag w3-red w3-round w3-right">8</span>
</a>
<a href="#" class="w3-bar-item w3-button">About</a>
<a href="#"
class="w3-bar-item w3-button">Contact</a>
<div class="w3-panel w3-blue-grey
w3-display-container">
<span class="w3-button w3-display-topright">X</span>
<p>Lorem
ipsum box...</p>
</div>
</div>