Android-like Sidebar Navigation with Pure JavaScript – Sidenav.js

Preview:

Description:

Sidenav.js is a pure JavaScript / CSS implementation of sidebar site navigation as you seen on Android Apps.

How to use it:

Create a DIV element for the fullscreen overlay when the sidebar navigation is open.

<div id="backdrop"></div>

Create the sidebar navigation.

<div id="sidenav">Hi sidenav</div>

Add a menu toggle button to the main content.

<div id="content">
  <button id="menu-toggle">Click to open</button>
</div>

Style the sidebar navigation.

.sn-backdrop {
  background: #000;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: none;
  opacity: 0;
  z-index: 50;
  will-change: opacity;
}
.sn-visible .sn-backdrop { display: block }
.sn-sidenav {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 100;
  overflow-y: auto;
  will-change: transform;
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  background-color: #3498DB;
  padding: 20px;
  color: #fff;
}
.sn-content {
  position: relative;
  z-index: 10
}
.sn-visible, .sn-visible body, .sn-visible .sn-content { overflow: hidden }

Include the sidenav.min.js at the bottom of the webpage.

<script src="dist/sidenav.min.js"></script>

Initialize the sidebar navigation.

"use strict";
var sidenav = new Sidenav({
  content: document.getElementById("content"),
  sidenav: document.getElementById("sidenav"),
  backdrop: document.getElementById("backdrop")
});
document.getElementById("menu-toggle").addEventListener("click", function() {
  sidenav.open();
});