jquery-sidebar

A stupid simple sidebar jQuery plugin.

Available on CDN! 🚢

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>

Usage

This library depends on:

• jQuery

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.

Documentation

sidebar(options)

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 });

Params

• 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): If true, the sidebar will be closed by default.

Return

• jQuery The jQuery elements that were selected.

Changelog

To see the versions and the changes between them go to releases page.

How to contribute

Have an idea? Found a bug? See how to contribute.

License

See the LICENSE file.