jQuery Off-screen Slide-Out Navigation Panel Plugin - bigSlide
File Size: | 22.1 KB |
---|---|
Views Total: | 22133 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

bigSlide is a jQuery menu plugin for creating an off-screen side panel navigation that slides out from the left side of your page and 'pushes' the body content to the right.
How to use it:
1. Create the html for the side panel navigation menu.
<nav id="menu" class="panel" role="navigation"> <ul> <li><a href="https://www.jqueryscript.net/" title="jQueryScript Home">Home</a></li> <li><a href="https://www.jqueryscript.net/jquery-plugins/" title="Latest & Recent Update jQuery Plugins">Latest jQuery Plugins</a></li> <li><a href="https://www.jqueryscript.net/popular/" title="Most popular jQuery Plugins">Most Popular Plugins</a></li> <li><a href="https://www.jqueryscript.net/recommended/" title="Recommended jQuery Plugins">Recommended Plugins</a></li> <li><a href="https://www.jqueryscript.net/submit/" rel="nofollow">Publishing Your Plugin</a></li> <li><a href="https://www.jqueryscript.net/blog/" title="jQueryScript Blog">Blog</a></li> </ul>
2. Create a link to trigger the slide-out navigation effect.
<div class="push"> <a href="#menu" class="menu-link">☰</a>
3. Load the jQuery javascript library and bigslide.js on your web page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="dist/bigSlide.js"></script>
4. Call the plugin and we're done.
<script> $(document).ready(function() { $('.menu-link').bigSlide(); }); </script>
5. Default Options.
var settings = $.extend({ // menu selector 'menu': ('#menu'), // trigger selector 'push': ('.push'), // shrink the main container div instead of only pushing it 'shrink': ('.shrink'), // The side of the navigation menu (either 'right' or 'left') 'side': 'left', // the width of your menu 'menuWidth': '15.625em', // animation speed 'speed': '300', 'state': 'closed', // CSS class added to the menu button when it is open 'activeBtn': 'active', // allow users to toggle the menu closed with any click 'easyClose': false, // save open/close state 'saveState': false, }, options);
6. Callback functions.
'beforeOpen': function () {}, 'afterOpen': function() {}, 'beforeClose': function() {}, 'afterClose': function() {}
7. Customize menu aspect simply by changing it's CSS.
Change logs:
v0.12.0 (2016-08-02)
- Use addBack instead of deprecated andSelf
v0.11.0 (2016-04-14)
- Applying styles for open and closed in separated functions
v0.10.0 (2016-03-31)
- Save state functionality and state option working both for closed and open values
v0.9.4 (2016-03-28)
- Save state functionality and state option working both for closed and open values
v0.9.3 (2015-11-05)
- bugfix
v0.9.2 (2015-10-23)
- update.
v0.9.1 (2015-06-20)
- update.
v0.8.2 (2015-05-20)
- update.
v0.7.1 (2015-03-27)
- enable active button class option
v0.6.1 (2015-02-13)
- enable easyClose feature
v0.6.1 (2015-02-13)
- fix plugin side option
v0.6.0 (2015-02-11)
- correctly bind touch and click events
v0.5.1 (2014-09-13)
- update to the latest version.
v0.4.0 (2014-01-25)
- update to the latest version.
v0.4.0 (2013-12-19)
- Add side option.
v0.3.0 (2013-11-14)
- Return a slider reference w/ control API.
This awesome jQuery plugin is developed by ascott1. For more Advanced Usages, please check the demo page or visit the official website.