Files

• _flyout-nav.scss
• _flyout-trigger.scss
• flyout-nav.js
• README.md

Github Page (customers only): https://github.com/esr360/Kayzen/tree/master/assets/modules/objects/flyout-nav

Module Overview

Requirements

• A pre-existing navigation menu
• The side-nav module
• [Optional] The site-overlay module

Examples

<nav id="app-nav">
    <ul>
        ...
    </ul>
</nav>

<!-- Flyout Nav Trigger -->
<span class="button-icon-primary flyout-trigger" id="flyout-trigger">
    <i class="fa fa-bars"></i>
</span>

<!-- Flyout Nav Container -->
<div id="flyout"></div>

<!-- Site Overlay -->
<div class="site-overlay" id="site-overlay"></div>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the flyoutNav() function on your flyout-nav container:

$('#flyout').flyoutNav();

Options

$('#flyout').flyoutNav({
    menu    : '#app-nav > ul',
    trigger : '#flyout-trigger',
    overlay : '#site-overlay'
});

View Demo

Customizing

The Flyout Navigation can be customized using the following options:

Read the Configuration page to learn more about a module's configuration.

Property Name	Default Value	Description
width	option($side-nav, 'width')	This value should be the same width as the side-nav module.
font-size	font-size('base')	The font size for the flyout nav.
box-shadow	1px 0 25px 0px rgba(black, 0.4)	The flyout nav's box shadow.
collapsible[enabled]	true	Set whether child menus should be collapsible.
collapsible[open-by-default]	true	Set whether child menus should be open by default (if collapsible is enabled).
show-y-scrollbar	false	Force the Y scrollbar to always be visible.

To change one of the above values, pass your new value(s) to the flyout-nav() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include flyout-nav((
    'collapsible'      : (
        'enabled'      : false
    ),
    'show-y-scrollbar' : true
));

Flyout Trigger (_flyout-trigger.scss)

The Flyout Trigger can be customized using the following options:

Property Name	Default Value	Description
top	0.85rem	The top position of the flyout-trigger.
bottom	auto	The bottom position of the flyout-trigger.
left	auto	The left position of the flyout-trigger.
right	0.85rem	The right position of the flyout-trigger.
z-index	14	The z-index of the flyout-trigger.

To change one of the above values, pass your new value(s) to the flyout-nav() mixin in your theme file (e.g. assets/themes/Kayzen/_kayzen.scss).

@include flyout-trigger((
    'left'    : 0.85rem,
    'right'   : auto,
    'z-index' : 99
));