Codeschnipsel: Eigenes Kontextmenü mit jQuery

am 09. Mai 2013 von Chris

Heute möchte ich mit euch einen Codeschnipsel teilen, der bereits seit 2008 auf meiner Festplatte herumlag - vermutlich, weil ich ihn immer für eine nette Spielerei hielt, mehr aber auch nicht. Ein wenig überarbeitet und mit jQuery ausgerüstet wird er nun doch endlich veröffentlicht - vielleicht hat ja jemand einen praktischen Nutzen dafür. 🙂

Mit dem folgenden Schnipsel könnt ihr für eure Website eine eigenes Kontextmenü (Rechtsklick-Menü) bauen.

Zuerst zum jQuery-Teil:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

```
<script type="text/javascript">
```
```
$(document).ready(function() {
```
```
	var x, y;
```
```
 
```
```
	document.oncontextmenu = function(e) {
```
```
		e.preventDefault();
```
```
		x = e.clientX;
```
```
		y = e.clientY;
```
```
		$("#rkm").css("left", x + "px");
```
```
		$("#rkm").css("top", y + "px");
```
```
		$("#rkm").show();
```
```
	};
```
```
 
```
```
	$(document).mousedown(function(e) {
```

		if (!(e.clientX >= x && e.clientX <= (x + $("#rkm").width()) && e.clientY >= y && e.clientY <= (y + $("#rkm").height()))) {

```
			$('#rkm').hide();
```
```
		}
```
```
	});
```
```
	$(window).scroll(function () {
```
```
		$('#rkm').hide();
```
```
	});
```
```
});
```
```
</script>
```

Anfangs wird eine von Google bereitgestellte Version von jQuery eingebunden - kann man natürlich weglassen, falls man bereits selbst eine Version in seine Website eingefügt hat.

Der Code per se ist nicht sonderlich spannend:

Zum einen wird überprüft, ob ein Rechtsklick ausgeführt wurde (oncontextmenu), falls ja wird das Browser-Menü blockiert und das eigene Menü richtig platziert und angezeigt.

Zum anderen wird das Menü wieder ausgeblendet, falls man irgendwo außerhalb der Menü-Box geklickt hat oder scrollt.

Werbeblocker aktiv?

Vermutlich aufgrund eines Werbeblockers kann an dieser Stelle leider keine Werbung angezeigt werden. Als Blog ist diese Website jedoch darauf angewiesen, um diverse Kosten abdecken zu können. Vielleicht möchtest du Servaholics ja in deinem Werbeblocker als Ausnahme hinzufügen und so unterstützen? 🙂

Das eigentliche Menü sieht wie folgt aus:

```
<style type="text/css">
```
```
<!--
```
```
div#rkm {
```
```
	position: fixed;
```
```
	display: none;
```
```
	z-index: 1000;
```
```
}
```
```
 
```
```
div#rkm a {
```
```
	display: block;
```
```
	margin: 2px;
```
```
}
```
```
//-->
```
```
</style>
```
```
 
```
```
<div id="rkm">
```
```
	<a href="#">Menüeintrag</a>
```

	<a href="javascript:history.back();">Zurück</a>

	<a href="javascript:location.reload();">Aktualisieren</a>

```
</div>
```

Der CSS-Teil dient zum einen dazu das Menü standardmäßig auszublenden, zum anderen werden damit die "Menüeinträge" (Links) zeilenweise dargestellt. Er sollte am besten in den head-Bereich der Website eingefügt werden. Was natürlich noch fehlt ist ein tolles Design für das Menü - das überlasse ich euch. 😉

Zwei Kleinigkeiten sind zu beachten: Erstens muss die Menü-Box die Anweisung "position: fixed;" enthalten, ansonsten würde das Menü nur in dem Bereich der Website funktionieren, den man ohne Scrollen direkt beim Öffnen der Seite sehen kann. Zweitens muss ggf. der "z-index"-Wert erhöht werden, falls andere Elemente auf der Website einen höheren Wert zugewiesen bekommen haben. Erfolgt keine Anpassung, so erscheint das Menü hinter diesem Element. 😛

Das eigentliche Menü ist - wie man oben sieht - ein div-Container mit Links, die die Einträge darstellen. Diesen HTML-Teil sollte man vor das schließende body-Tag (</body>) setzen.

Viel Spaß beim Basteln! 🙂

PS: Danke an Timo, der mir via Kontaktformular ein Feedback zum letzten Codeschnipsel gegeben und um mehr gebeten hat - Nachschub folgt. 😉

Codeschnipsel: Eigenes Kontextmenü mit jQuery

Andere Beiträge, die auf diesen Beitrag verlinken

Deine Meinung zu diesem Artikel?

6 Kommentare zu "Codeschnipsel: Eigenes Kontextmenü mit jQuery" (RSS)

Mo

Chris

Mo

Chris

Mo

Chris