jQuery Off-screen Slide-Out Navigation Panel Plugin - bigSlide

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 &amp; 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">&#9776;</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.