jQuery Plugins › jQuery Menu Plugins › jQuery Slidebars

Mobile App-Style Toggle Menu/Sidebar Plugin For jQuery - Slidebars

File Size: 13.9 KB
Views Total: 29423
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP 30 jQuery Plugins 2023

Chrome, IE7+, FireFox, Opera, Safari#Responsive#side menu#Sidebar#mobile menu
Mobile App-Style Toggle Menu/Sidebar Plugin For jQuery - Slidebars

Slidebars is a lite jQuery plugin that creates a responsive mobile app-style sidebar (side menu) sliding from left or right side or your web page/app when clicking the toggle link. Similar to the mobile off-canvas (off-screen) navigation. Check the demos in examples folder for more examples & usages.

Basic Usage:

1. Include the jQuery slidebars stylesheet file in the page.

<link rel="stylesheet" href="slidebars/slidebars.min.css">

2. Include the jQuery library and jQuery slidebars' script at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  
<script src="slidebars/slidebars.min.js"></script>

3. Create an Html element to toggle a left sidebar.

<span class="toggle-left">Toggle left Slidebar</span>

4. Create the html for the left sidebar content.

<div class="sb-slidebar sb-left"> 
Your left Slidebar content
</div>

5. Initialize the plugin.

<script>
$(document).ready(function() {
var mySlidebars = new $.slidebars();

$('.toggle-left').on('click', function() {
mySlidebars.toggle('left');
});

});
</script>

5. Options.

// true or false
// Enable closing of Slidebars by clicking on #sb-site.
siteClose: true, 

// true or false
// Prevent scrolling of site when a Slidebar is open.
scrollLock: false, 

// integer or false
// Hide Slidebars over a specific width.
disableOver: false, 

// true or false
// Hide controls at same width as disableOver.
hideControlClasses: false

Change logs:

v2.0.2 (2016-07-02)

  • NEW VERSION. Checkout the DEV folder for more examples.

v2.0 (2016-06-16)

  • NEW VERSION. Checkout the DEV folder for more examples.

v0.10.3 (2015-05-07)

  • Fixes an issue with with jQuery .animate() animation methods.

v0.10.2 (2014-07-03)

  • Fixes an issue with scrolling locking when Slidebars are closed 

v0.10.1 (2014-06-27)

  • Re-written close control class.
  • Fixes an issue with scrolling Slidebar menu items on touch devices.
  • Improved support for scroll locking on iOS.

v0.10.0 (2014-04-02)

  • Links in Slidebars no longer close the containing Slidebar before following the link. Instead add class .sb-close to the <a>, or the parent of <a> to close first.
  • Class .sb-disable-close has been depreciated, see above.
  • API rework. All API methods are now prefixed with .slidebars. For example yourVariable.slidebars.open('left');.
  • New API method .destroy(side). Removes Slidebar from the DOM.
  • New option scrollLock set to true or false, default: false. Prevents site scrolling when a Slidebar is open. Alternatively you may also add class sb-scroll-lock the <html>.
  • You may now use class .sb-site-container instead of #sb-site.
  • The script no longer checks positions of site container and Slidebar elements, or moves them if located incorrectly.
  • .NET compatible.
  • New modifier class .sb-momentum-scrolling for Slidebar elements that uses -webkit-overflow-scrolling: touch;.
  • Fixes an issue with minimum heights for site container.
  • Minimum heights are no longer set for screen sizes larger than disableOver (if provided).
  • Fixes issues with push and overlay styles on iOS 7.
  • Inactive Slidebars now use display: none; instead of visibility: hidden; to allow for native scrolling as above.
  • Inline styling removed after closing animation.
  • Fixes a bug with incorrect negative margins when using custom widths and push/overlay styles.
  • Fixes a bug where animation snapped open on Android < 4.3.

v0.9.4 (2014-04-02)

  • Fixes issue with site locking and scrolling difficulty.

v0.9.0 (2014-03-10)

v0.8.2 (2014-02-24)

  • Fixed an error which caused Slidebars to fail when only using one Slidebar. 

v0.8.1 (2014-02-18)

  • Fixed an error which caused Slidebars to fail when only using one Slidebar. 

v0.8 (2014-02-17)

  • Added Slidebars Theme! An optional theme which you are free to use and abuse. It features a top navigation bar, list menus in Slidebars with unlimited level of drop downs, widgets and other useful CSS snippets. You can find the theme usage here.
  • Mobile and tablet only support. Pass a width to option disableOver to disable Slidebars over a certain width screen.
  • Show/Hide the Slidebar control classes over the disabled width with option hideControlClasses.
  • You can now easily set custom widths for your Slidebars. Add modifier class .sb-width-custom to your Slidebar, and pass a pixel or percentage width as a data attribute data-sb-width.
  • New modifier class .sb-static. Add this class to your Slidebar to unfix it and scroll naturally with the site.
  • Removed touchend events from links in Slidebars for better scrolling support.
  • Reworked Control Class events to prevent tap and click events travelling down to elements in Slidebars.
  • Added another Slidebar width for screens between 480px and 768px.
  • Better Slidebar closing from clicking on the site.
  • Cleaned up code.
  • Further code comments.

This awesome jQuery plugin is developed by adchsm. For more Advanced Usages, please check the demo page or visit the official website.