Minimalist Side Push Menu With JavaScript

Preview:

Description:

This is a minimalist off-canvas push navigation which reveals a sidebar menu while pushing the main content to the right when activated. Built with CSS and a little bit of JavaScript.

How to use it:

Create a hamburger menu toggle button together with the side menu on the webpage.

<span class="open-side">
  <a href="#" onclick="openSideMenu()">
    <svg width="30" height="30">
      <path d="M0,5 30,5" stroke="#fff" stroke-width="5"/>
      <path d="M0,14 30,14" stroke="#fff" stroke-width="5"/>
      <path d="M0,23 30,23" stroke="#fff" stroke-width="5"/>
    </svg>
  </a>
</span>
<div id="side-menu" class="side-nav">
  <a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

Insert your main content into the document.

<div id="main">
  <h1>Side Menu</h1>
</div>

The primary CSS styles.

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  opacity: 0.9;
  overflow-x: hidden;
  padding-top: 60px;
  transition: 0.5s;
}
.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  font-size: 22px;
  color: #ccc;
  display: block;
  transition: 0.3s;
}
.side-nav a:hover { color: #008080; }
.side-nav .btn-close {
  position: absolute;
  top: 0;
  right: 22px;
  font-size: 36px;
  margin-left: 50px;
}
#main {
  transition: margin-left 0.5s;
  padding: 20px;
  overflow: hidden;
  width: 100%;
}

The main JavaScript to toggle CSS classes as you open/close the side menu.

function openSideMenu(){
  document.getElementById('side-menu').style.width ='250px';
  document.getElementById('main').style.marginLeft ='250px';
}
function closeSideMenu(){
  document.getElementById('side-menu').style.width ='0';
  document.getElementById('main').style.marginLeft ='0';
}