Animated Sidebar Navigation with JavaScript and CSS

Preview:

Description:

A JavaScript & CSS based sidebar interaction concept for easily creating an off-canvas sidebar navigation that you can hide/show based on user actions.

How to use it:

Create the sidebar navigation.

<div id="box">
  <div id="items">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
  </div>
</div>

Create a hamburger button to toggle the sidebar navigation.

<div id="btn">
  <div id="top"></div>
  <div id="middle"></div>
  <div id="bottom"></div>
</div>

Add page content to a container called ‘main-content’.

<div id="main-content">
  Main Content goes here
</div>

The primary CSS for the sidebar navigation.

#main-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#box {
  position: fixed;
  z-index: 4;
  overflow: auto;
  top: 0px;
  left: -275px;
  width: 275px;
  opacity: 0;
  padding: 20px 0px;
  height: 100%;
  background-color: #f6f6f6;
  color: #343838;
  -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#box.active {
  left: 0px;
  opacity: 1;
}
#items {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
#items .item {
  position: relative;
  cursor: pointer;
  font-size: 2em;
  padding: 15px 30px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
}
#items .item:hover {
  padding: 15px 45px;
  background-color: rgba(52, 56, 56, 0.2);
}

Style & animate the hamburger button.

#btn {
  position: fixed;
  z-index: 5;
  top: 15px;
  left: 15px;
  cursor: pointer;
  -webkit-transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
  transition: left 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91);
}
#btn div {
  width: 35px;
  height: 2px;
  margin-bottom: 8px;
  background-color: #00DFFC;
  -webkit-transition: -webkit-transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
  transition: transform 500ms cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 500ms, box-shadow 250ms, background-color 500ms;
}
#btn:hover > div { box-shadow: 0 0 1px #00DFFC; }
#btn.active { left: 230px; }
#btn.active div { background-color: #343838; }
#btn.active:hover > div { box-shadow: 0 0 1px #343838; }
#btn.active #top {
  -webkit-transform: translateY(10px) rotate(-135deg);
  -ms-transform: translateY(10px) rotate(-135deg);
  transform: translateY(10px) rotate(-135deg);
}
#btn.active #middle {
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}
#btn.active #bottom {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

The JavaScript to enable the sidebar navigation.

var sidebarBox = document.querySelector('#box');
var sidebarBtn = document.querySelector('#btn');
var pageWrapper = document.querySelector('#main-content');
sidebarBtn.addEventListener('click', function(event) {
  if (this.classList.contains('active')) {
      this.classList.remove('active');
      sidebarBox.classList.remove('active');
  } else {
      this.classList.add('active');
      sidebarBox.classList.add('active');
  }
});
pageWrapper.addEventListener('click', function(event) {
  if (sidebarBox.classList.contains('active')) {
      sidebarBtn.classList.remove('active');
      sidebarBox.classList.remove('active');
  }
});
window.addEventListener('keydown', function(event) {
  if (sidebarBox.classList.contains('active') && event.keyCode === 27) {
      sidebarBtn.classList.remove('active');
      sidebarBox.classList.remove('active');
  }
});