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:

  1. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4. 	var x, y;
  5.  
  6. 	document.oncontextmenu = function(e) {
  7. 		e.preventDefault();
  8. 		x = e.clientX;
  9. 		y = e.clientY;
  10. 		$("#rkm").css("left", x + "px");
  11. 		$("#rkm").css("top", y + "px");
  12. 		$("#rkm").show();
  13. 	};
  14.  
  15. 	$(document).mousedown(function(e) {
  16. 		if (!(e.clientX >= x && e.clientX <= (x + $("#rkm").width()) && e.clientY >= y && e.clientY <= (y + $("#rkm").height()))) {
  17. 			$('#rkm').hide();
  18. 		}
  19. 	});
  20. 	$(window).scroll(function () {
  21. 		$('#rkm').hide();
  22. 	});
  23. });
  24. </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.

Werbung

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 wäre jedenfalls sehr nett! :-)

Das eigentliche Menü sieht wie folgt aus:

  1. <style type="text/css">
  2. <!--
  3. div#rkm {
  4. 	position: fixed;
  5. 	display: none;
  6. 	z-index: 1000;
  7. }
  8.  
  9. div#rkm a {
  10. 	display: block;
  11. 	margin: 2px;
  12. }
  13. //-->
  14. </style>
  15.  
  16. <div id="rkm">
  17. 	<a href="#">Menüeintrag</a>
  18. 	<a href="javascript:history.back();">Zurück</a>
  19. 	<a href="javascript:location.reload();">Aktualisieren</a>
  20. </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. 😉

Andere Beiträge, die auf diesen Beitrag verlinken

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

7. August 2013 14:55 UhrAntworten#
Mo
Hey! Das war genau das, was ich gesucht hab, dankeschön! Ich hab nur leider das Problem, dass ich mich gerade erst in PHP und JS einarbeite und nur ungefähr weiß, wie das funktionieren müsste:
Das Kontextmenü sollte natürlich abhängig vom angeklickten Element auch unterschiedliche Einträge liefern können;
Geht das? Und wenn ja - wie?
:)
7. August 2013 15:05 UhrAntworten#
Chris (Administrator)
Hi,

freut mich, dass dir dieser Artikel geholfen hat. 🙂

Zu deiner Frage: Ja, prinzipiell geht das.
Der Ansatz dafür mittels jQuery sieht ungefähr wie folgt aus:

<script language="javascript" type="text/javascript">
$(function(){
$('a').on('contextmenu', function(e) {
alert($(this).attr('href'));
return false;
});
});
</script>


Hiermit kannst du bspw. den Rechtsklick auf Links (siehe: $('a')) abfangen. Das Ganze lässt sich natürlich auch beliebig auf einzelne Links oder andere Elemente ausweiten.

Falls du dich in jQuery einarbeiten möchtest kann ich dir außerdem noch einen unserer Artikel empfehlen: jQuery: Einführung und Crashkurs.

Viele Grüße, Chris 🙂
7. August 2013 15:14 UhrAntworten#
Mo
Hey,
danke für die fixe Antwort! 🙂
Das klingt einfacher als gedacht... Und die Schleichwerbung nehm ich doch glatt mit 😉
Dankeschön!
7. August 2013 16:08 UhrAntworten#
Chris (Administrator)
Hi,

kein Problem, gerne. 🙂
Wenn sie ausnahmsweise einmal passt. 😉

Viel Erfolg!
Chris
7. August 2013 16:47 UhrAntworten#
Mo
Hey,
Jetzt versuche ich das umzusetzen und stoße dabei auf folgendes Problem:
Sobald auf einen Link geklickt wird, ändert sich ja logischerweise auch das Kontextmenü konstant zu denen von - in meinem Fall - #rkm2.
Ich bräuchte also im Prinzip eine if-Abfrage "if !(angeklicktes Element == definiertes div-Element), nehme Standard-Kontextmenü-div, else wähle das passende div-Element aus.

Ich nerve dann auch nicht mehr weiter und wenn du jemals in München sein solltest gibts 1+n Dankeschön-Bierchen 😁
7. August 2013 19:02 UhrAntworten#
Chris (Administrator)
Hi,

am besten du gibst den Elementen (eindeutige) IDs - dann kannst du einfach anhand der IDs überprüfen/unterscheiden, welches Element gerade angeklickt wurde.

Danke für das Angebot und viele Grüße. 😉

Jetzt bist du dran: Was denkst du?

Bitte beachte: Auch wenn das Angeben einer E-Mail-Adresse optional ist, so bist du doch nicht vollständig anonym, denn u.a. deine IP-Adresse wird mit dem Absenden dieses Formulars gespeichert.



Tastenkürzel


Überall

j: Älterer Artikel

k: Neuerer Artikel

s: Suchen

h: Hilfe


Auf Artikel-Seiten

t: Auf Twitter posten

f: Auf Facebook posten

g: Auf Google+ posten