OffCanvas

Create responsive pages using this awesome layout

  Download   View project on Github

This component is focused in creating layouts adapting to several screen sizes. The Offcanvas layout has 3 panels aligned left, center and right.

Left panel or st-offcanvas-menu, is perfect for navigation and will be showed on desktop and tablet devices size.

Center panel or st-offcanvas-main, will hold page content.

Right panel or st-offcanvas-additional, can be used for showing some complementary stuff.

The menu and additional panels are optional, so you can simply don't write the markup for any of them and the st-offcanvas-main panel will take the remaining width.

The Offcanvas Stashy implementation is inspired in this great article from Jason Weaver.

<div class="st-offcanvas">
    <div class="st-offcanvas-menu">
        ... left panel, supposed to be used for menus or something like that ...
        ... this panel is optional so you can simply don´t write it in your code  ...
    </div>
    <div class="st-offcanvas-main">
        <a href="#" class="showmenubutton"></a>
        <a href="#" class="showadditionalbutton"></a>
        ... Main content ...
        ... You can wrap the show menus buttons with any tag or add more of them ...
    </div>		
    <div  class="st-offcanvas-additional">
        ... another panel, to the right, for additional content ...
        ... this panel is optional so you can simply don´t write it in your code  ...
    </div>	                        
</div>

Constructor

Stashy.OffCanvas(selector,options)
Parameter Type Default Description
selector string .st-offcanvas CSS selector for your OffCanvas
options object See options You can pass the options to the offcanvas instance

Options

Option Type Default Description
onMobileLayout function $.noop Provide any function with the actions you want perform when screen size is smaller than 769px
onTabletLayout function $.noop Provide any function with the actions you want perform when screen size is between 769px and 979px
onDesktopLayout function $.noop Provide any function with the actions you want perform when screen size is greater than 769px
useTransitions boolean true Use a CSS3 transition when opening and closing panels
closeOnClickOutside bool true Close OffCanvas on click outside the open and close buttons (.showmenubutton, .showadditionalbutton)
enableTouch bool false If touch is enabled and the device is touch capable, then you can swipe to push left and right panels. The touch behaviour is controlled by Hammer.js so you need to add a reference to jquery.hammer.js. Get it in the project site or in the dist folder of the Stashy Github project

Methods

Name Description
layout() Start the offcanvas layout
close() Remove the active classes and close the panel if necessary

Sample

var offcanvas = new Stashy.OffCanvas("", { 
    onMobileLayout : function() {
    ... awesome actions in mobile screen sizes ...
    },
    onTabletLayout : function() {
    ... awesome actions in tablet sizes ...
    },                
    onDesktopLayout : function() {
    ... actions in desktop sizes ...
    }
}).layout();

less

For using just this component, create a .less file similar to Stashy.less, include in order the following imports and compile:

Stashy.Variables.less Stashy.Mixins.less Stashy.OffCanvas.less

JS

jQuery.js jquery.hammer.js (if touch enabled) Stashy.Events.js Stashy.OffCanvas.js