Mzmenu control
Requirements: Mootools 1.4.4
Version: mzmenu 1.1
The mzmenu source code was written basing on the Richarda York book's: "Gotowe rozwiązania CSS", Chapter 3: "Dynamic lists"
Demonstration
Usage example:
Html code:
<div id="menu"></div>
Javascript code:
window.addEvent("domready", function() { var menu = new MzVerticalMenu('menu', { width: 200, height: 110, menu_items: [ { caption: 'Menu 1', menu_items: [ { caption: 'Submenu 1.1', url: 'http://www.google.pl', menu_items:[{ caption: 'Submenu 1.1.1', url: 'http://www.google.pl', menu_items:null, onclick:null },{ caption: 'Submenu 1.1.2', url: 'http://www.google.pl', menu_items:null, onclick:null }], onclick:null }, { caption: 'Submenu 1.2', url: 'http://www.google.pl', menu_items:null, onclick:null }, { caption: 'Submenu 1.3', url: 'http://www.google.pl', menu_items:null, onclick:null } ] }, { caption: 'Menu 2', menu_items: [ { caption: 'Submenu 2.1', url: 'http://www.google.pl', menu_items:null, onclick:null }, { caption: 'Submenu 2.2', url: 'http://www.google.pl', menu_items:null, onclick:null }, { caption: 'Submenu 2.3', url: 'http://www.google.pl', menu_items:null, onclick:null } ] }, { caption: 'Menu 3', menu_items: [ { caption: 'Submenu 3.1', url: 'http://www.google.pl', menu_items:null, onclick:null }, { caption: 'Submenu 3.2', url: 'http://www.google.pl', menu_items:null, onclick:null }, { caption: 'Submenu 3.3', url: 'http://www.google.pl', menu_items:null, onclick:null } ] } ] }); });
Parameters description
MzVerticalMenu requires one named div element in html code. We create it in javascript code that is executed after entire webpage was loaded:
var menu = new MzVerticalMenu('menu-div-id', {options});
Parameter options is an object that should contain following attributes:
- width - menu width,
- height - menu height,
- menu_items - array of sub-menu-items. Each menu item is an object that consists of:
- caption - caption of the menu item,
- submenu_width - width of submenu panel for the item,
- url - url to webpage that is executed after menu-item-click,
- menu_items - array of sub-menu-items,
- onclick - function executed on mouse click done on the item.