How to create: Off-Canvas Menu

Create Off-Canvas Menu

Step 1 - 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, add all page content inside this div (if you only want the side navigation to stay at the top of the page, you do not need to use this setting) */
<div id="main">
  ...
</div>

Step 2 - Add CSS:

/* Side navigation menu */
.sidenav {
  height: 100%; /* 100% full height */
  width: 0; /* 0 width - this setting is changed by JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0;
  left: 0;
  background-color: #111; /* Black */
  overflow-x: hidden; /* Disable horizontal scrolling */
  padding-top: 60px; /* Content distance from the top is 60 pixels */
  transition: 0.5s; /* 0.5 second transition effect, sliding in the side navigation bar */
}
/* 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;
}
/* The 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 option */
#main {
  transition: margin-left .5s;
  padding: 20px;
}
/* Change the style of the side navigation bar on small screens with a screen height less than 450 pixels (reduce padding and font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

Step 3 - Add JavaScript:

Canvas outside menu

/* Set the width of the side navigation to 250px, and the left 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, and the left 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 also slides the side navigation bar into place and pushes the page content to the right. However, this time we add a semi-transparent (40% opacity) black background color to the body element to "highlight" the side navigation bar:

Transparent canvas outside menu

/* 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 the width of the side navigation to 0, the left margin of the page content to 0, and the background color of the body to white */
function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
}

Try It Yourself

Related Pages

Tutorial:CSS Navigation Bar