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.