This time I will share jQuery Plugin and tutorial about Simple Sliding Sidebar Panels with jQuery – Sidebar, hope it will help you in programming stack.
Sidebar is a simple lightweight jQuery plugin to create vertical or horizontal sidebars sliding out form any edge of your browser screen. Ideal for mobile app-style togglable sidebar menu to improve the content readability on small screen devices.
How to use it:
1. Include jQuery Javascript library and the jQuery sidebar plugin at the bottom of your document.
1 |
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> |
2 |
<script src="src/jquery.sidebar.js"></script> |
2. Create the content for your sidebar panel.
1 |
<div class="sidebar left"> |
3. Create a link to toggle the sidebar.
1 |
<a href="#" class="sidebar">Toggle</a> |
4. Bind the click event to the toggle link and trigger the open event on the sliding sidebar.
1 |
$(".sidebar").on("click", function () { |
2 |
$(".sidebar.left").sidebar().trigger("sidebar:open"); |
5. Style the sidebar panel whatever you like via CSS.
07 |
background: rgb(68, 68, 68, .9); |
10 |
box-shadow: 0 0 5px black; |
6. Available options.
01 |
$(".sidebar.right").sidebar({ |
7. Trigger events
2 |
$(".sidebar.left").sidebar().trigger("sidebar:open"); |
5 |
$(".sidebar.left").sidebar().trigger("sidebar:close"); |
8 |
$(".sidebar.left").sidebar().trigger("sidebar:toggle"); |
Change logs:
2015-09-17
2015-07-20
2015-04-29
2015-04-17
2014-12-26
This awesome jQuery plugin is developed by jillix. For more Advanced Usages, please check the demo page or visit the official website.
