Ajaxschmiede.de

Der Deutsche Jan A. Manolov hat auf Grundlage des Frameworks MooTools (1.2) das ddMenu-Script zum Erstellen von eigenen Kontextmenüs geschrieben.

Ein einziger Klick auf die rechte Maustaste genügt, um anstatt des standardmäßigen Menüs eine individuelle, an die jeweiligen Bedürfnisse angepasste Optionenliste aufzurufen.

Sowohl das Erscheinungsbild, als auch die Steuerung des Menüs ähneln der gewohnten Betriebssystemumgebung lässt sich aber gleichzeitig völlig frei an die eigenen Vorlieben und Vorstellungen anpassen.

Durch gedrückthalten der Strg-Taste beim Rechtsklicken wird das Standardmenü aufgerufen. Wenn man die Shift-Taste beim Klicken der rechten Maustaste drückt, werden beide Menüs nebeneinander angezeigt.

ddMenu, das sich auch sanft Ein- und Ausblenden lässt, bietet Unterstützung für alle üblichen Browser (Firefox 2+, Safari 3, Internet Explorer 6+, Opera 9+).

Neben dem bereits erwähnten MooTools-Framework benötigt man noch die folgenden beiden Dateien:

• ddmenu.css
• mootools.ddmenu.v1.js

Sind alle Dateien eingebunden, erstellt man die Menüstruktur als HTML-Liste. Jedes Item erhält hierbei eine eigene ID.

<div id="ddmenu2" style="display: none">
<li class="title">Hauptmenü</li>
<li class="item" id="menu_item1"><a href="#">HTML</a></li>
<li class="item" id="menu_item2"><a href="#">CSS</a></li>
<li class="item" id="menu_item3"><a href="#">JS</a></li>
<li class="item" id="menu_big_item"><a href="#">Web 2.0 - Alles zusammen</a></li>
<li class="sepline"></li>
<li class="item" id="menu_item_with_icon1"><a class="objects" href="#">Patrick</a></li>
<li class="item" id="menu_item_with_icon2"><a class="letter" href="#">Tobias</a></li>
<li class="item" id="menu_item_with_icon3"><a class="umbrella" href="#">Ajaxschmiede</a></li>
</div>

Zuletzt muss noch die nachfolgende Initialisierungsfunktion in ein Script-Tag eingebaut werden:

function iniz () {
	pagemenu = new DDMenu ('ddmenu2', document, {
	onOpen: function (e) {  //console.log (e);
			this.enableItems(true);
			this.enableItems('menu_item_with_icon2',false);
			$(e.target).get('tag') == 'a' ? this.enableItems('menu_spec_links',true) : this.enableItems('menu_spec_links',false);
		},
		onItemSelect: function (act_id,act_el,act_from) {
			//console.info ("menu action -> item id: \"%s\" from: %o in %o", act_id, act_el, act_from);
			//Hier kommen die Klickevents hinein
		}
	});
}

if ( window.addEventListener ) {
	addEventListener( "load", iniz, false );
} else {
	attachEvent( "onload", iniz );
}

Ich habe selbst ein Demo-Menü erstellt.