How to Create: Side Navigation

Create a side navigation with animation effects

First step - Add HTML:

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<!-- Use any element to open the side navigation -->
<span onclick="openNav()">open</span>
<!-- If you want the side navigation to push the page content to the right, place all page content inside this div (if you only want the side navigation to stay at the top of the page, do not use this setting) -->
<div id="main">
  ...
</div>

Second step - Add CSS:

/* Side navigation menu */
.sidenav {
  height: 100%; /* 100% full height */
  width: 0; /* 0 width - This setting is changed using JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scrolling */
  padding-top: 60px; /* Place the content 60px from the top */
  transition: 0.5s; /* 0.5-second transition effect, used for sliding display of the side navigation */
}
/* 导航菜单链接The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}
/* Change the color when the mouse hovers over the navigation link */
.sidenav a:hover {
  color: #f1f1f1;
}
/* Position and style of the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Set the style of the page content - if you want to push the page content to the right when the side navigation is opened, use this setting. */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Change the style of the side navigation on small screens with a height less than 450px (reduce the inner padding and font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Step 3 - Add JavaScript:

In the following example, the side navigation will slide in and its width is set to 250px:

Side navigation overlay example

/* Set the width of the side navigation to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
}
/* Set the width of the side navigation to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Try It Yourself

In the following example, the side navigation will slide in and push the page content to the right (the value used to set the width of the side navigation is also used to set the left outer margin of the "page content"):

Side navigation pushes the content

/* Set the width of the side navigation to 250px, the left outer margin of the page content to 250px */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
}
/* Set the width of the side navigation to 0, the left outer margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}

Try It Yourself

The following example will also slide in the side navigation and push the page content to the right. However, this time, we add a 40% black background opacity to the body element to "highlight" the side navigation.

A side navigation with opacity pushes the content

/* Set the width of the side navigation to 250px, the left outer margin of the page content to 250px, and add a black background color to the body */
function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
/* Set side navigation width to 0, page content left margin to 0, body background color to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Try It Yourself

In the following example, the side navigation will slide in from the left and cover the entire page (width 100%):

Full-width side navigation:

/* Open side navigation */
function openNav() {
  document.getElementById("mySidenav").style.width = "100%";
}
/* Close/Hide side navigation */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
}

Try It Yourself

The following example shows how to open and close the side navigation menu without animation effects.

Sidenav without animation

/* Open side navigation */
function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}
/* Close/Hide side navigation */
function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

Try It Yourself

The following example shows how to create a right side navigation menu:

Right side navigation:

.sidenav {
  right: 0;
}

Try It Yourself

The following example shows how to create a side navigation menu that is always displayed (fixed position):

Always displayed side navigation:

/* Side navigation */
.sidenav {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}
/* Page content */
.main {
  margin-left: 200px; /* With the same width as the side navigation */
}

Try It Yourself

Related Pages

Tutorial:CSS Navigation Bar