Adding dropdown menus and sticky navigation
W3.CSS web development scripts provide an easy method for creating a dropdown menu and applying a sticky navigation menu effect to a header navigation menu bar on a website. Web developers can create dropdown menu element items for the created header menu on their desired webpage and display them as a stack.
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.
Dropdown menus in W3.CSS web development are an easy method for displaying a dropdown menu on a webpage by creating and organizing and grouping navigation links into submenu items. Web developers can implement this with the popular W3.CSS classes, w3-dropdown-click, or w3-dropdown-content.
Example of a basic dropdown menu in W3.CSS.
This example indicates how web developers can create a basic dropdown menu in the navigation bar of a webpage.
<!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 the 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 – In this example, this class wraps and displays the dropdown menu button and content.
- w3-dropdown-content – This is the actual dropdown menu element in the current webpage, with submenus linked to each other.
- w3-show – This class is added to the current webpage to display the dropdown menu item when clicked. Here, we can do this by adding it via JavaScript source code.
- JavaScript – When an internet user clicks the “Course” button, a simple script toggles the visibility of the dropdown menu.
- When a website user clicks the “Course” button, the dropdown displays additional webpage submenu options such as Python Course, Full Stack Development, Digital Marketing, and AI Agent Development as submenus.
Sticky Navigation Concept in W3.CSS.
W3.CSS web development scripts keep a sticky navigation bar fixed and stable at the top of a webpage, even when the internet user scrolls down the webpage header menu, even when the webpage moves continuously. W3.CSS scripts provide the w3-sticky class for this task, allowing web developers to easily make the navigation menu bar item submenu sticky in their webpage websites.
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 the webpage content area –>
<div class=”content”>
<h3>Now You Can Scroll the Webpage Down to See the Sticky Navigation Menu Bar Effect</h3>
<p>Once we create the sticky menu in the webpage, if we scroll the webpage from top to bottom, the header menu displays a stable sticky effect</p>
<p>If you want to see the 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 – In the sticky navigation menu bar example here, this class ensures that when the internet user scrolls from top to bottom on the current website webpage, the navigation menu bar in the header menu of the webpage remains fixed and displayed at the top of the webpage.
- w3-top – This W3.CSS class fixes the navigation bar to the top of the current webpage, displaying it above others webpage content.
- Webpage Content – This class defines extra content (with a height: 2000px) in the current webpage to preview the sticky menu bar effect, allowing it to be easily scrolled within the current webpage.
- When internet users scroll down the webpage, the navigation menu bar remains sticky and fixed at the top of the screen, making the navigation menu accessible as sticky at all times on any webpage.
Sticky Navigation and Dropdown Menu Group Concepts in W3.CSS.
In W3.CSS webpage website development, web developers can create a complex webpage header and submenu by grouping both sticky navigation menus and dropdown menus to develop more complex, dynamic, and functional website layouts.
Here is an example of a webpage with a navigation drop-down menu bar and a sticky menu in both Effects groups.
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 Header Menu Created –>
<a href=”#” class=”w3-bar-item w3-button”>
Home
</a>
<!– Blog Header Menu Created –>
<a href=”#” class=”w3-bar-item w3-button”>
Blog
</a>
<!– About Us Header 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 Header Menu Created–>
<a href=”#” class=”w3-bar-item w3-button”>
Contact Us
</a>
<!– Help Header 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 scroll 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 – In this example, as the internet user scrolls through the webpage, the header navigation bar displayed on the webpage remains static and fixed at the top of the screen. This effect is achieved using the w3-sticky and w3-top W3.CSS classes.
- Dropdown menu – In this example, the dropdown submenu functionality is implemented using the w3-dropdown-click class and a bit of JavaScript source code to toggle the default visibility of dropdown menu items on the webpage.
