Minimalist jQuery Sliding Sidebar Navigation

A jQuery & CSS based sliding off-canvas sidebar navigation that comes with a full window overlay covering the whole page when toggled. Click anywhere on the overlay will close the sidebar navigation.

How to use it:

1. Create the Html for a sidebar navigation that is hidden on page load.

<aside data-sidebar>
  <div class="padding">
  ...
  <a href="#" data-sidebar-button>Hide Sidebar</a>
  </div>
</aside>

2. Create a link to reveal the sidebar navigation.

<a href="#" data-sidebar-button>Show Sidebar</a>

3. Create an overlay to mask the main content as the sidebar navigation is open.

<div class="overlay" data-sidebar-overlay></div>

4. Load the necessary jQuery library and the jQuery Sliding Sidebar script at the bottom of your web page.

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="app.js"></script>

5. The core CSS styles.

[data-sidebar] {
 display: none;
 position: fixed;
 height: 100%;
 z-index: 100;
}

[data-sidebar-overlay] {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 opacity: 0;
 width: 100%;
 min-height: inherit;
}

6. Additional CSS styles to customize the sidebar navigation.

aside { background-color: #009688;}

.overlay { background-color: #ddd; }

---

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