Slidebars

Slidebars is a jQuery plugin for quickly and easily implementing app-style revealing, overlay and push 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 1469 bytes (js) & 499 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

Version History

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 .

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

0.7.1 Released January 21, 2014

  • Added Slidebars options .
  • Added helper class html.sb-android for Android Browser version 2.*. Can be used to unfix your elements with position fixed.
  • Added helper class .sb-disable-close . Apply to a link in a Slidebar to prevent it from closing on click.
  • Smoother jQuery .animate() animations on window resize events.
  • Cleaned up code.

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 .

  • Ajax Loading
  • WordPress Plugin
  • Top & bottom Slidebars
  • Swipe and drag control
  • Further API development
  • Clean up and further optimise code
Slidebars © 2013 - 2014 Adam Smith