This time I will share jQuery Plugin and tutorial about Stylish Off-canvas Sidebar Plugin With jQuery – Sidebar.js, hope it will help you in programming stack.
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.
1 |
<link href="sidebar.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="sidebar.js"></script> |
2. Wrap the sidebar and main content to a container element with an unique ID ‘wrapper’
2 |
<aside id="side-wrapper"> |
3 |
... Sidebar Content ... |
3. Create a trigger element inside the wrapper to toggle the sidebar.
1 |
<button type="button" data-toggle="sidebar">Sidebar Toggle</button> |
4. Call the function on the ‘#wrapper’ to active the plugin.
1 |
$('#wrapper').sidebar(); |
5. Customize the off-canvas sidebar with the following options.
01 |
$('#wrapper').sidebar({ |
04 |
toggler: '[data-toggle="sidebar"]', |
07 |
minimized: 'minimized', |
10 |
animating: 'animating', |
This awesome jQuery plugin is developed by Ult-UX. For more Advanced Usages, please check the demo page or visit the official website.
