Minimal Overlaying Off-canvas Plugin With jQuery - Iptools Offcanvas
File Size: | 31.2 KB |
---|---|
Views Total: | 9915 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.