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"
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:
- width - Szerokość kontrolki,
- height - Wysokość kontrolki,
- menu_items - Opcje menu/pod-menu/pod-pod-menu, itd. Pojedyńcza opcja menu jest obiektem o następujących właściwościach:
- caption - tekst opcji menu,
- submenu_width - szerokość panela z pod-menu dla tej pozycji,
- url - url do strony/podstrony,
- menu_items - opcje podmenu
- onclick - funkcja obsługi zdarzenia onclick.