Flyout

Hide your navigation options or wathever you want in a nice left panel

  Download   View project on Github

This 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>

Constructor

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

Options

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

Methods

Name Description
layout() Starts flyout layout
open() Reveal or push menu panel
close() Close menu panel

Sample

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.less

JS

jQuery.js jquery.hammer.js (if touch enabled) Stashy.Flyout.js