Kontrolka mzmenu

Wymagania: Mootools 1.4.4

Wersja: mzmenu 1.1

Kod powstał w oparciu o opis list rozwijanych w książce Richarda Yorka: "Gotowe rozwiązania CSS"

Pobierz

Przykład działania

Sposób użycia

Kod html:
 <div id="menu"></div>
 
Kod javascript:
 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 }
				]
			}
		]
	});
});
 

Opis parametrów

Kontrola MzVerticalMenu potrzebuje w kodzie html jednego obiektu div o określonym identyfikatorze. Tworzymy ją w kodzie javascript wykonywanym po załadowaniu strony następująco:

var menu = new MzVerticalMenu('menu-div-id', {options});

W obiekcie options przekazujemy następujące parametry: