Building Horizontal and Vertical Navigation with w3-bar
Web developers can create basic to advanced navigation menu bars using the w3-bar class in W3.CSS web development scripts. The w3-bar class allows web developers to create both horizontal and vertical navigation menu bars on existing webpages, including webpage headers, footers, and responsive mobile navigation menu bars. It also allows them to manually customize the way navigation bars are displayed and the default navigation bar.
Here’s how to create both top and bottom navigation menus on a webpage.
Horizontal Navigation Bar Top Navigation Concept in W3.CSS.
A horizontal navigation menu bar in a user-defined webpage is typically used to create one or more menu bar links at the top or header location of a webpage. Header menus are webpage links or buttons displayed in a straight line of text at the top header location of a webpage, which, when clicked, open a link or page.
Basic horizontal navigation bar concept in W3.CSS.
W3.CSS web developers can use the w3-bar class to create a horizontal navigation menu bar on a webpage. They then use the w3-bar-item class to display links or buttons within the newly created navigation menu bar.
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 – In this example, it creates a new header navigation menu bar, displaying its child elements arranged in a straight line.
- w3-bar-item – This class is applied to every navigation link on the current webpage to define each menu item in the navigation bar.
- w3-button – This class adds button-like styling to every navigation link.
This example creates a simple, horizontal top header navigation menu bar with six links, with menu names Home, Blog, About Us, Services, Contact Us, and Help. By default, all of these menu items are aligned horizontally in a consistent sequence.
Horizontal Navigation Concept with Active State in W3.CSS.
In a user-defined webpage, web developers can highlight and display the current webpage or active navigation menu bar link by using the w3-active class. The w3-active class is commonly used in a webpage to indicate which webpage the internet user is currently viewing or scrolling through on the current website.
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 – In this example, the w3-active class highlights the home link navigation menu to indicate which webpage you are currently on.
Vertical Navigation Bar Sidebar Navigation Concept in W3.CSS.
In W3.CSS, a vertical navigation menu bar is typically used on the left or right side of a user-defined webpage. This is often referred to as a “sidebar” vertical menu on a webpage website. In W3.CSS web development scripts, a vertical menu can be created by applying the w3-vertical class along with the w3-bar class.
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 – In this example, this class displays a webpage element as a sidebar navigation menu bar, which is typically displayed on the left or right side of a webpage.
- w3-bar-block – This class determines in the current webpage whether navigation menu bar items are displayed vertically, standing or stacked.
- w3-card – This class adds a shadow effect around the existing navigation menu sidebar, making it appear slightly different from other webpage content.
The design sidebar will be displayed on the left, with webpage links previewed one above the other in a vertically stacked order. The main webpage content area will shift to the right, automatically creating space for a sidebar on the left.
Responsive Horizontal Navigation Menu Bar in W3.CSS.
Web developers can create their own horizontal navigation menu bar with responsive behavior using the Responsive class of the W3.CSS web development script. This design allows webpage menus to be previewed in a vertically ordered stack on small-screen devices (such as smartphones) and displayed as a horizontal menu on large devices such as desktops, laptops, and tablets.
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 – In this example, this class hides the top navigation menu bar on small-screen smartphone devices.
- w3-hide-medium and w3-hide-large – These classes display the navigation menu bar on the current webpage only on medium and large screen device sizes.
- While this navigation menu bar will be displayed on small screens, the navigation will be displayed in vertically stacked order.
- In the same order, on medium and large screen devices, this navigation menu bar will be displayed in horizontal order.
Collapsible Vertical Navigation Sidebar Menu Concept in W3.CSS.
To create a collapsible vertical sidebar in W3.CSS web development scripts, web developers can use the w3-collapse class and a small JavaScript function method to toggle the default visibility of the menu on the designed webpage.
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 a button to open the 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 – This class creates a sidebar navigation menu bar on the current webpage.
- style=”display:none;” – This JavaScript code hides the sidebar initially.
- toggleSidebar() – Here’s a simple JavaScript function to toggle the visibility of the menu sidebar when a JavaScript button is clicked.
When a web user clicks the “Click Sidebar” button, the sidebar will display with navigation links, and it can be closed by clicking the “Close Menu” link inside the sidebar on the webpage.
