Easy Off-canvas Push Navigation Plugin For jQuery - offcanvas

Easy Off-canvas Push Navigation Plugin For jQuery - offcanvas
File Size: 66.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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)

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.