Download
User Rating: 3/5 ( 1 votes)
Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.
Slidebars was born from a reoccurring need to create off-canvas sliding mobile menus for responsive design. It's ultra-light at 1555 bytes (js) & 660 bytes (css) when gzipped, uses hardware accelerated transitions where possible for quick and smooth animation, falling back to jQuery .animate() on un-supporting browsers.
Slidebars aren't just for handheld devices, they can be used for implementing revealing content on sites and screens of all sizes.
You can also add this site to your home screen, try it and see how it can make your web apps feel native.
Slidebars also handles orientation changes and resizes flawlessly.
Source: plugins.adchsm.me
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="slidebars/slidebars.css">
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Slidebars -->
<script src="slidebars/slidebars.js"></script>
2. HTML
<div id="sb-site">
<!-- Your main site content here. -->
</div>
<div class="sb-slidebar sb-left">
<!-- Your left Slidebar content. -->
</div>
<div class="sb-slidebar sb-right">
<!-- Your right Slidebar content. -->
</div>
3. JAVASCRIPT
(function($) {
$(document).ready(function() {
$.slidebars();
});
}) (jQuery);
4. OPTIONS
siteClose: true, // true or false - Enable closing of Slidebars by clicking on #sb-site.
scrollLock: false, // true or false - Prevent scrolling of site when a Slidebar is open.
disableOver: false, // integer or false - Hide Slidebars over a specific width.
hideControlClasses: false // true or false - Hide controls at same width as disableOver.