jQuery Plugin To Create App-style Revealing Sidebars - Sidebar.js

Sidebar.js is a super tiny (~2kb) jQuery plugin that lets you create mobile app-style revealing sidebars (also known as off-canvas sidebar) for site navigation, drawer panels and any other side content.

How to use it:

1. Create left and right sidebars following the markup structure like this:

<div class="sidebar" id="sidebar">
  <div class="close">
    <a href="#" id="sidebar-close" class="btn-close">Close</a>
  </div>
  <div class="content">
    This is left sidebar
  </div>
</div>

<div class="sidebar" id="sidebar-right">
  <div class="close">
    <a href="#" id="sidebar-close" class="btn-close">Close</a>
  </div>
  <div class="content">
    This is right sidebar
  </div>
</div>

2. Create toggle buttons to reveal the sidebars.

<a href="#" id="open-left">Open Sidebar Left</a>
<a href="#" id="open-right">Open Sidebar Right</a>

3. Place jQuery library and the jQuery sidebar.js script at the end of the html document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/sidebar.js" defer></script>

4. The core CSS/CSS3 styles for the off-canvas sidebars.

.sidebar {
  position:fixed;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index:9990;
  max-width:300px;
  background:#fff;
  box-sizing:border-box;
  box-shadow:10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(-120%);
  transition:all .3s cubic-bezier(0.35, 0.38, 0.07, 0.83);
  overflow:auto;
}

.sidebar .close .btn-close {
  background: #cf2828;
  float: right;
  box-shadow: none;
}

.sidebar .close::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
}

.sidebar.right {
  left: initial;
  right: 0;
  box-shadow: -10px 0 30px rgba(0,0,0,0.15);
  transform: translateX(120%);
}

.sidebar.right .close .btn-close { float: left; }

.sidebar.active { transform: translateX(0); }

.sidebar .content { padding: 10px; }

.sidebar .content {
  line-height: 1.5;
  font-size: .875em;
}

---

This awesome jQuery plugin is developed by alexmicic. For more Advanced Usages, please check the demo page or visit the official website.