Bei allgemeinen Webseiten ist das Standard-Rechtsklickmenü des IE-Browsers ein unveränderlicher fester Modus, und die meisten Internetnutzer nutzen ihn beim Durchsuchen von Webseiten nicht häufig. Für professionelle Webdesigner wäre es so cool und praktisch, wenn das Rechtsklick-Menü mit personalisierten Inhalten gestaltet werden könnte.
Stellen Sie sich vor, wenn ein Benutzer mit der rechten Maustaste auf Ihre Website klickt, werden Sie Ihre sorgfältig organisierten „Links“ und „Nachrichten senden“ sehen, die sogar farbenfrohe interaktive Flash-Animationen enthalten! Wie in Abbildung 1 gezeigt – sabbern Sie nicht, wir löschen Ihren Durst und sehen, wie man es macht :).
Ich habe zwei Möglichkeiten, das Rechtsklick-Menü umzuwandeln (tatsächlich ist das Wesentliche dasselbe, beides sind JavaScript-Dinge).
Die erste Methode ist früher: Kopieren Sie einfach den folgenden Quellcode in die HTML-Datei auf der Webseite.
<Stil>
< !--
.skin0 {
Position:absolut;
text-align:left;
Breite:200px;
Grenze:2px einfarbig schwarz;
Hintergrundfarbe:Menü;
Schriftfamilie:Verdana;
Zeilenhöhe:20px;
Cursor:Standard;
Sichtbarkeit:versteckt;
}
.skin1 {
Cursor:Standard;
Schriftart:Menütext;
Position:absolut;
text-align:left;
Schriftfamilie: Arial, Helvetica, serifenlos;
Schriftgröße: 10pt;
Breite: 120 Pixel;
Hintergrundfarbe:Menü;
Rand: 1 einfarbige Knopffläche;
Sichtbarkeit:versteckt;
border:2 outset buttonhighlight;
}
.menuitems {
padding-left:15px;
padding-right:10px;
}
->
</style>
< SCRIPT LANGUAGE="JavaScript1.2">
< !-- Website: http://www.painting-effects.co.uk -->
< !-- Dieses Skript und viele weitere sind kostenlos online verfügbar unter -->
< !-- Die JavaScript-Quelle!! http://javascript.internet.com -->
< !-- Beginnen
var menuskin = "skin1"; // skin0 oder skin1
var display_url = 0; // URLs in der Statusleiste anzeigen?
Funktion showmenuie5() {
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX -
ie5menu.offsetWidth;
anders
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY -
ie5menu.offsetHeight;
anders
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "sichtbar";
return false;
}
Funktion hidemenuie5() {
ie5menu.style.visibility = "versteckt";
}
Funktion Highlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "highlight";
event.srcElement.style.color = "white";
if(display_url)
window.status = event.srcElement.url;
}
}
Funktion lowlightie5() {
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}
Funktion jumptoie5() {
if (event.srcElement.className == "menuitems") {
if (event.srcElement.getAttribute("target") != null)
window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
anders
window.location = event.srcElement.url;
}
}
// Ende -->
</script>
< div id="ie5menu" class="skin0" onMouseover="highlightie5()"
onMouseout="lowlightie5()" onClick="jumptoie5();">
< div class="menuitems" url="javascript:history.back();">Zurück</div>
< div class="menuitems" url=" http://javacool.3322.net ">Zurück zur Startseite</div>
<hr>
< div class="menuitems" url=" http://www.163.com ">NetEase</div>
< div class="menuitems" url=" http://www.sohu.com ">Sohu</div>
<hr>
< div class="menuitems" url=" http://www.sina.com.cn ">Sina</div>
< div class="menuitems" url=" http://www.yahoo.com.cn ">Yahoo</div>
< /div>
<script language="JavaScript1.2">
if (document.all && window.print) {
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5;
}
</script>
Der Effekt ist wie folgt:
Die zweite Methode besteht darin, ein Plug-in für Dreamweaver zu verwenden – Right_Click_Menu_Builder, das von http://www.macromedia.com heruntergeladen werden kann. Nach der Installation finden Sie den Befehl „Right Click Menu Builder“ im Menü „Befehl“ in Dreamweaver.
Klicken Sie auf diesen Befehl. Daraufhin wird ein Einstellungsfeld wie in Abbildung 3 angezeigt. Es besteht hauptsächlich aus zwei Teilen: „Menü“ und „Stile“.
Das Menü dient zum Einstellen von Hyperlinks und zum Senden von Links. Hier können bis zu 10 Verbindungen eingestellt werden. „Menütext“ in diesem Auswahlfeld ist der Text, der angezeigt wird, wenn Sie mit der rechten Maustaste klicken (ändern Sie ihn in Chinesisch); schreiben Sie den entsprechenden Linkpfad in „URL“; „Ziel“ bestimmt, ob es sich um ein neues Fenster oder das aktuelle handelt Fenster wird zur Anzeige verwendet. Der Inhalt des Links wird in einem neuen Fenster angezeigt, indem Sie „Leer“ ausfüllen, was der Einstellung „Ziel“ von Dreamweaver entspricht.
Styles ist für die Einstellung des Menü-Erscheinungsbilds verantwortlich. Es gibt zwei Optionen:
img src=" „Windows Type Menu(Default)“ ist das Standardelement – das einfachste Aussehen, vertrauter Windows-Stil;
„Benutzerdefiniertes Menü“ Benutzerdefiniertes Menü. Wenn Sie dieses Element auswählen, müssen Sie auch den folgenden Inhalt festlegen:
„Menübreite“, die Breite des Menüs;
„Schriftart“, Schriftart;
„Schriftfarbe“, Schriftfarbe;
„Schriftseite“, Schriftgröße;
„Hintergrundfarbe“, „Hintergrundbild“, Hintergrundfarbe und Hintergrundbild;
Es gibt auch einen „Cursor“, mit dem der Mausstil ausgewählt wird.
Nachdem Sie die oben genannten Einstellungen vorgenommen haben, können Sie auf „Hinzufügen“ klicken, um den Effekt zu erzeugen. Vorschau, ist es gut?
Wie füge ich dann Flash hinzu? So geht's: Fügen Sie der Webseite eine „Tabelle“ hinzu. Es wird empfohlen, die „W“-Breite auf „100 %“ einzustellen. Dies erleichtert die Positionierung der verschiedenen Elemente, die Sie unten hinzufügen. Okay, fügen Sie die Flash-SWF-Datei in die „Tabelle“ ein und stellen Sie die Position auf „Mitte“ ein (hauptsächlich, um die Positionierung zu erleichtern, natürlich können Sie die spezifischen Probleme im Detail analysieren und durch mehr Ausprobieren Erkenntnisse gewinnen).
Tipp: Flash-Animationen können auch mit interaktiven Links erstellt werden. Auf diese Weise können Sie beliebig viele Hyperlinks hinzufügen. Das Plug-in selbst hat ein Limit von bis zu 10 Elementen, das mit Flash gelöst werden kann!