#sidebar jquery

New Post has been published on http://www.htmluse.com/jquery-sidebar/

jQuery Sidebar

Download Demo

jQuery Sidebar is a stupid simple sidebar jQuery plugin.

1. INCLUDE JS FILES

<!-- Include jQuery --> <script src="path/to/jquery.min.js"></script> <!-- Include jQuery Sidebar --> <script src="path/to/jquery.sidebar.min.js"></script>

2. HTML

<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>

3. JAVASCRIPT

// 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");

4. ADVANCED

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

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: animation speed (default: 200)

side: left|right|top|bottom (default: “left”)

Return

jQuery The jQuery elements that were selected.