Minimal Overlaying Off-canvas Plugin With jQuery - Iptools Offcanvas

Iptools Offcanvas is a really simple jQuery plugin that uses CSS3 transitions and transforms to create an overlaying, multi-purpose off-canvas panel. It is a great tool to create an App-like off-canvas navigation that slides out from top, left, right or bottom of your document.

How to use it:

1. Put the style sheet iptools-jquery-offcanvas.css in the head section that will provide the basic styles for the off-canvas panel.

<link href="iptools-jquery-offcanvas.css" rel="stylesheet">

2. Add html content with a 'close' button to the off-canvas panel.

<section id="my-navigation" class="offcanvas">
  <p>Navigation Item 1</p>
  <p>Navigation Item 2</p>
  <p>Navigation Item 3</p>
  <p>Navigation Item 4</p>
  <p>Navigation Item 5</p>
  <button data-offcanvas-close="my-navigation">Close The Navigation</button>
</section>

3. Create a trigger button to open the off-canvas panel. The data-rel attribute is to specify the target ID of your off-canvas panel.

<button data-offcanvas-open="my-navigation">open</button>

4. Put the latest version of jQuery library and iptools-jquery-offcanvas.min.js script at the end of the document.

<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="dist/iptools-jquery-offcanvas.min.js"></script>

5. Active the plugin as follows:

$('#my-navigation').iptOffCanvas();

6. Style the off-canvas panel whatever you like.

#my-navigation {
  background-color: rgba(51,51,51,.95);
  color: #fff;
  text-align: center;
}

7. Default plugin settings.

$('#my-navigation').iptOffCanvas({

  // base CSS class
  baseClass: 'offcanvas',

  // top, right, bottom, left
  type: 'left',

  // close other instances when one opens
  single: true,

  static: false
  
});

Change log:

2017-05-12

• v0.2.2

2017-04-21

• Remove static widths

2016-03-15

• Replace trigger connection classes by data attributes

2016-02-23

• Add option static
• Trigger opened / closed events only for one instance at a time

2016-02-18

• Add stopPropagation on event handler

2016-02-16

• Add single mode option

---

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