Building horizontal and vertical navigation w3-bar in Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में वेब डेवलपर w3-bar क्लास का यूज़ कर एक बेसिक से एडवांस नेविगेशन मेनू बार क्रिएट कर सकते है। w3-bar क्लास वेब डेवलपर को मौजूदा वेबपेज में हॉरिजॉन्टल और वर्टिकल दोनों तरह के नेविगेशन मेनू बार जिसमे वेबपेज हैडर फुटर और रेस्पॉन्सिव मोबाइल नेविगेशन मेनू बार क्रिएट के फीचर्स प्रोवाइड करते है, इसके साथ ही वेबपेज में डिस्प्ले होने वाले और नेविगेशन बार के डिफ़ॉल्ट मेथड को भी मैन्युअली कस्टमाइज़ कर सकते है।
Here’s how to create both top and bottom navigation menus on a webpage.
Horizontal Navigation Bar Top Navigation Concept in W3.CSS.
किसी यूजर डिफाइन वेबपेज में हॉरिजॉन्टल नेविगेशन मेनू बार का यूज़ सामान्य रूप से वेबपेज के टॉप या हेडर लोकेशन पर एक या एक से अधिक मेनू बार लिंक क्रिएट करने में किया जाता है। हैडर मेनू किसी वेबपेज के टॉप हैडर लोकेशन में डिस्प्ले होने वाले एक स्ट्रैट लाइन में लगे टेक्स्ट वेबपेज लिंक या बटन होते हैं, जिन्हे क्लिक करने पर एक लिंक या पेज ओपन होता है।
Basic horizontal navigation bar concept in W3.CSS.
W3.CSS वेब डेवलपर किसी वेबपेज में हॉरिजॉन्टल नेविगेशन मेनू बार को क्रिएट करने के लिए w3-bar क्लास का यूज़ कर सकते हैं. जिसमे नई क्रिएटेड नेविगेशन मेनू बार के अंदर किसी लिंक या बटन को डिस्प्ले करने के लिए w3-bar-item क्लास का यूज़ करते हैं।
Example of a basic horizontal navigation bar in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Horizontal Navigation Menu Bar in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-bar w3-black w3-arial w3-text-white”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
</body>
</html>
Explanation of a basic horizontal navigation bar in W3.CSS.
- w3-bar – यहाँ इस एक्साम्प्ल में यह एक नई हैडर नेविगेशन मेनू बार को क्रिएट करता है, जो इसके चाइल्ड एलिमेंट्स को एक स्ट्रैट लाइन में अरेंज कर डिस्प्ले करता है।
- w3-bar-item – यह क्लास मौजूदा वेबपेज में नेविगेशन बार में हर मेनू आइटम को डिफाइन करने के लिए हर नेविगेशन लिंक पर इसे अप्लाई करता है।
- w3-button – यह क्लास हर नेविगेशन लिंक में बटन जैसी स्टाइलिंग को ऐड करता है।
यह एक्साम्प्ल सिक्स लिंक्स वाला एक सिंपल, हॉरिजॉन्टल टॉप हैडर नेविगेशन मेनू बार क्रिएट करता है, जिसमे मेनू नाम होम, ब्लॉग, अबाउट अस, सर्विसेज़, कॉन्टैक्ट अस, और हेल्प मेनू है। डिफ़ॉल्ट रूप से, ये सभी मेनू आइटम एक कॉन्टिनियस सीक्वेंस में हॉरिजॉन्टली अलाइन होते हैं।
Horizontal Navigation Concept with Active State in W3.CSS.
किसी यूजर डिफाइन वेबपेज में वेब डेवलपर w3-active क्लास का यूज़ करके करंट वेबपेज या एक्टिव नेविगेशन मेनू बार लिंक को हाइलाइट कर डिस्प्ले कर सकते हैं। w3-active क्लास का यूज़ किसी वेबपेज में सामान्य रूप से यह इंडीकेट करने में किया जाता है कि मौजूदा वेबसाइट में इंटरनेट यूज़र अभी कौन सा वेबपेज व्यू या स्क्रॉल कर रहा है।
Example of a horizontal navigation menu bar with active state in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Horizontal Navigation Menu Bar with Active State In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-bar w3-indigo w3-text-aqua”>
<a href=”#” class=”w3-bar-item w3-button w3-active w3-yellow”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
</body>
</html>
Explanation of a horizontal navigation menu bar with active state in W3.CSS.
- w3-active – यहाँ इस एक्साम्प्ल में w3-active क्लास होम लिंक नेविगेशन मेनू को हाइलाइट करता है, जिससे कि यह पता चल सके कि अभी आप कोनसे वेबपेज पेज पर है।
Vertical Navigation Bar Sidebar Navigation Concept in W3.CSS.
W3.CSS में किसी यूजर डिफाइन वेबपेज में एक वर्टिकल नेविगेशन मेनू बार सामान्य रूप से किसी वेबपेज के लेफ्ट या राइट साइड डायरेक्शन की तरफ यूज़ किया जाता है. जिसे ज्यादातर वेबपेज वेबसाइट के “साइडबार” वर्टीकल मेनू के रूप में जाना जाता है। W3.CSS वेब डेवलपमेंट स्क्रिप्ट में, w3-vertical क्लास के साथ w3-bar क्लास को अप्लाई करके एक वर्टिकल मेन्यू क्रिएट किया जा सकता है।
Example of a basic vertical navigation menu bar in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Vertical Navigation Menu Bar In W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-sidebar w3-bar-block w3-indigo w3-card”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
<div style=”margin-left:210px; padding:10px;”>
<h2>Display Webpage Content Here </h2>
<p>Here you can use this area as main website webpage content area, and the navigation menu bar as sidebar is fixed on the left direction. </p>
</div>
</body>
</html>
Explanation of a basic vertical navigation menu bar in W3.CSS.
- w3-sidebar – यहाँ इस एक्साम्प्ल में यह क्लास वेबपेज एलिमेंट को साइडबार नेविगेशन मेनू बार के रूप में डिस्प्ले करता है. जो सामान्य रूप से किसी वेबपेज के लेफ्ट या राइट साइड डायरेक्शन में डिस्प्ले होता है।
- w3-bar-block – यह क्लास मौजूदा वेबपेज में यह फिक्स करता है कि नेविगेशन मेनू बार आइटम वर्टिकली आर्डर में स्टैंड या स्टैक्ड डिस्प्ले हों।
- w3-card – यह क्लास मौजूदा नेविगेशन मेनू साइडबार के चारों ओर एक शैडो इफ़ेक्ट को ऐड करता है, जिससे यह साइडबार अन्य वेबपेज कंटेंट से थोड़ा सा अलग डिस्प्ले हो।
इसमें डिज़ाइन साइडबार लेफ्ट साइड में डिस्प्ले होगा, जिसमें वेबपेज लिंक वर्टिकली स्टैक्ड आर्डर में एक के ऊपर एक प्रीव्यू होंगे। मेन वेबपेज कंटेंट एरिया राइट साइड की ओर शिफ्ट हो जाएगा, जिससे लेफ्ट में एक साइडबार के लिए अपने आप जगह बन जाएगी।
Responsive Horizontal Navigation Menu Bar in W3.CSS.
वेब डेवलपर W3.CSS वेब डेवलपमेंट स्क्रिप्ट की रिस्पॉन्सिव क्लास का यूज़ करके अपने हॉरिजॉन्टल नेविगेशन मेनू बार को रिस्पॉन्सिव बिहैवियर के साथ क्रिएट कर सकते हैं। जिससे यह डिज़ाइन वेबपेज मेनू को स्माल स्क्रीन डिवाइस गैजेट्स (जैसे स्मार्टफोन डिवाइस) पर वर्टिकली आर्डर में स्टैक प्रीव्यू किया जा सके और लार्ज डिवाइस जैसे डेस्कटॉप, लैपटॉप, टेबलेट स्क्रीन डिवाइस पर हॉरिजॉन्टली मेनू के रूप में डिस्प्ले होगा।
Example of a responsive horizontal navigation menu bar in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Responsive Navigation Menu Bar In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<div class=”w3-bar w3-yellow w3-large w3-hide-small”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
<div class=”w3-bar w3-red w3-large w3-hide-medium w3-hide-large”>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
</body>
</html>
Explanation of a responsive horizontal navigation menu bar in W3.CSS.
- w3-hide-small – यहाँ इस एक्साम्प्ल में यह क्लास डिज़ाइन मेनू स्माल स्क्रीन स्मार्टफोन डिवाइस पर टॉप नेविगेशन मेनू बार को हाईड करता है।
- w3-hide-medium and w3-hide-large– यह क्लास मौजूदा वेबपेज में नेविगेशन मेनू बार को सिर्फ़ मीडियम और लार्ज स्क्रीन डिवाइस साइज पर डिस्प्ले करता है।
- जबकि यह नेविगेशन मेनू बार स्माल स्क्रीन पर, नेविगेशन वर्टिकली स्टैक आर्डर में डिस्प्ले होगा।
- इसी आर्डर में मीडियम और लार्ज स्क्रीन डिवाइस पर, यह नेविगेशन मेनू बार हॉरिजॉन्टली आर्डर में डिस्प्ले होगा।
Collapsible Vertical Navigation Sidebar Menu Concept in W3.CSS.
वेब डेवलपर W3.CSS वेब डेवलपमेंट स्क्रिप्ट में कोलैप्सिबल वर्टिकल साइडबार क्रिएट करने के लिए, वेब डेवेलपर डिज़ाइन वेबपेज मेनू की डिफ़ॉल्ट विज़िबिलिटी को टॉगल करने के लिए w3-collapse क्लास और थोड़ी जावास्क्रिप्ट फंक्शन मेथड का यूज़ कर सकते हैं।
Example of a collapsible sidebar navigation menu bar in W3.CSS.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Let’s Explore Collapsible Sidebar Navigation Menu Bar In W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<script>
function toggleSidebar() {
var x = document.getElementById(“testSidebar”);
if (x.style.display === “none”) {
x.style.display = “block”;
} else {
x.style.display = “none”;
}
}
</script>
</head>
<body>
<!– Here we create a navigation menu sidebar –>
<div id=”testSidebar” class=”w3-sidebar w3-bar-block w3-indigo w3-card” style=”display:none;”>
<a href=”javascript:void(0)” class=”w3-bar-item w3-button” onclick=”toggleSidebar()”>Close Menu</a>
<a href=”#” class=”w3-bar-item w3-button”>Home</a>
<a href=”#” class=”w3-bar-item w3-button”>Blog</a>
<a href=”#” class=”w3-bar-item w3-button”>About Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Services</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Disclaimers</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
<!– Here we create button to open sidebar –>
<button class=”w3-button w3-pink” onclick=”toggleSidebar()”>Click Sidebar</button>
</body>
</html>
Explanation of a collapsible sidebar navigation menu bar in W3.CSS.
- w3-sidebar – यह क्लास मौजूदा वेबपेज में साइडबार नेविगेशन मेनू बार को क्रिएट करता है।
- style=”display:none;” – यह जावास्क्रिप्ट कोड स्टार्ट में साइडबार को हाईड करता है।
- toggleSidebar() – यहाँ जावास्क्रिप्ट बटन क्लिक करने पर मेनू साइडबार की विज़िबिलिटी को टॉगल करने के लिए एक सिंपल जावास्क्रिप्ट फ़ंक्शन दिया गया है।
जब वेब यूज़र “क्लिक साइडबार” बटन पर क्लिक करता है, तो साइडबार नेविगेशन लिंक के साथ डिस्प्ले होगा, और इसे वेबपेज में साइडबार के अंदर “क्लोज़ मेनू” लिंक पर क्लिक करके उसे क्लोज किया जा सकता है।
