Files

• _page-overview.scss
• page-overview.js
• README.md

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

Module Overview

Examples

This module requires a base set of elements to act as the main page overview navigation. The fixed side navigation menu is created dynamically based of these items.

<div id="pageoverview">
    <a href="#anchor1">
        <div class=" button-icon-plain-size-6">
            <i class="fa fa-tablet"></i>
        </div>
        <h3 class="heading">Mobile Optimized</h3>
    </a>
    <a href="#anchor2">
        <div class=" button-icon-plain-size-6">
            <i class="fa fa-facebook"></i>
        </div>
        <h3 class="heading">Social Media</h3>
    </a>
</div>

Then in your theme's JS file (e.g. assets/themes/Kayzen/kayzen.js), call the pageOverview() function on your element wrapper:

$('#page-overview').pageOverview();

The above example is only the bare minimum amount of code to create a fixed page overview menu. For some real examples see the following:

• Example 1
• Example 2

The parent navigation sections should have a button-icon and some text to act as the tooltip content, generally the item's title. By default, the plugin uses the first heading element of the item for the tooltip. You can change the selectors and the default fixed menu position by passing the appropriate option when calling the plugin:

$('#page-overview').pageOverview({
    position      : 'bottom',
    itemSelector  : '.item',
    titleSelector : '.title'
});

Note that passing a custom position value here will override the below position value in the Sass config.

Customizing

The Page Overview can be customized using the following options:

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

Property Name	Default Value	Description
output-JSON	true	This allows the config to be accessed in the JavaScript.
position	left	The default position on the screen the fixed menu should appear.

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

@include page-overview((
    'position' : 'right'
));