StackedMenu

StackedMenu

A flexible stacked navigation menu.

Constructor

new StackedMenu(options)

Source:

Create a StackedMenu.

Examples

The StackedMenu basic template looks like:

<div id="stacked-menu" class="stacked-menu">
  <nav class="menu">
    <li class="menu-item">
     <a href="home.html" class="menu-link">
       <i class="menu-icon fa fa-home"></i>
       <span class="menu-text">Home</span>
       <span class="badge badge-danger">9+</span>
     </a>
    <li>
  </nav>
</div>

Instance the StackedMenu:

var menus = new StackedMenu();
Parameters:
Name Type Description
options Object

An object containing key:value that representing the current StackedMenu.

Members

options :Object

Source:
Properties:
Name Type Default Description
compact Boolean false

Transform StackedMenu items (except item childs) to small size.

hoverable Boolean false

How StackedMenu triggered open/close state. Use false for hoverable and true for collapsible (clickable).

closeOther Boolean true

Control whether expanding an item will cause the other items to close. Only available when hoverable=false.

align String 'left'

Where StackedMenu items childs will open when hoverable=true (left/right).

selector String '#stacked-menu'

The StackedMenu element selector.

selectorClass String 'stacked-menu'

The css class name that will be added to the StackedMenu and used for css prefix classes.

The StackedMenu options.

Type:
  • Object
Example
var options = {
  closeOther: false,
  align: 'right',
};

var menus = new StackedMenu(options);

selector :Element

Source:

The StackedMenu element.

Type:
  • Element

items :Element

Source:

The StackedMenu items.

Type:
  • Element

classes :Object

Source:

Lists of feature classes that will be added to the StackedMenu depend to current options. Used selectorClass for prefix.

Type:
  • Object

active :Element

Source:

The active item.

Type:
  • Element

open :Element

Source:

The open item(s).

Type:
  • Element

handlerClickDoc

Source:

event handlers

Methods

init() → {void}

Source:

The first process that called after constructs the StackedMenu instance.

Fires:
Returns:
Type
void

openMenu(el) → {Object}

Source:

Open/show the target menu item. This method didn't take effect to an active item if not on compact mode.

Example
var menuItem2 = menu.querySelectorAll('.menu-item.has-child')[1];
menu.openMenu(menuItem2);
Parameters:
Name Type Description
el Element

The target element.

Fires:
Returns:

The StackedMenu instance.

Type
Object

closeMenu(el) → {Object}

Source:

Close/hide the target menu item.

Example
var menuItem2 = menu.querySelectorAll('.menu-item.has-child')[1];
menu.closeMenu(menuItem2);
Parameters:
Name Type Description
el Element

The target element.

Fires:
Returns:

The StackedMenu instance.

Type
Object

closeAllMenu() → {Object}

Source:

Close all opened menu items.

Example
menu.closeAllMenu();
Fires:
Returns:

The StackedMenu instance.

Type
Object

toggleMenu(el) → {Object}

Source:

Toggle open/close the target menu item.

Example
var menuItem2 = menu.querySelectorAll('.menu-item.has-child')[1];
menu.toggleMenu(menuItem2);
Parameters:
Name Type Description
el Element

The target element.

Fires:
Returns:

The StackedMenu instance.

Type
Object

align(position) → {Object}

Source:

Set the open menu position to left or right.

Example
menu.align('left');
Parameters:
Name Type Description
position String

The position that will be set to the Menu.

Fires:
Returns:

The StackedMenu instance.

Type
Object

isCompact() → {Boolean}

Source:

Determine whether the Menu is currently compact.

Example
var isCompact = menu.isCompact();
Returns:

is compact.

Type
Boolean

compact(isCompact) → {Object}

Source:

Toggle the Menu compact mode.

Example
menu.compact(true);
Parameters:
Name Type Description
isCompact Boolean

The compact mode.

Fires:
Returns:

The StackedMenu instance.

Type
Object

isHoverable() → {Boolean}

Source:

Determine whether the Menu is currently hoverable.

Example
var isHoverable = menu.isHoverable();
Returns:

is hoverable.

Type
Boolean

hoverable(isHoverable) → {Object}

Source:

Toggle the Menu (interaction) hoverable.

Example
menu.hoverable(true);
Parameters:
Name Type Description
isHoverable Boolean

true for hoverable and false for collapsible (clickable).

Fires:
Returns:

The StackedMenu instance.

Type
Object

Events

menu:init

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has completed init.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:init', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:init', function() {
  console.log('fired on menu:init!!');
});

menu:open

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has open.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:open', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:open', function() {
  console.log('fired on menu:open!!');
});

menu:close

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has close.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:close', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:close', function() {
  console.log('fired on menu:close!!');
});

menu:align

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has changed align position.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:align', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:align', function() {
  console.log('fired on menu:align!!');
});

menu:compact

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has completed toggle compact mode.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:compact', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:compact', function() {
  console.log('fired on menu:compact!!');
});

menu:hoverable

Source:
Properties:
Name Type Description
data Object

The StackedMenu data instance.

This event is fired when the Menu has completed toggle hoverable.

Type:
  • Object
Examples
document.querySelector('#stacked-menu').addEventListener('menu:hoverable', function(e) {
  console.log(e.data);
});

Or using jQuery:

$('#stacked-menu').on('menu:hoverable', function() {
  console.log('fired on menu:hoverable!!');
});