Deviant Menu

An easily customizable menu

created by sher.pl

Class: DeviantMenu

Implements:

Options, Events

Method: constructor

Syntax:

var myDeviant = new DeviantMenu('selector', options);

Advanced usage:

document.body.DeviantMenu({
  width: 150, 
  duration: 1000,
  transition: 'bounce:out',
  autoreset: false,
  onClick: function(anchor) {
    alert(anchor.href);
  },
  onOpen: function(from, to) {
    $('status').set('html', 'Open from ' + from.id + ' to ' + to.id);
  },
  onOpened: function(from, to) {
    $('status').set('html', 'Opened from ' + from.id + ' to ' + to.id);
  },
});

Notes:

  • DeviantMenu requires only MooTools Core - no MooTools More dependencies.
  • Visit Samples section for example usages

Arguments:

  • selector (string, required) - The ID of container in which are stored menus (or the menu div itself)
  • options (object, optional) - The options for DeviantMenu

Returns:

  • (object) - if gived element is menu div itself
  • (array) - if gived element contains more the one menu

Options:

  • width (integer, defaults to 150) - the width of menu
  • duration (number, defaults to 500) - duration of effect
  • transition (string, defaults to 150) - effect transition. Briefly described on this page
  • group (string, defaults to null) - if this option is provided, the menu will belongs to some group. Only one menu in group can be activated.
  • leftText (string, defaults to 'Return') - text visible in 'return' list item. If sets to 'parent' it will be raplaced with parent item name
  • leftPosition (string, defaults to 'before') - possible values are 'before' and 'after'. Determines wherever return li will be placed. Either to or bottom of list. Useful for fixed menu
  • main (element, defaults to first ul) - ul shown by default
  • autoclose (boolean, defaults to true) - if this option is provided, the menu will belongs to some group. Only one menu in group can be activated.
  • reset (boolean, defaults to true) - Determines whether after close ul should be changed to the main one
  • button (element, defaults to null) - Element which onClick event will show/hide Deviant Menu

Events:

click (element) - onClick();

Executed when some item (anchor) is clicked

Arguments:
  • element - anchor that is clicked

open (from, to) - onOpen();

Executed before ul is opened

Arguments:
  • from - ul that will be closed
  • to - ul that will be opened

close (from, to) - onClose();

Executed before ul is closed

Arguments:
  • from - ul that will be closed
  • to - ul that will be opened

opened (from, to) - onOpened();

Executed after ul is opened

Arguments:
  • from - closed ul
  • to - opened ul

closed (from, to) - onClosed();

Executed after ul is closed

Arguments:
  • from - closed ul
  • to - opened ul

reset () - onReset();

Executed when menu is reseted to default state

Class: JSONDeviantMenu

Implements:

Options, Events

Method: constructor

Syntax:

var jsonMenu = new JSONDeviantMenu('selector', json, options);

Arguments:

  • selector (string, required) - The ID of container in which are stored menus (or the menu div itself)
  • json (object, required) - object that will be converted to menu. For example: 
    {
  'New file': 'index.php',
  'Load': 'load.php',
  'Save': '#etc',
  'Save as...': {
          'jpg': '#etc',
          'png': '#etc'
  },
  'Close': '#etc'
}
  • options (object, optional) - The options for DeviantMenu

Returns:

  • (object) - constructed JSONDeviantMenu class

Class: Element

Method: DeviantMenu

Syntax:

var myDeviant = $('selector').DeviantMenu(options);

Arguments:

  • options (object, optional) - The options for DeviantMenu

Returns:

  • (object) - DeviantMenu if gived element is menu div itself
  • (array) - if gived element contains more the one menu

Method: JSONDeviantMenu

Syntax:

var myDeviant = $('selector').JSONDeviantMenu(json, options);

Arguments:

  • json (object, required) - object that will be converted
  • options (object, optional) - The options for DeviantMenu

Returns:

  • (object) - created DeviantMenu class