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"

Download

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: