Generic Off-canvas Effects with jQuery and CSS3 - Offcanvas.js

A simple, unobtrusive jQuery plugin used to create familiar 'off-canvas' effects within any containers. It currently supports 3 off-canvas effects ('overlay', 'push', 'underlay') and comes with lots of options to customize. It brings you a fast way to create mobile app style off-canvas menus/panels for your websites or web applications. More off-canvas effects are coming soon.

This plugin uses the jQuery Transit plugin. All animations and effects are done with CSS3. If you don't want to include this plug-in, Offcanvas will use the normal jQuery $.fn.animate() function. It is recommend to use the Transit plugin, 'cause CSS3 animations are smoother (Especially on mobile devices).

How to use it:

1. load jQuery library and the jQuery transit plugin in your document.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>

2. Load the jQuery offcanvas plugin's stylesheet and script after jQuery.

<link href="jquery.offcanvas.css" rel="stylesheet">
<script src="jquery.offcanvas.js"></script>

3. Call the plugin to generate a basic off-canvas effect within the target container.

$fn.offcanvas({

// The main canvas selector or jQuery object.
mainCanvas: '.container',
			
});

4. All the customization options.

$fn.offcanvas({

// top|right|bottom|left
position: 'left', 

// push|overlay|underlay
mode:'overlay', 

// before|after
injectPosition:'before', 

// Clone the off-canvas element instead of moving it to the right position.
cloneElement:false,

css: {
  width: '100%',   // <length>, <percentage>
  height: '100%',   // <length>, <percentage>
},

// If browser doesn't support CSS3 transitions or Transit isn't available
jsFallback:     true,     

// Add further animation options @see http://api.jquery.com/animate/
animate:      {},       

// Selector or jQuery object
mainCanvas:        '#page', 

// Make the main canvas click-able
mainCanvasClick:   true, 

// Add further animation options 
// @see http://api.jquery.com/animate/
// Overwrites 'animate'
mainCanvasAnimate: {}, 

// Add CSS styles to the main canvas
mainCanvasCss:     {}, 

// Triggered before the off-canvas is shown
onShowBefore:      function() {}, 

// Triggered after the off-canvas is shown
onShowAfter:       function() {}, 

// Triggered before the off-canvas is hidden
onHideBefore:      function() {}, 

// Triggered after the off-canvas is hidden
onHideAfter:       function() {}, 

// Triggered after clicking on the main canvas
onMainCanvasClick: function() {}, 
  
});

5. Public methods.

// Hide current off-canvas element.
$('.offcanvas').hide();

// Show current off-canvas element.
$('.offcanvas').show();

// Toggle current off-canvas element.
$('.offcanvas').toggle();

Change logs:

2015-05-06

• v3.0.1. Fixed iOS smooth scrolling

2015-04-04

• v3.0. Options update.

2015-01-27

• v2.2

---

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