Dieser Artikel beschreibt die Methode zur Implementierung von Navigationseffekten durch JS+CSS. Teilen Sie es für Ihre Referenz. Die spezifische Implementierungsmethode lautet wie folgt:
1. Der Programmcode lautet wie folgt:
Die Codekopie lautet wie folgt: <! DocType html public "-// w3c // dtd xhtml 1.1 // en" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">>
<html xmlns = "http://www.w3.org/1999/xhtml" xml: Lang = "en">
<kopf>
<meta http-äquiv = "content-type" content = "text /html; charset = utf-8" />
<titels> CSS+JS implementiert ein unendliches Dropdown-Menü mit guter Kompatibilität </title>
<style type = "text/css">
*{Margin: 0; Polsterung: 0; Grenze: 0;}
Körper {Schrift: 12px/130% Verdana, Genf, Arial, Helvetica, Sans-Serif, 安体;} li {Listenstil: Keine;}
.ClearFix: Nach {Inhalt: ""; Anzeige: Block; Höhe: 0; Clear: Beide; Sichtbarkeit: versteckt;}. ClearFix {Anzeige: Inline-Block;}
A: Link {Farbe:#000; Textdekoration: Keine; }
A: besucht {Farbe:#000; Textdekoration: Keine; }
A: Hover {Farbe:#000; Textdekoration: Keine; }
.Menu {Breite: 778px; Höhe: 26px; Hintergrund: #ffff; Rand: 0 Auto;}
.menusel {float: links; Breite: 100px; Position: Relativ; Höhe: 25px; Hintergrund: #ddd; Zeilenhöhe: 25px; Rand-Links: 1PX; *Margin-Links: 0px; _margin-links: -1px;}
.Menusel H2 {Schriftgröße: 12px; }
.menusel a {display: block; text-align: center; Breite: 100px; Grenze: 1px fest #a4a4a4; Höhe: 25px; Grenzboden: 1PX Solid #a4a4a4; Position: Relativ; Z-Index: 2;}
.Menusel A: Hover {Grenze: 1PX Solid #a4a4a4; Border-Bottom: 1PX gestrichelt #eeeeeeeee; Position: Relativ; Z-Index: 2; Höhe: 25px;}
.AHOver a {Border-Bottom: 1PX gestrichelt #eeeeeeeee; Hintergrund: #eeeeeeeee; }
.position {Position: absolut; Z-Index: 1;}
.menusel ul {width: 125px; Hintergrund: #eee; Grenze: 1PX Solid #a4a4a4; Rand: -1px; Position: Relativ; Z-Index: 1; Anzeige: keine;}
.menusel .block {display: block;}
.Typeul li {Border-Bottom: 1PX gestrichelt #a4a4a4; Breite: 125px; Position: Relativ; float: links; }
.Typeul li a {Border: Keine; Breite: 125px; }
.Typeul li a: schwebe {border: keine; Hintergrund: #ddd;}
.Typeul {margin-links: 0; }
.Typeul ul {links: 125px; Top: 0; Position: absolut;}
.fli {margin -links: -1px; Border-Links: #eeeeee Solid 1px;}
.Menusel .lli {Border: Keine; }
</style>
<script type = "text/javaScript"> document.execcommand ("HintergrundImageCache", false, true);
</head>
<body>
<div>
<div id = "mseu1">
<H2> <a href = "/"> Menü 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> Menüoption 1-2 </a> </li>
<li>
<a href = "#"> Menüoption 1-2 </a>
<ul>
<li> <a href = "#"> Menüoption 1-2-1 </a> </li>
<li> <a href = "#"> Menüoption 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> Menüoption 1-2 </a> </li>
<li> <a href = "#"> Menüoption 1-2 </a> </li>>
</ul>
</div> <!-Position->
</div> <!-Menusel->
<div id = "mseu2">
<H2> <a href = "#"> Menü 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Menüoption 2-2 </a> </li>>
<li> <a href = "#"> Menüoption 2-2 </a>
<ul>
<li> <a href = "#"> Menüoption 2-2-1 </a> </li>
<li> <a href = "#"> Menüoption 2-2-2 </a>
<ul>
<li> <a href = "#"> Menüoption 2-2-1 </a> </li>
<li> <a href = "#"> Menüoption 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Menüoption 2-2 </a> </li>>
<li> <a href = "#"> Menüoption 2-2 </a> </li>>
</ul>
</div> <!-Position->
</div> <!-Menusel->
<div id = "mseu3">
<H2> <a href = "#"> Menü 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Menüoption 3-2 </a> </li>>
<li> <a href = "#"> Menüoption 3-2 </a>
<ul>
<li> <a href = "#"> Menüoption 3-2-1 </a> </li>
<li> <a href = "#"> Menüoption 3-2-2 </a>
<ul>
<li> <a href = "#"> Menüoption 3-2-1 </a> </li>
<li> <a href = "#"> Menüoption 3-2-2 </a>
<ul>
<li> <a href = "#"> Menüoption 3-2-1 </a> </li>
<li> <a href = "#"> Menüoption 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Menüoption 3-2 </a> </li>>
<li> <a href = "#"> Menüoption 3-2 </a> </li>>
</ul>
</div> <!-Position->
</div> <!-Menusel->
</div> <!-Menü->
<script type = "text/javaScript">
für (var x = 1; x <4; x ++)
{
varmenüs = document.getElementById ("Menü"+x);
MenüId.num = x;
Typ();
}
Funktionstyp ()
{
var mseuH2 = mseuId.getElementsByTagName ("H2");
var mseu msemene = mseuId.getElementsByTagName ("ul");
var Menuli = Menü [0] .GetElementsByTagName ("li");
MenusH2 [0] .onmouseover = Show;
mssuH2 [0] .onmouseout = unshow;
Menü [0] .onmouseover = show;
mseu [0] .onmouseout = unshow;
Funktionshow ()
{
Menus [0] .ClassName = "ClearFix Typul Block"
}
Funktion Unshow ()
{
Menus [0] .ClassName = "Typul"
}
für (var i = 0; i <Menuli.length; i ++)
{
Menuli [i] .num = i;
var liul = Menuli [i] .GetElementsByTagName ("ul") [0];
if (liul)
{
Typeshow ()
}
}
Funktionsartikel ()
{
Menuli [i] .onmouseover = Showul;
Menuli [i] .onmouseout = unshowul;
}
Funktionshowul ()
{
Menuli [this.num] .GetElementsByTagName ("ul") [0] .ClassName = "Block";
}
Funktion Unshowul ()
{
Menuli [this.num] .GetElementsByTagName ("ul") [0] .ClassName = "";
}
}
</script>
</body>
</html>
2. Programmeffekte
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.