jQuery Sidebar

Category: Drag & Drop, Layouts, Scroller, Slider, Slideshow 57 0
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.

 

Related Articles

Add Comment