Navigation Bar in CSS

नेविगेशन बार या नेविगेशन सिस्टम GUI (Graphical user interface) के अंतर्गत आता है जो जानकारी तक पहुँचने में मदद करता है। यह वेब पेज पर UI element होता है जिसमें वेबसाइट के अन्य section के लिंक शामिल होते हैं। नेविगेशन बार ज्यादातर पेज के top पर लिंक की horizontal list के रूप में प्रदर्शित होता है। इसे logo या header के नीचे रखा जा सकता है, लेकिन इसे हमेशा वेबपेज के main content से पहले रखा जाना चाहिए।

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 */
}
error: Content is protected !!