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>
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 |
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 |
Name | Description |
---|---|
layout() | Start the offcanvas layout |
close() | Remove the active classes and close the panel if necessary |
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.lessJS