Slidebars

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. Try it now: open a Slidebar and resize your window to see how they behave.

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.

Download

Slidebars version 0.10.2 released July 3, 2014.

The original and minified versions are included in the download, along with basic templates, examples for mobile only, API usage, custom widths and animation styles. Be sure to read up the usage documentation/Italiano/日本手順.

Slidebars is released under the MIT license. It's free to use and abuse on any project, personal or commercial. If you use it please let me know, I'd love to see.

Download View on GitHub

You can also install via Bower

$ bower install Slidebars

If you're feeling generous, you could always tweet about #Slidebars, share or link to this page.

Whats New

0.10.2 Released July 3, 2014 Download 0.10.2

  • * Fixes an issue with scrolling locking when Slidebars are closed (thanks to Jay Padua).

0.10.1 Released June 27, 2014

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

0.10 Released June 24, 2014

  • 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

Version History

0.9.4 Released April 1, 2014

Fixes an issue which affected site locking and scrolling difficulty.

0.9.1, 0.9.2, 0.9.3

jQuery Plugin Registry and Bower fixes.

0.9 Released March 10, 2014

Version 0.9 features new animation styles, improved support for iOS < 5, increased API functions, and a few other bug fixes.

  • New push animation style, add modifier class .sb-style-push to a Slidebar.
  • New overlay animation style, add modifier class .sb-style-overlay to a Slidebar. See example.
  • New thin width, add modifier class .sb-width-thin to a Slidebar.
  • New wide width, add modifier class .sb-width-wide to a Slidebar.
  • Static Slidebars support for older versions of iOS which do not support position: fixed;
  • More API functions, return when Slidebars has been initiated, and if either Slidebar is open or closed.
  • Re-written window resize events.
  • Improved static Slidebars.
  • Improved inline min-height styling, to avoid additional spacing under site.
  • Fixed a bug where control classes couldn't be hidden using CSS.
  • Helper class html.sb-android has been depreciated, see below.
  • New helper class html.sb-static has been added, use this to un-fix your fixed elements for use on Android < 3 and iOS < 5.

With regret the Slidebars theme has been dropped from version 0.9. Slidebars wasn't ever really supposed to be about components, just a reliable cross-browser plugin for drawer/sliding functionality.

0.8.2 Released February 24, 2014

Event handling has been re-written in this update for better Android support. Also fixed an error where unnecessary space was added below the site content on a window resize.

0.8.1 Released February 17, 2014

Immediate update which fixes an error which caused Slidebars to fail when only one Slidebar was being used.

0.8 Released February 17, 2014

Just over a month after its initial release, Slidebars has had so much positive reception. It has been downloaded nearly 3,000 times, been listed as featured plugin on over 25 sites, starred on Github over 50 times, and forked 17 times. On this site, visitors have opened the Slidebars over 90,000 times!

If your using Slidebars, and would like to be featured on this site, please let me know. I'm assembling a list of Slidebars out in wild.

Version 0.8 has some great new features, and fully retains its compatibility.

  • 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.
  • 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 siteLock set to true or false, default: false. Locks site to prevent site scrolling when Slidebar is open. Alternatively you may also add class sb-lock the <html> .
  • You may now use class .sb-site-container instead of #sb-site .
  • The script no longer checks positions of site 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.

0.7.1 Released January 21, 2014

0.7 Released January 13, 2014

  • First public release.

Future Development

Below is a list of future development plans for the plugin. There are currently no expected dates. If you'd like to notified of when this plugin is updated, you can sign up to my mailing list.

  • WordPress Plugin
  • Top & bottom Slidebars
  • Swipe and drag control
  • Further API development
  • Clean up and further optimise code