Stylish Off-canvas Sidebar Plugin With jQuery - Sidebar.js
File Size: | 9.47 KB |
---|---|
Views Total: | 9767 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Sidebar.js is a lightweight and easy-to-use jQuery plugin that lets you create an off-screen, toggleable off-canvas sidebar for site navigation or control panels.
View more:
How to use it:
1. Include the jQuery sidebar.js plugin's JS and CSS on the webpage.
<link href="sidebar.css" rel="stylesheet"> <script src="//code.jquery.com/jquery.min.js"></script> <script src="sidebar.js"></script>
2. Wrap the sidebar and main content to a container element with an unique ID 'wrapper'
<div id="wrapper"> <aside id="side-wrapper"> ... Sidebar Content ... </aside> </div>
3. Create a trigger element inside the wrapper to toggle the sidebar.
<button type="button" data-toggle="sidebar">Sidebar Toggle</button>
4. Call the function on the '#wrapper' to active the plugin.
$('#wrapper').sidebar();
5. Customize the off-canvas sidebar with the following options.
$('#wrapper').sidebar({ // sidebar toggle toggler: '[data-toggle="sidebar"]', // CSS class for Wrapper when Sidebar is Collapsed minimized: 'minimized', // CSS class for Wrapper Transition animating: 'animating', // transition speed duration: 250, // auto collapse sidebar on small screens breakpoint: 768 });
This awesome jQuery plugin is developed by Ult-UX. For more Advanced Usages, please check the demo page or visit the official website.