W3.CSS Case: Adding Navigation
Navigation Bars
A navigation bar is a navigation header that is placed at the top of the page.
Example
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav>
Try It Yourself »
Side Navigation
With side navigation, you have several options:
- Always display the navigation pane to the left of the page content.
- Open the navigation pane, hiding the left part of the page content.
- Open the navigation pane, hiding all of the page content.
- Shift the page content to the right, when opening the navigation pane.
This example opens the navigation pane, hiding a part of the page content:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript used to open and hide the menu:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Try It Yourself »
