jvette is a lightweight, unobtrusive jQuery plugin that is used to create a responsive, fully-featured off-canvas navigation menu with smooth CSS3 animations.

Features:

• Small size (3.7 KB compressed)
• Silky smooth CSS3 animation
• Unobtrusive requires no structural coding changes
• complete events
• The perfect complement to any responsive design

How to make use of it:

1. To get started, first add a reference to your jVette assets.

<link rel="stylesheet" href="assets/css/jvette.min.css"> 
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="assets/js/jvette.min.js"></script>

2. Download the jQuery thinning plugin for additional mitigation effects.

<script src="jquery.easing.min.js"></script>

3. Create a button to trigger off-panel navigation. Add the data-jv-trigger attribute with the value left | right | close.

<button class="btn" data-jv-trigger="left"><span></span></button>

4. Create a navigation menu to navigate outside the panel.

<nav data-jv-content="left" data-jv-order="0">
  <ul role="navigation">
    <li><a href="#" class="active">Home</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
    <li><a href="#">Link 4</a></li>
    ...
  </ul>
</nav>

5. Call jVette:

/**<![CDATA[*/
;(function($, jVette)
{
  jVette && jVette();

})(window.jQuery, jVette);
/**]]>*/

6. jVette default options:

var defaults = {

// enabled by default
disabled: false,
transforms: true,

//  animation,
slide: {
  easing: 'swing',
  duration: 350 
},

// TouchSwipe (if available) options,
swipe: {
  threshold: 10,
  allowPageScroll: 'vertical'                    
},

// events
onenable: function(e) {},
onenabled: function(e) {},
ondisable: function(e) {},
ondisabled: function(e) {},
onopen: function(e) {},
onopened: function(e) {},
onclose: function(e) {},
onclosed: function(e) {}

};

7. jVette is singular, and can be called with or without the new operator.

/**<![CDATA[*/
;(function($, jVette)
{   
  var jv1 = jVette && jVette();
  var jv2 = jVette && new jVette();
  
  // equates to true since both are the same instance
  window.console && window.console.log(jv1 === jv2);

})(window.jQuery, jVette);
/**]]>*/

8. Available events.

jVette().on('open', function(e) { … })
jVette().on('opened', function(e) { … })
jVette().on('close', function(e) { … })
jVette().on('closed', function(e) { … })
jVette().on('enable', function(e) { … })
jVette().on('enabled', function(e) { … })
jVette().on('disable', function(e) { … })
jVette().on('disabled', function(e) { … })
jVette().on('changed', function(e) { … })

9. jVette also supports the serialization method.

jVette().open();
jVette().close();
jVette().enable();
jVette().disable();

Smooth Off-canvas Navigation, jVette Plugin/Github

See Demo And Download

Official Website(explodybits): Click Here

This superior jQuery/javascript plugin is developed by explodybits. For extra advanced usage, please go to the official website.