A stupid simple sidebar jQuery plugin.
jQuery-Sidebar is available on CDNJS and you can use it like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
This library depends on:
Include the script file in your HTML page:
...
<!-- Include jQuery -->
<script src="path/to/jquery.min.js"></script>
<!-- Include jQuery Sidebar -->
<script src="path/to/jquery.sidebar.min.js"></script>
<!-- Or from CDNJS:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.2/jquery.sidebar.min.js"></script>
-->
...
<div class="sidebar left">Hello World</div>
<div class="sidebar right">I am on right!</div>
<div class="sidebar top">I am on top!</div>
<div class="sidebar bottom">I am on bottom!</div>
...
<script>
// Sidebar on left (default)
$(".sidebar.left").sidebar().trigger("sidebar:open");
// Sidebar on right side
$(".sidebar.right").sidebar({side: "right"});
// Sidebar on top side
$(".sidebar.top").sidebar({side: "top"});
// Sidebar on bottom side
$(".sidebar.bottom").sidebar({side: "bottom"});
</script>
...
Also, please note that you must write your own CSS code for the sidebars. You can find a CSS code example here.
Initialize sidebar on selected elements.
$(".my-sidebar").sidebar({...});
After the call above, you can programatically open/close/toggle the sidebar using:
$(".my-sidebar").trigger("sidebar:open");
$(".my-sidebar").trigger("sidebar:close");
$(".my-sidebar").trigger("sidebar:toggle");
$(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);
After the sidebar is opened/closed, sidebar:opened
/sidebar:closed
event is emitted.
$(".my-sidebar").on("sidebar:opened", function () {
// Do something on open
});
$(".my-sidebar").on("sidebar:closed", function () {
// Do something on close
});
- Object
options
: An object that will be merged with the default options. speed
(Number): animation speed (default:200
)side
(String): left|right|top|bottom (default:"left"
)isClosed
(Boolean): A boolean value indicating if the sidebar is closed or not (default:false
).close
(Boolean): Iftrue
, the sidebar will be closed by default.
- jQuery The jQuery elements that were selected.
To see the versions and the changes between them go to releases page.
Have an idea? Found a bug? See how to contribute.
See the LICENSE file.