Adding dropdown menus and sticky navigation In Hindi
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में किसी वेबसाइट वेबपेज में हैडर नेविगेशन मेनू बार में ड्रॉपडाउन मेनू क्रिएट कर और स्टिकी नेविगेशन मेनू इफ़ेक्ट को अप्लाई करने का एक इजी मेथड प्रोवाइड करता है. इसमें वेब डेवलपर अपने डिजायर वेबपेज में क्रिएटेड हैडर मेनू के लिए ड्रापडाउन मेनू एलिमेंट आइटम को क्रिएट कर वन बाय वन स्टैक के रूप में डिस्प्ले कर सकते है।
So, let’s take a closer look at how to implement these two features in your navigation bar using W3.CSS web development script.
Creating a Dropdown Menu in W3.CSS.
W3.CSS वेब डेवलपमेंट में ड्रॉपडाउन मेनू नेविगेशन लिंक को सबमेनू आइटम में क्रिएट कर ऑर्गनाइज़ ग्रुप करके वेबपेज में डिस्प्ले करने का एक इजी मेथड है। वेब डेवलपर इसे W3.CSS में पॉपुलर, w3-dropdown-click या w3-dropdown-content क्लासेज के साथ ड्रॉपडाउन मेनू आइटम को अप्लाई कर सकते है।
Example of a basic dropdown menu 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 Dropdown Menu Concept in W3.CSS </title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
</head>
<body>
<!– Here we create main menu navigation bar element –>
<div class=”w3-bar w3-indigo”>
<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>
<!– Here we create dropdown menu element for submenu–>
<div class=”w3-dropdown-click “>
<button class=”w3-bar-item w3-button”>Course</button>
<div class=”w3-dropdown-content w3-bar-block w3-card-4″>
<a href=”#” class=”w3-bar-item w3-button”>Python Course</a>
<a href=”#” class=”w3-bar-item w3-button”>Full Stack Development</a>
<a href=”#” class=”w3-bar-item w3-button”>Digital Marketing</a>
<a href=”#” class=”w3-bar-item w3-button”>Ai Agent Development</a>
</div>
</div>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
<script>
// here we implement JavaScript code for Dropdown menu implementation
document.querySelector(‘.w3-dropdown-click’).addEventListener(‘click’, function(event) {
var dropdown = event.currentTarget.querySelector(‘.w3-dropdown-content’);
dropdown.classList.toggle(‘w3-show’);
});
</script>
</body>
</html>
Explanation of a basic dropdown menu in W3.CSS.
- w3-dropdown-click – यहाँ इस एक्साम्प्ल में ये क्लास ड्रॉपडाउन मेनू बटन और कंटेंट को रैप कर डिस्प्ले करता है।
- w3-dropdown-content – यह मौजूदा वेबपेज में रियल ड्रॉपडाउन मेन्यू एलिमेंट है, जिसमें सब-मेनू आपस में लिंक होते हैं।
- w3-show – यह क्लास मौजूदा वेबपेज में क्लिक करने पर वेबपेज सबमेनु एलिमेंट आइटम ड्रॉपडाउन डिस्प्ले करने के लिए ऐड किया जाता है. यहाँ हम जावास्क्रिप्ट सोर्स कोड के माध्यम से ऐड कर इसे कर सकते है।
- JavaScript – जब इंटरनेट यूज़र “Course” बटन पर क्लिक करता है. तो यह यूजर को एक आसान स्क्रिप्ट ड्रॉपडाउन मेन्यू की विज़िबिलिटी को टॉगल करती है।
- जब वेबसाइट यूजर “Course” बटन पर क्लिक करते हैं, तो ड्रॉपडाउन सबमेनु के रूप में Python Course, Full Stack Development, Digital Marketing, और Ai Agent Development जैसे एक्स्ट्रा वेबपेज सबमेनु ऑप्शन डिस्प्ले करता है।
Sticky Navigation Concept in W3.CSS.
W3.CSS वेब डेवलपमेंट स्क्रिप्ट में जब इंटरनेट यूज़र वेबपेज हैडर मेनू को नीचे की तरफ स्क्रॉल करता है, तो कॉन्टिनियस वेबपेज मूव करने पर भी वेबपेज के टॉप पर एक स्टिकी नेविगेशन बार फिक्स और स्टेबल बना रहता है। W3.CSS स्क्रिप्ट में वेब डेवलपर को इस टास्क के लिए w3-sticky क्लास प्रोवाइड करता है, जिससे वेब डेवलपर अपने वेबपेज वेबसाइट में नेविगेशन मेनू बार आइटम सबमेनु को इजीली स्टिकी बना सकते हैं।
Example of a sticky 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 Sticky Navigation Menu Concept in W3.CSS</title>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
body {
font-family: times, sans-serif;
margin: 0;
padding: 0;
}
/* here we Add some content to the active webpage */
.content {
padding: 25px;
height: 2000px; /* here we increase webpage size long enough to scroll in top to bottom */
}
</style>
</head>
<body>
<!– Here we create main menu navigation bar sticky navigation element–>
<div class=”w3-bar w3-teal w3-sticky w3-top”>
<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”>Courses</a>
<a href=”#” class=”w3-bar-item w3-button”>Contact Us</a>
<a href=”#” class=”w3-bar-item w3-button”>Help</a>
</div>
<!– Here we can display webpage content area –>
<div class=”content”>
<h3>Now You Can Scroll Webpage Down to See Sticky Navigation Menu Baar Effect</h3>
<p>Once we create sticky menu in webpage after that if we scroll webpage from top to bottom header menu display stable sticky as top</p>
<p>If you want to see real sticky menu scrolling effect, just scroll the webpage. </p>
</div>
</body>
</html>
Explanation of a sticky navigation menu bar in W3.CSS.
- w3-sticky – यहाँ स्टिकी नेविगेशन मेनू बार एक्साम्प्ल में यह क्लास यह फिक्स करती है कि जब इंटरनेट यूज़र मौजूदा वेबसाइट वेबपेज में पेज को टॉप टू बॉटम स्क्रॉल करता है. तो वेबपेज के हैडर मेनू में नेविगेशन मेनू बार वेबपेज के टॉप पर फिक्स डिस्प्ले होती रहती है।
- w3-top – यह W3.CSS क्लास मौजूदा वेबपेज में नेविगेशन बार को वेबपेज के सबसे टॉप में फिक्स कर, दूसरे वेबपेज कंटेंट के ऊपर डिस्प्ले करता है।
- Webpage Content – मौजूदा वेबपेज में स्टिकी मेनू बार इफ़ेक्ट प्रीव्यू करने के लिए, वेबपेज में एक्स्ट्रा कंटेंट (ऊंचाई: 2000px के साथ) इसे डिफाइन किया गया है. जिससे कि इसे आसानी से मौजूदा वेबपेज में स्क्रॉल किया जा सके।
- जब इंटरनेट यूजर इस वेबपेज को नीचे की तरफ स्क्रॉल करते हैं, तो नेविगेशन मेनू बार स्क्रीन के टॉप पर स्टिकी फिक्स बना रहता है. जिससे यह नेविगेशन मेनू किसी भी वेबपेज में हर समय स्टिकी के रूप में एक्सेसिबल रहता है।
Sticky Navigation and Dropdown Menu Group Concepts in W3.CSS.
W3.CSS वेबपेज वेबसाइट डेवलपमेंट में वेब डेवलपर अधिक काम्प्लेक्स डायनैमिक और फंक्शनल वेबसाइट लेआउट डेवलप करने के लिए स्टिकी नेविगेशन मेनू और ड्रॉपडाउन मेनू दोनों को ग्रुप कर एक काम्प्लेक्स वेबपेज हैडर और सबमेनु क्रिएट कर सकते हैं।
यहाँ आपको एक एक्साम्प्ल दिया गया है, जिसमें आपको एक वेबपेज में नेविगेशन ड्राप डाउन मेनू बार और स्टिकी मेनू दोनों इफ़ेक्ट ग्रुप में दिए गए हैं।
Example of a sticky navigation menu bar with a dropdown menu 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 Sticky Navigation with Dropdown Menu in W3.CSS</title>
<!– here we connect W3.CSS cdn link–>
<link rel=”stylesheet” href=”https://www.w3schools.com/w3css/4/w3.css”>
<style>
body {
font-family: “Bookman Old Style”, sans-serif;
margin: 0;
padding: 0;
}
/* here we Add enough content to make the active webpage scrollable */
.content {
padding: 30px;
height: 1900px;
}
/* here we Make dropdown position correctly */
.dropdown-container {
position: relative;
}
</style>
</head>
<body>
<!– Here we create a sticky navigation menu –>
<div class=”w3-bar w3-pink w3-top”>
<!– Home Heder Menu Created –>
<a href=”#” class=”w3-bar-item w3-button”>
Home
</a>
<!– Blog Heder Menu Created –>
<a href=”#” class=”w3-bar-item w3-button”>
Blog
</a>
<!– About Us Heder Menu Created–>
<a href=”#” class=”w3-bar-item w3-button”>
About Us
</a>
<!– Here we create dropdown submenu item–>
<div class=”w3-dropdown-click dropdown-container”>
<button
onclick=”toggleDropdown()”
class=”w3-bar-item w3-button”>
Course ▾
</button>
<div
id=”courseDropdown”
class=”w3-dropdown-content w3-bar-block w3-card-4″>
<a href=”#” class=”w3-bar-item w3-button”>
O Level
</a>
<a href=”#” class=”w3-bar-item w3-button”>
A Level
</a>
<a href=”#” class=”w3-bar-item w3-button”>
B Level
</a>
<a href=”#” class=”w3-bar-item w3-button”>
C Level
</a>
</div>
</div>
<!– Contact Us Heder Menu Created–>
<a href=”#” class=”w3-bar-item w3-button”>
Contact Us
</a>
<!– Help Heder Menu Created–>
<a href=”#” class=”w3-bar-item w3-button”>
Help
</a>
</div>
<!– Here we can display webpage content area –>
<div class=”content”>
<h2>Now You Can Scroll Webpage Down to See Sticky Navigation Menu Baar Effect</h2>
<p>
Once we create sticky menu in webpage after that if we scroll webpage from top to bottom header menu display stable sticky as top
</p>
<p>
This Navigation menu bar contains a clickable dropdown course menu under
the “Course” header menu section.
</p>
<p>
If you want to see real sticky menu scrolling effect, just scrol the webpage.
</p>
</div>
<!– Here we implement JavaScript code for submenu–>
<script>
function toggleDropdown() {
var dropdown = document.getElementById(“courseDropdown”);
dropdown.classList.toggle(“w3-show”);
}
// here we close dropdown menu when clicking outside it
window.onclick = function(event) {
if (!event.target.matches(“.w3-button”)) {
var dropdown = document.getElementById(“courseDropdown”);
if (dropdown.classList.contains(“w3-show”)) {
dropdown.classList.remove(“w3-show”);
}
}
};
</script>
</body>
</html>
Explanation of a sticky navigation menu bar with a dropdown menu in W3.CSS.
- Sticky navigation – यहाँ इस एक्साम्प्ल में जब इंटरनेट यूज़र वेबपेज को स्क्रॉल करता है, तो वेबपेज में डिस्प्ले हैडर नेविगेशन बार स्क्रीन के टॉप पर स्टेबल फिक्स डिस्प्ले बना रहता है. यह सब इफ़ेक्ट w3-sticky और w3-top W3.CSS क्लास के यूज़ से होता है।
- Dropdown menu – इस एक्साम्प्ल में ड्रॉपडाउन सबमेनु फ़ंक्शनैलिटी w3-dropdown-click क्लास और थोड़ी सी जावास्क्रिप्ट सोर्स कोड से अप्लाई की जाती है. जिससे कि ड्रॉपडाउन मेनू आइटम की डिफ़ॉल्ट विज़िबिलिटी को वेबपेज में टॉगल किया जा सके।
