Hide your navigation options or wathever you want in a nice left panel
Download View project on GithubThis component renders a left side menu like the one we can see in a lot of mobile applications.
In this page we can see the behaviour of the layout clicking in the button at the top left corner close to the navigation options.
<div class="st-flyout"> <div class="st-flyout-container"> <div class="st-flyout-menu"> ... Menu content ... </div> <div class="st-flyout-main"> ... Content ... <a href="#" class="st-flyout-toggle"></a> ... Place the toggle button wherever you want ... ... More content ... </div> </div> </div>
Stashy.Flyout(selector, options)
Parameter | Type | Default | Description |
---|---|---|---|
selector | string | .st-flyout | CSS selector for your flyout |
options | object | See options | You can pass the options to the flyout instance |
Option | Type | Default | Description |
---|---|---|---|
slideType | string | push | You can choose between "push" or "reveal" in order to show the panel |
closeOnClickOutside | bool | true | Close Flyout panel on click outside the toggle button (.st-flyout-toggle) |
enableTouch | bool | false | If touch is enabled and the device is touch capable, then you can swipe to reveal the left menu. 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() | Starts flyout layout |
open() | Reveal or push menu panel |
close() | Close menu panel |
var flyout = new Stashy.Flyout().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.Flyout.lessJS
jQuery.js jquery.hammer.js (if touch enabled) Stashy.Flyout.js