Tiny Off-canvas Menu with JavaScript and CSS3

Preview:

Description:

A mobile-friendly off-canvas push menu with a hamburger toggle button built using CSS3 and a little JavaScript magic.

How to use it:

Create an off-canvas sidebar menu following the markup as shown below.

<aside class="sidebar">
  <nav class="nav">
    <ul class="nav-items">
      <li class="nav-title">Pages</li>
      <li><a href="#" class="nav-link">Home</a></li>
      <li><a href="#" class="nav-link">Products</a></li>
      <li><a href="#" class="nav-link">Services</a></li>
      <li><a href="#" class="nav-link">About</a></li>
      <li><a href="#" class="nav-link">News</a></li>
    </ul>
  <div class="sidebar-separator"></div>
  <ul class="nav-items">
    <li class="nav-title">More</li>
    <li><a href="#" class="nav-link">Contact</a></li>
    <li><a href="#" class="nav-link">Support</a></li>
    <li><a href="#" class="nav-link">Careers</a></li>
  </ul>
  </nav>
</aside>

Create a hamburger button to toggle the off-canvas menu.

<div class="hamburger">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>

Wrap the main content together with the off-canvas menu and hamburger toggle button in a container. The whole markup structure should be like this:

<div class="container">
  <main class="main" role="main">
    Main Content Goes Here
  </main>
  <aside class="sidebar">
    <nav class="nav">
      <ul class="nav-items">
        <li class="nav-title">Pages</li>
        <li><a href="#" class="nav-link">Home</a></li>
        <li><a href="#" class="nav-link">Products</a></li>
        <li><a href="#" class="nav-link">Services</a></li>
        <li><a href="#" class="nav-link">About</a></li>
        <li><a href="#" class="nav-link">News</a></li>
      </ul>
    <div class="sidebar-separator"></div>
    <ul class="nav-items">
      <li class="nav-title">More</li>
      <li><a href="#" class="nav-link">Contact</a></li>
      <li><a href="#" class="nav-link">Support</a></li>
      <li><a href="#" class="nav-link">Careers</a></li>
    </ul>
    </nav>
  </aside>
  <div class="hamburger">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

The basic CSS styles.

html {
  box-sizing: border-box;
  overflow: hidden;
}
*, *:before, *:after { box-sizing: inherit; }
html, body { height: 100%; }
body {
  background: #fff;
  font-family: 'Roboto', sans-serif;
  line-height: 1.5em;
  color: #888;
}
.container {
  position: relative;
  overflow-x: hidden;
  height: 100%;
  width: 100%;
}

The CSS for the main content.

.main {
  height: 100%;
  position: relative;
  transition-property: transform;
}
.content { margin: 50px 50px; }

The CSS for the off-canvas sidebar menu.

.sidebar {
  position: fixed;
  z-index: 5;
  top: 0;
  left: 0;
  height: 100%;
  width: 260px;
  background: #1d2127;
  border-right: 3px solid #0f1114;
  overflow: hidden;
  -webkit-transform: translate3d(-260px, 0, 0);
  transform: translate3d(-260px, 0, 0);
  transition-property: transform;
}
.sidebar, .sidebar a { color: #abb4be; }
.nav { margin-top: 100px; }
.nav-items {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-title {
  display: block;
  padding: 10px 50px;
  text-transform: uppercase;
  font-weight: 600;
  color: #465162;
}
.nav-link {
  display: block;
  padding: 10px 50px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.nav-link:hover { background-color: #282d36; }
.sidebar-separator {
  margin: 30px;
  height: 2px;
  background-color: #000;
  border-bottom: 1px solid #2b313a;
}

The CSS for the hamburger toggle button.

.hamburger {
  display: block;
  position: fixed;
  left: 50px;
  top: 20px;
  cursor: pointer;
  z-index: 10;
  border-radius: 5px;
  background-color: #3498db;
  border: 2px solid #ddd;
  padding: 10px 7px;
  width: 50px;
  height: 46px;
  transition-property: background-color, border-color;
}
.bar {
  display: block;
  position: relative;
  background-color: #ddd;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  margin: 0 auto;
  transition-property: transform, opacity, background-color, width;
}
.bar:first-child { top: 0; }
.bar:nth-child(2) { opacity: 1; }
.bar:last-child { bottom: 0; }
.hamburger:hover { border-color: #fff; }
.hamburger:hover .bar { background-color: #fff; }
.bar + .bar { margin-top: 5px; }

The CSS to show the off-canvas sidebar menu.

.main, .sidebar, .hamburger, .bar {
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;
}
.show-sidebar .main {
  -webkit-transform: translate3d(260px, 0, 0);
  transform: translate3d(260px, 0, 0);
}
.show-sidebar .sidebar {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.show-sidebar .hamburger {
  background-color: #282d36;
  border-color: #0f1114;
}
.show-sidebar .bar { background-color: #abb4be; }
.show-sidebar .bar:first-child {
  width: 120%;
  -webkit-transform: rotate(45deg) translate(5px, 8px);
  transform: rotate(45deg) translate(5px, 8px);
}
.show-sidebar .bar:nth-child(2) { opacity: 0; }
.show-sidebar .bar:last-child {
  width: 120%;
  -webkit-transform: rotate(-45deg) translate(4px, -8px);
  transform: rotate(-45deg) translate(4px, -8px);
}

The core JavaScript.

var container = document.querySelector('.container');
var main = document.querySelector('.main');
function toggleSidebar(){
  isShowingSidebar() ? hideSidebar() : showSidebar();
}
function showSidebar(){
  container.classList.add('show-sidebar');
}
function hideSidebar(){
  container.classList.remove('show-sidebar');
}
function isShowingSidebar(){
  return container.classList.contains('show-sidebar');
}
document.querySelector('.hamburger').addEventListener('click', toggleSidebar, false);
container.addEventListener('click', function(e){
  if(isShowingSidebar() && main.contains(e.target)){
      e.preventDefault();
      hideSidebar();
  }
}, true);