What is Navigation Bar
नेविगेशन बार या नेविगेशन सिस्टम GUI (Graphical user interface) के अंतर्गत आता है जो जानकारी तक पहुँचने में मदद करता है। यह वेब पेज पर UI element होता है जिसमें वेबसाइट के अन्य section के लिंक शामिल होते हैं। नेविगेशन बार ज्यादातर पेज के top पर लिंक की horizontal list के रूप में प्रदर्शित होता है। इसे logo या header के नीचे रखा जा सकता है, लेकिन इसे हमेशा वेबपेज के main content से पहले रखा जाना चाहिए।
किसी भी वेबसाइट में आसान नेविगेशन होना महत्वपूर्ण है। यह वेबसाइट में एक महत्वपूर्ण भूमिका निभाता है क्योंकि यह visitors को किसी भी section में जल्दी से जाने की अनुमति देता है।
आइए horizontal navigational bar और vertical navigational bar के बारे में विस्तार से चर्चा करें।
Horizontal Navigation Bar
Horizontal navigational bar लिंक की Horizontal लिस्ट है, जो आमतौर पर पेज के शीर्ष पर होती है। आइए देखें कि एक उदाहरण का उपयोग करके horizontal navigational bar कैसे बनाया जाए।
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
Border Dividers
हम border-right property का उपयोग करके नेविगेशन बार में लिंक के बीच की border को जोड़ सकते हैं।
Example
/* Add a gray right border to all list items, except the last item (last-child) */
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
Fixed Navigation bars
जब हम पेज को स्क्रॉल करते हैं, तो फिक्स्ड नेविगेशन बार पेज के नीचे या ऊपर रहते हैं। इसका एक उदाहरण देखिए।
Fixed Top
ul {
position: fixed;
top: 0;
width: 100%;
}
Fixed Bottom
ul {
position: fixed;
bottom: 0;
width: 100%;
}
Sticky Navbar
Position: sticky; property का उपयोग user की scroll position के आधार पर element की position के लिए किया जाता है।
जब Scroll एक निश्चित बिंदु तक पहुंचता है तब CSS, property element को sticky की अनुमति देती है। Scroll position के आधार पर, sticky element fixed और relative property के बीच टॉगल करता है।
Example
ul {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Vertical Navigation bar
इस उदाहरण में, हम यह देखने जा रहे हैं कि वर्टिकल नेविगेशन बार कैसे बनाया जाता है।
Example
li a {
display: block;
width: 60px;
}
Example Explain
Display: block; – लिंक को block element के रूप में प्रदर्शित करना पूरे link area को क्लिक करने योग्य बनाता है (टेक्स्ट नहीं), और यह हमें चौड़ाई निर्दिष्ट करने की अनुमति देता है (और यदि आप चाहें तो पैडिंग, मार्जिन, ऊंचाई, आदि ले सकते हैं)
Width: 60 px; – Block element डिफ़ॉल्ट रूप से उपलब्ध पूरी चौड़ाई लेते हैं। लेकिन हम 60 पिक्सेल चौड़ाई निर्दिष्ट करना चाहते हैं
आप <ul> की width भी सेट कर सकते हैं, और <a> की width को हटा सकते हैं, क्योंकि वे block element के रूप में प्रदर्शित होने पर उपलब्ध पूरी width ले लेंगे।
Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
}
Vertical Navigation Bar Examples
ग्रे बैकग्राउंड कलर के साथ एक बेसिक वर्टिकल नेविगेशन बार बनाएं और जब यूजर उनके ऊपर माउस ले जाए तो लिंक्स का बैकग्राउंड कलर बदल दें:
Example
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/Current Navigation Link
Active/Current Navigation Link यूजर को यह बताता हैं की यूजर किस पेज पर है:
Example
.active {
background-color: #04AA6D;
color: white;
}
Center Links & Add Borders
Add text-align:center: लिंक को center में रखने के लिए <li> या <a> का प्रयोग किया जाता हैं|
Example
ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;
}
Full-height Fixed Vertical Navbar
Example
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 */
}