Easy Off-canvas Push Navigation Plugin For jQuery - offcanvas

Just another jQuery mobile app style navigation system that slides the centered main content left or right to reveal a hidden off-canvas menu when triggered. Fully customizable and easy to stylize.

Basic usage:

1. Include jQuery library and the jQuery offcanvas plugin at the bottom of the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="dist/jquery.offcanvas.min.css">
<script src="dist/jquery.offcanvas.min.js"></script>

2. Include the needed Velocity.js JavaScript library for smooth JavaScript animations.

<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

3. Create an off-canvas navigation that is hidden by default.

<nav class="nav" id="offcanvas">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Logout</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

4. Initialize the off-canvas push menu.

var $el = $("#offcanvas").offcanvas();

5. Create a button with the CSS class 'js-toggle-offcanvas' to toggle the off-canvas push menu.

<button class="js-toggle-offcanvas">
  Toggle The Off-canvas Menu
</button>

$(".js-toggle-offcanvas").on("click", function() {
  $el.offcanvas("toggle");
});

6. All configuration options with default values. You can also pass the options via HTML5 data attributes as in: data-offcanvas-direction="right".

// CSS classes
classes: {
  container: pluginName,
  inner: pluginName + "-inner",
  open: pluginName + "-open",
  outer: pluginName + "-outer",
  overlay: pluginName + "-overlay"
},

// Page container, which will be animated
container: "body",

// Width of the offcanvas element
coverage: "220px",

// Direction the offcanvas is revealed from. 
// Left or right
direction: "left",

// Duration of the animation.
duration: 350,

// Easing type for show and hide animations.
easing: "ease-in-out"

7. Public methods.

// Shows the off-canvas menu.
$("#offcanvas").offcanvas("show");

// Hides the off-canvas menu.
$("#offcanvas").offcanvas("hide");

// Toggles the off-canvas menu.
$("#offcanvas").offcanvas("toggle");

// Destroys the plugin
$("#offcanvas").offcanvas("destroy");

8. Events.

// Fired once the Plugin is initialized.
$("#offcanvas").on("init.offcanvas", function() {
  // do something
});

// Fired when the show method is called
$("#offcanvas").on("show.offcanvas", function() {
  // do something
});

// Fired when the show animation finished.
$("#offcanvas").on("shown.offcanvas", function() {
  // do something
});

// Fired when the hide method is called.
$("#offcanvas").on("hide.offcanvas", function() {
  // do something
});

// Fired when the hide animation finished.
$("#offcanvas").on("hidden.offcanvas", function() {
  // do something
});

// Fired when the offcanvas gets toggled.
$("#element").on("toggle.offcanvas", function(event, visible) {
  console.log(visible) // outputs offcanvas state (true or false)
});

Change logs:

v3.4.7 (2016-10-07)

• bugfix

v3.4.6 (2016-08-05)

• bugfix

v3.4.1 (2016-01-06)

• update.

v3.2.3 (2015-12-19)

• added UMD support

v3.2.2 (2015-11-30)

• added toggle event

v3.1.2 (2015-11-23)

• added velocity overlay tweak
• tweaked velocity animation

v3.1.0 (2015-11-19)

• scope bug fix

v3.0.3 (2015-11-09)

• fixed animation bug

v3.0.0 (2015-11-06)

• update

2015-10-19

• fixed open class bug

2015-10-14

• JS & CSS update

---

This awesome jQuery plugin is developed by lgraubner. For more Advanced Usages, please check the demo page or visit the official website.