API

Full API documentation.

ch.Menu

Description

Menu lets you organize the links by categories.

How-to

// Create a new Menu.
var menu = new ch.Menu(el, [options]);
// Create a new Menu with custom options.
var menu = new ch.Menu({
    'fx': 'none'
});

Parameters

  • el - HTMLElement : A HTMLElement to create an instance of ch.Menu.
  • options - Object : Options to customize an instance.
    • fx - String : Enable or disable UI effects. You should use: "slideDown", "fadeIn" or "none". Default: "slideDown".

Extends

Properties

.Component#name String

The name of a component.

.container HTMLElement

The menu container.

.folds Array

A collection of folds.

.Menu#name String

The name of the component.

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys an instance of Component and remove its data from asociated element.

// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;

.disable() → {component}



    

Disables an instance of Component.

// Disabling an instance of Component.
component.disable();

.enable() → {component}



    

Enables an instance of Component.

// Enabling an instance of Component.
component.enable();

.require() → {component}



    

Adds functionality or abilities from other classes.

// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');

.constructor()



    

Returns a reference to the constructor function.

.destroy()



    

Destroys a Menu instance.

// Destroy a menu
menu.destroy();
// Empty the menu reference
menu = undefined;

.hide(child) → {menu}



    

Hides a specific fold.

  • child - Number : A given number of fold.
// Hides the second fold.
menu.hide(2);

.show(child) → {menu}



    

Shows a specific fold.

  • child - Number : A given number of fold.
// Shows the second fold.
menu.show(2);

Events

'destroy'



    

Emits when a component is destroyed.

// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});

'disable'



    

Emits when a component is disable.

// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});

'enable'



    

Emits when a component is enabled.

// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});

'hide'



    

Event emitted when the menu hides a fold.

// Subscribe to "hide" event.
menu.on('hide', function () {
    // Some code here!
});

'ready'



    

Event emitted when the component is ready to use.

// Subscribe to "ready" event.
menu.on('ready', function () {
    // Some code here!
});

'show'



    

Event emitted when the menu shows a fold.

// Subscribe to "show" event.
menu.on('show', function (shown) {
    // Some code here!
});