Este artículo describe el método para implementar los efectos de navegación por JS+CSS. Compártelo para su referencia. El método de implementación específico es el siguiente:
1. El código del programa es el siguiente:
La copia del código es la siguiente: <! 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">
<Evista>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> CSS+JS implementa un menú desplegable de nivel infinito con buena compatibilidad </title>
<style type = "text/css">
*{margen: 0; relleno: 0; Border: 0;}
Cuerpo {Font: 12px/130% Verdana, Ginebra, Arial, Helvetica, Sans-Serif, 安体;} li {list-style: none;}
.CLearFix: After {content: ""; Display: Block; Height: 0; Clear: Ambos; Visibilidad: Hidden;}. ClearFix {Display: Inline-Block;}
A: enlace {color:#000; Decoración de texto: ninguna; }
A: visitado {color:#000; Decoración de texto: ninguna; }
A: Hover {Color:#000; Decoración de texto: ninguna; }
.menu {ancho: 778px; Altura: 26px; Antecedentes: #ffff; margen: 0 auto;}
.Menusel {float: izquierda; ancho: 100px; Posición: relativo; Altura: 25px; Antecedentes: #DDD; Línea de altura: 25px; margen-izquierda: 1px; *Margen-izquierda: 0px; _Margin-Left: -1px;}
.Menusel H2 {Font-Size: 12px; }
.Menusel a {Display: Block; Text-Align: Center; Ancho: 100px; borde: 1px sólido #a4a4a4; Altura: 25px; Border-Bottom: 1px Solid #A4A4A4; Posición: relativo; Índice z: 2;}
.Menusel A: Hover {Border: 1px Solid #A4A4A4; Border-Bottom: 1px Dable #EEEEEEEE; Posición: relativo; índice z: 2; Altura: 25px;}
.AHOVER A {Border-Bottom: 1px Dable #EEEEEEEE; Antecedentes: #EEEEEEEE; }
.Position {posición: absoluto; Índice z: 1;}
.menusel ul {ancho: 125px; Antecedentes: #EEE; borde: 1px sólido #a4a4a4; margen -top: -1px; Posición: relativo; índice z: 1; Pantalla: ninguno;}
.Menusel .Block {Display: Block;}
.Typeul Li {Border-Bottom: 1px Dable #a4a4a4; ancho: 125px; Posición: relativo; flotante: izquierda; }
.typeul li a {borde: ninguno; ancho: 125px; }
.typeul li a: hover {border: none; Antecedentes: #ddd;}
.typeul {margen-izquierda: 0; }
.typeul ul {izquierda: 125px; arriba: 0; Posición: Absoluto;}
.fli {margen -izquierda: -1px; Border-izquierda: #EEEEEE SOLID 1PX;}
.menusel .lli {borde: ninguno; }
</style>
<script type = "text/javaScript"> document.execCommand ("backgroundImageCache", false, true); </script> <!-Ie6 Problema de parpadeo de imágenes de fondo->
</ablo>
<Body>
<div>
<div id = "menú1">
<h2> <a href = "/"> menú 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> Opción de menú 1-2 </a> </li>
<li>
<a href = "#"> opción de menú 1-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 1-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> Opción de menú 1-2 </a> </li>
<li> <a href = "#"> Opción de menú 1-2 </a> </li>
</ul>
</div> <!-posición->
</div> <!-Menusel->
<div id = "menú2">
<h2> <a href = "#"> menú 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Opción de menú 2-2 </a> </li>
<li> <a href = "#"> Opción de menú 2-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 2-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 2-2-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 2-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Opción de menú 2-2 </a> </li>
<li> <a href = "#"> Opción de menú 2-2 </a> </li>
</ul>
</div> <!-posición->
</div> <!-Menusel->
<div id = "menú3">
<h2> <a href = "#"> menú 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Opción de menú 3-2 </a> </li>
<li> <a href = "#"> Opción de menú 3-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 3-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 3-2-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 3-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 3-2-2 </a>
<ul>
<li> <a href = "#"> Opción de menú 3-2-1 </a> </li>
<li> <a href = "#"> Opción de menú 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Opción de menú 3-2 </a> </li>
<li> <a href = "#"> Opción de menú 3-2 </a> </li>
</ul>
</div> <!-posición->
</div> <!-Menusel->
</div> <!-menú->
<script type = "text/javaScript">
para (var x = 1; x <4; x ++)
{
var menuid = document.getElementById ("menú"+x);
menuid.num = x;
tipo();
}
Tipo de función ()
{
var menúh2 = menuid.getElementsBytagName ("H2");
var menúul = menuid.getElementsBytagName ("UL");
var menuli = Menuul [0] .getElementsBytagName ("Li");
menúh2 [0] .onmouseover = show;
menúh2 [0] .onmouseOut = Unshow;
Menuul [0] .onmouseover = show;
Menuul [0] .onmouseOut = unshow;
función show ()
{
Menuul [0] .className = "ClearFix Typeul Block"
}
función unshow ()
{
Menuul [0] .classname = "typeul"
}
para (var i = 0; i <menuli.length; i ++)
{
Menuli [i] .num = i;
var liul = menuli [i] .getElementsBytagName ("ul") [0];
if (liul)
{
typeshow ()
}
}
function typeshow ()
{
menuli [i] .onmouseover = showul;
menuli [i] .onmouseout = unshowul;
}
función showul ()
{
Menuli [this.num] .getElementsByTagName ("ul") [0] .classname = "bloque";
}
función unshowul ()
{
Menuli [this.num] .getElementsBytagName ("ul") [0] .classname = "";
}
}
</script>
</body>
</html>
2. Efectos del programa
Espero que este artículo sea útil para la programación de JavaScript de todos.