jVette is a native inspired off canvas navigation library powered by jQuery.

  • Small footprint (3.7k gzipped)
  • Silky smooth CSS3 animations
  • Unobtrusive; requires no structural markup changes
  • Fully evented
  • Perfect compliment to any responsive design

These pages are live examples of jVette; click the header icons (above) to see it in action! View the source code to see actual markup/attribute implementation details.

jVette Jumbotron

To get started, first add a reference to the jVette assets:

NOTE: jVette should be referenced AFTER jQuery.

<style rel="stylesheet" href="(base_path)/assets/vendor/jvette/jvette.min.css" />
<script href="(base_path)/assets/vendor/jvette/jvette.min.js" /></script>

Next, add trigger attributes that will toggle the jVette panels to open/close:

data-jv-trigger="left|right"

See triggers for details.

Now, add attributes to identify what content and related panels should be used:

data-jv-content="left|right"

See content for details.

Finally, invoke jVette:

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

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

See invocation for details.