Minimalist jQuery Sliding Sidebar Navigation
File Size: | 3.53 KB |
---|---|
Views Total: | 9574 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.