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 |

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)
- version update.
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.