सीएसएस वर्टिकल नेविगेशन बार
लंबवत नेविगेशन बार
एक लंबवत नेविगेशन बार बनाने के लिए, आप पिछले पृष्ठ के कोड के अलावा, सूची के अंदर <a> तत्वों को स्टाइल कर सकते हैं:
उदाहरण
li a
{
display: block;
width: 60px;
}
उदाहरण समझाया:
display: block;- लिंक को ब्लॉक तत्वों के रूप में प्रदर्शित करना पूरे लिंक क्षेत्र को क्लिक करने योग्य बनाता है (केवल टेक्स्ट नहीं), और यह हमें चौड़ाई निर्दिष्ट करने की अनुमति देता है (और यदि आप चाहें तो पैडिंग, मार्जिन, ऊंचाई, आदि)width: 60px;- ब्लॉक तत्व डिफ़ॉल्ट रूप से उपलब्ध पूरी चौड़ाई लेते हैं। हम 60 पिक्सेल चौड़ाई निर्दिष्ट करना चाहते हैं
आप <ul> की चौड़ाई भी सेट कर सकते हैं, और <a> की चौड़ाई को हटा सकते हैं, क्योंकि ब्लॉक तत्वों के रूप में प्रदर्शित होने पर वे पूरी चौड़ाई उपलब्ध कराएंगे। यह हमारे पिछले उदाहरण के समान परिणाम देगा:
उदाहरण
ul
{
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li
a
{
display: block;
}
लंबवत नेविगेशन बार उदाहरण
ग्रे बैकग्राउंड कलर के साथ एक बेसिक वर्टिकल नेविगेशन बार बनाएं और जब यूजर उनके ऊपर माउस ले जाए तो लिंक्स का बैकग्राउंड कलर बदल दें:
उदाहरण
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
200px;
background-color: #f1f1f1;
}
li a {
display:
block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/*
Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
सक्रिय/वर्तमान नेविगेशन लिंक
उपयोगकर्ता को यह बताने के लिए वर्तमान लिंक में एक "सक्रिय" वर्ग जोड़ें कि वह किस पृष्ठ पर है:
उदाहरण
.active {
background-color: #04AA6D;
color: white;
}
केंद्र लिंक और सीमाएं जोड़ें
text-align:centerलिंक को बीच में रखने के लिए <li> या <a> में जोड़ें ।
संपत्ति जोड़ें border<ul> नेवबार के चारों ओर एक सीमा जोड़ें। यदि आप भी नेवबार के अंदर बॉर्डर चाहते हैं border-bottom, तो अंतिम को छोड़कर सभी <li> तत्वों में जोड़ें:
उदाहरण
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
पूर्ण-ऊंचाई स्थिर लंबवत नवबार
एक पूर्ण-ऊंचाई, "चिपचिपा" साइड नेविगेशन बनाएं:
उदाहरण
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:
25%;
background-color: #f1f1f1;
height: 100%; /* Full height */
position: fixed; /*
Make it stick, even on scroll */
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}
नोट: हो सकता है कि यह उदाहरण मोबाइल उपकरणों पर ठीक से काम न करे।