THE INDIA LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

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 »