Dieser Artikel beschreibt die Methode zur Implementierung eines vollständig angepassten Webseite mit der rechten Maustaste mit Multi-Level-Verzeichnissen in JS. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
Dies ist eine sehr gute Webmausfunktion. Dieser Code kann das Rechtsklickmenü der Maus auf der Webseite steuern und wird nach Ihren Wünschen vollständig erstellt. Es kann in mehreren Katalogenebenen angezeigt werden.
Kopieren Sie den Code wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> JS Benutzerdefinierte Webseite Multi-Level-Navigationsmenü </title>
<style type = "text/css">
Html, Körper {Höhe: 100%; Überlauf: versteckt;}
Körper, div, ul, li {Rand: 0; Polster: 0;}
Körper {Schrift: 12px/1,5/5fae/8f6f/96C5/9ed1;}
UL {Listenstil-Typ: Keine;}
#rightmenu {Position: absolut; ober: -9999px; links: -9999px;}
#RightMenu ul {float: links; Rand: 1px Solid #979797; Hintergrund: #F1F1F1 URL (Bilder/Zeile.png) 24px 0 Wiederholt-y; Padding: 2px; Box-Shadow: 2px 2px 2px RGBA (0,0,0, .6);};};};};};};};
#Rightmenu ul li {float: links; klar: beide; Höhe: 24px; Cursor: Zeiger; Linienhöhe: 24px; weißer Raum: Nowrap; Polster: 0 30px;}
#Rightmenu ul li.sub {Hintergrundrepeat: No-Repeat; Hintergrundposition: Recht 9px; Hintergrund-Image: URL (Bilder/Pfeil.png);}
#Rightmenu ul li.active {Hintergrundfarbe: #f1f3f6; Border-Radius: 3px; Rand: 1PX Solid #aecff7; Höhe: 22px; Linienhöhe: 22px; Hintergrundposition: rechts -8px; Padding: 0 29px;}
#Rightmenu ul ul {display: keine; Position: absolut;}
</style>
<script type = "text/javaScript">
var getOffset = {
Oben: Funktion (obj) {
Return obj.offsettop + (obj.offsetParent? Argumente.Callee (obj.offsetparent): 0)
},
Links: Funktion (obj) {
Return obj.offsetleft + (obj.offsetParent? Argumente.Callee (obj.offsetParent): 0)
}
};
window.onload = function ()
{
var Omenu = document.getElementById ("rightMenu");
var aul = omenu.getElementsByTagName ("ul");
var ali = omenu.getElementsByTagName ("li");
var showtimer = hidetimer = null;
var i = 0;
var maxwidth = maxHeight = 0;
var adoc = [document.documentElement.offsetwidth, document.documentElement.offseteight];
Omenu.Style.display = "None";
für (i = 0; i <ali.length; i ++)
{
// Fügen Sie dem LI, das das Untermenü enthält, einen Pfeil hinzu
Ali [i] .GetElementsByTagName ("ul") [0] && (ali [i] .classname = "sub");
//Einziehen
ali [i] .onmouseover = function ())
{
var othis = this;
var Oul = othis.getElementsByTagName ("ul");
// Bewegen Sie die Maus in Stil
othis.className += "active";
// Untermenü zeigen
if (Oul [0])
{
Clearimeout (Hidetimer);
showtimer = setTimeout (function ()
{
für (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(Othis.Parentnode.Children [i] .GetElementsByTagName ("ul") [0] .Style.display = "None");
}
Oul [0] .Style.Display = "Block";
Oul [0] .Style.top = othis.offsettop + "px";
OUl [0] .Style.Left = othis.Offsetwidth + "px";
setwidth (OUL [0]);
// Maximale Anzeigebereich
maxwidth = adoc [0] - OUL [0] .Offsetwidth;
maxHeight = adoc [1] - OUL [0] .Offseteight;
// Überlauf verhindern
maxwidth <getOffset.left (OUL [0]) && (OUL [0] .Style.Left = -Oul [0] .Clientwidth + "px");
MaxHeight <getOffset.top (OUL [0]) && (OUL [0] .Style.top = -Oul [0] .ClientHeight + othis.offsettop + othis.clientHeight + "px")
}, 300);
}
};
// Maus aus
ali [i] .onmouseout = function ())
{
var othis = this;
var Oul = othis.getElementsByTagName ("ul");
// Mouse -out -Stil
othis.className = othis.className.replace (// s? Active/"," ");
Clearimeout (Showtimer);
hidetimer = setTimeout (function ()
{
für (i = 0; i <othis.parentnode.children.length; i ++)
{
othis.parentnode.children [i] .getElementsByTagName ("ul") [0] &&
(Othis.Parentnode.Children [i] .GetElementsByTagName ("ul") [0] .Style.display = "None");
}
}, 300);
};
}
// Passen Sie das Menü mit der rechten Maustaste an
document.oncontextMenu = Funktion (Ereignis)
{
var event = event || Fenster.Event;
Omenu.Style.display = "Block";
Omenu.Style.top = event.clienty + "px";
Omenu.Style.Left = Event.clientX + "px";
setwidth (aul [0]);
// Maximale Anzeigebereich
maxwidth = adoc [0] - Omenu.Offsetwidth;
MaxHeight = adoc [1] - Omenu.Offseteight;
// Menüüberlauf verhindern
Omenu.offsettop> MaxHeight && (Omenu.style.top = maxHeight + "px");
Omenu.offsetleft> maxwidth && (Omenu.Style.Left = maxwidth + "px");
false zurückgeben;
};
// Klicken Sie Klicken, um das Menü auszublenden
document.onclick = function ()
{
Omenu.Style.display = "Keine"
};
// Bitte die größte Breite in LI und zuordnen sie allen LIs auf derselben Ebene zu
Funktionsetwidth (OBJ)
{
MaxWidth = 0;
für (i = 0; i <obj.children.length; i ++)
{
var oli = obj.children [i];
var iwidth = oli.clientwidth - parseInt (oli.currentStyle? oli.currentStyle ["paddingleft"]: getComputedstyle (oli, null) ["paddingleft"]) * 2
if (iwidth> maxwidth) maxwidth = iwidth;
}
für (i = 0; i <obj.children.length; i ++) obj.children [i] .style.width = maxwidth+"px";
}
};
</script>
</head>
<body>
<Center> Benutzerdefiniert mit der rechten Maustaste, bitte klicken Sie mit der rechten Maustaste auf die Seite, um den Effekt anzuzeigen. </center>
<div id = "rightMenu">
<ul>
<li> <strong> JavaScript -Lernen </strong> </li>
<li>
Wulin.com
<ul>
<li> Analyse der Webseite Spezialeffektprinzipien </li>
<li> auf Benutzeraktionen antworten </li>
<li> Eingabeaufforderungseffekt </li>
<li> ereignisgesteuert </li>
<li> Elementattributoperation </li>
</ul>
</li>
<li>
www.vevb.com
<ul>
<li> Ändern Sie die Hintergrundfarbe der Webseite </li>
<li> Funktionsparameterübertragung </li>
<li> Schreiben von Funktionen mit hoher Wiederverwendbarkeit </li>
<li> 126 Mailboxauswahleffekt </li>
<li> Loop- und Traversal -Operationen </li>
</ul>
</li>
<li>
Lektion 3
<ul>
<li>
JavaScript -Komposition
<ul>
<li> ecmascript </li>
<li> Dom </li>
<li> bom </li>
<li> JavaScript -Kompatibilitätsquellen </li>
</ul>
</li>
<li> Ort, Vor- und Nachteile von JavaScript </li>
<li> Variablen, Typen, Typof, Datentypkonvertierung, variabler Bereich </li>
<li>
Schließung
<ul>
<li> Was ist ein Verschluss </li>
<li> Einfache Anwendung </li>
<li> Nachteile schließen </li>
</ul>
</li>
<li> Operator </li>
<li> Programmflussregelung </li>
<li>
Verwendung von Timern
<ul>
<li> setInterval </li>
<li> setTimeout </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.