Minimal Overlaying Off-canvas Plugin With jQuery - Iptools Offcanvas

File Size: 31.2 KB
Views Total: 9976
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

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="//"></script>
<script src="dist/iptools-jquery-offcanvas.min.js"></script>

5. Active the plugin as follows:


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.


  // base CSS class
  baseClass: 'offcanvas',

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

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

  static: false

Change log:


  • v0.2.2


  • Remove static widths


  • Replace trigger connection classes by data attributes


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


  • Add stopPropagation on event handler


  • 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.