Powerful Side Navigation Menu Plugin With jQuery - simpler-sidebar
File Size: | 176 KB |
---|---|
Views Total: | 5167 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Yet another jQuery sidebar navigation plugin which lets you create an animated, app-style, fully configurable off-canvas side menu for the desktop or mobile web pages.
Basic usage:
1. Include the jQuery simpler-sidebar plugin and other required JavaScript libraries on the webpage.
<script src="/path/to/jquery.min.js"></script> <script src="/path/to/jquery-ui.min.js"></script> <script src="jquery.simpler-sidebar.min.js"></script>
2. The html structure to create a sidebar navigation that will slide out from the right side of the browser.
<div class="main-sidebar main-sidebar-right" id="main-sidebar"> <div class="main-sidebar-wrapper" id="main-sidebar-wrapper"> <nav> <ul> <li class="close-sb"> <a href="#">Link (1)</a> </li> <li class="close-sb"> <a href="#">Link (2)</a> </li> <li class="close-sb"> <a href="#">Link (3)</a> </li> </ul> </nav> </div> </div>
3. Create a trigger element to toggle the sidebar navigation.
<div class="main-navbar main-navbar-fixed-top" id="main-navbar"> <div class="main-navbar-content"> <div class="icon right" id="toggle-sidebar"> <img alt="menu" height="24px" src="assets/[email protected]" width="24px"> </div> </div> </div>
4. The core CSS styles for the sidebar navigation.
.main-navbar { position: relative; background-color: #F44336; color: white; z-index: 10; } .main-navbar-fixed-top { position: fixed; top: 0; right: 0; left: 0; height: 42px; } .main-navbar-content { padding: 4px 16px; } .left { float: left; } .right { float: right; } .icon { position: relative; width: 32px; height: 32px; } .icon img { position: absolute; top: 4px; left: 4px; } .main-sidebar { position: fixed; top: 0; bottom: 0; background-color: #B71C1C; color: white; width: 300px; } .main-sidebar-right { right: 0; text-align: right; } .main-sidebar-wrapper { position: relative; height: 100%; overflow-y: auto; overflow-x: hidden; padding: 1em; }
5. Initialize the plugin and done.
$( "#main-sidebar" ).simplerSidebar( { selectors: { trigger: "#toggle-sidebar", quitter: ".close-sb" } });
6. All default options.
// The html attr that is added to specific elements in order to make them selecteble and tweakable. // Assign different values to attr if you run multiple instances. attr: "simplersidebar", // Add the amount of px used by the top navbar if you want the navbar to be always displayed. top: 0, // The gap in pixel between the window and the sidebar left side (or right according to the chosen align, ie: right-aligned side left, left-aligned right side). gap: 64, // The object that stores all available selectors. selectors { // This select the html item that will trigger the animation. // The item can be a menu icon for example. trigger: '', // By default it will select all `a` elements in the sidebar. // However you should choose assign a class to all elements in the sidebar that will trigger the closing animation, even links, in order to avoid using the `a` selector. quitter: 'a' }, zIndex: 3000, // All sidebar options. sidebar: { // The width musn't be overridden by common stylesheets on inline css. // If you want to change the sidebar width, just edit the amount in pixels. width: 300 }, // The object that stores all animations option. animation: { duration: 500, easing: "swing" }, // Changing these options will break the plugin events: { on: { animation: { open: function() {}, close: function() {}, both: function() {} } }, callbacks: { animation: { open: function() {}, close: function() {}, both: function() {}, freezePage: true } } }, // The *mask* is a div that will add an overlay to the content beneath the sidebar while the sidebar is opened. mask: { display: true, // A javascript object that stores all css attributes. // If you don't need to change the attributes above, use a simple stylesheet. css: { backgroundColor: "black", opacity: 0.5, filter: "Alpha(opacity=50)" } }
Change logs:
v2.2.5 (2018-03-06)
- Bugfix
v2.2.4 (2018-01-04)
- Fixed 'overflow: initial' causes IE's scrollbar to disappear forever
v2.2.3 (2017-11-14)
- Change the 'unfreezePage' value of 'overflow' to 'initial'.
v2.2.0 (2016-12-05)
- fix UMDjs IIFE, fix init-open scroll option, improvements
v2.1.4 (2016-08-09)
- Fix "init: opened" issue
v2.0.4 (2016-08-09)
- bugfix
2016-07-26
- Improved options list.
- Fix the multiple instances bug.
- Add the ability to set custom functions to run when/after all the animations are triggered.
- Add the ability to scroll the page when the sidebar is opened.
- Add more detailed and improved docs stored in the doc folder.
- Fix npm package, doc folder is now shipped.
This awesome jQuery plugin is developed by simple-sidebar. For more Advanced Usages, please check the demo page or visit the official website.