Este artigo descreve o método de implementar efeitos de navegação por JS+CSS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
1. O código do programa é o seguinte:
A cópia de código é a seguinte: <! Doctype html public "-// w3c // dtd xhtml 1.1 // pt" "http://www.w3.org/tr/xhtml11/dtd/xhtml11.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> CSS+JS implementa um menu suspenso de nível infinito com boa compatibilidade </title>
<style type = "text/css">
*{margem: 0; preenchimento: 0; fronteira: 0;}
Corpo {Fonte: 12px/130% Verdana, Genebra, Arial, Helvetica, Sans-Serif, 安体;} Li {estilo de lista: nenhum;}
.clearfix: após {content: ""; display: block; altura: 0; limpe: ambos; visibilidade: hidden;}. clearfix {display: inline-block;}
A: link {color:#000; Decoração de texto: Nenhum; }
A: visitado {color:#000; Decoração de texto: Nenhum; }
A: Hover {color:#000; Decoração de texto: Nenhum; }
.menu {width: 778px; Altura: 26px; Antecedentes: #ffff; margem: 0 automático;}
.menusel {float: esquerda; largura: 100px; Posição: relativa; Altura: 25px; Antecedentes: #DDD; altura de linha: 25px; margem-esquerda: 1px; *margem-esquerda: 0px; _margin-left: -1px;}
.Menusel H2 {Size da fonte: 12px; }
.menusel a {display: block; text-align: Center; Largura: 100px; borda: 1px Solid #A4A4A4; Altura: 25px; fundo de borda: 1px Solid #A4A4A4; Posição: relativa; Z-Index: 2;}
.Menusel A: Hover {Border: 1px Solid #A4A4A4; Bottom de fronteira: 1px #eeeeeeeeeeeeeee; Posição: relativa; Z-Index: 2; Altura: 25px;}
.aHover a {Border-Bottom: 1px tracejado #eeeeeeee; Antecedentes: #eeeeeee; }
.Position {Posição: Absolute; Z-Index: 1;}
.menusel ul {width: 125px; Antecedentes: #eee; borda: 1px Solid #A4A4A4; margin -top: -1px; Posição: relativa; Z-Index: 1; Exibição: Nenhum;}
.Menusel .Block {Display: Block;}
.TYPEUL Li {Border-Bottom: 1px tracejado #A4A4A4; Largura: 125px; Posição: relativa; flutuar: esquerda; }
.Typeul li a {borda: nenhum; largura: 125px; }
.Typeul Li A: Passe o mouse {Border: Nenhum; Antecedentes: #ddd;}
.Typeul {margem-esquerda: 0; }
.Typeul ul {esquerda: 125px; topo: 0; Posição: Absoluto;}
.fli {margin -left: -1px; Border-left: #eeeeeeeeeeee 1px;}
.menusel .lli {border: Nenhum; }
</style>
<script type = "text/javascript"> document.execCommand ("backgroundImageCache", false, true); </sCript> <!-IE6 Problema de tremeluzência da imagem de fundo->
</head>
<Body>
<div>
<div id = "MENU1">
<H2> <a href = "/"> menu 1 </a> </h2>
<div>
<ul>
<li> <a href = "// www.vevb.com"> Opção de menu 1-2 </a> </li>
<li>
<a href = "#"> Opção de menu 1-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 1-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 1-2-2 </a> </li>
</ul>
</li>
<li> <a href = "// www.vevb.com"> Opção de menu 1-2 </a> </li>
<li> <a href = "#"> Opção de menu 1-2 </a> </li>
</ul>
</div> <!-Posição->
</div> <!-Menusel->
<div id = "menu2">
<H2> <a href = "#"> menu 2 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Opção de menu 2-2 </a> </li>
<li> <a href = "#"> Opção de menu 2-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 2-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 2-2-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 2-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 2-2-2 </a>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Opção de menu 2-2 </a> </li>
<li> <a href = "#"> Opção de menu 2-2 </a> </li>
</ul>
</div> <!-Posição->
</div> <!-Menusel->
<div id = "menu3">
<H2> <a href = "#"> menu 3 </a> </h2>
<div>
<ul>
<li> <a href = "#"> Opção de menu 3-2 </a> </li>
<li> <a href = "#"> Opção de menu 3-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 3-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 3-2-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 3-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 3-2-2 </a>
<ul>
<li> <a href = "#"> Opção de menu 3-2-1 </a> </li>
<li> <a href = "#"> Opção de menu 3-2-2 </a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li> <a href = "#"> Opção de menu 3-2 </a> </li>
<li> <a href = "#"> Opção de menu 3-2 </a> </li>
</ul>
</div> <!-Posição->
</div> <!-Menusel->
</div> <!-menu->
<script type = "text/javascript">
for (var x = 1; x <4; x ++)
{
var menuID = document.getElementById ("menu"+x);
menuid.num = x;
tipo();
}
Tipo de função ()
{
var menuH2 = MENUD.GETELEMENTSBYTAGNAME ("H2");
var menuLul = MENUDID.GETELEMENTSBYTAGNAME ("UL");
var menuli = menuLul [0] .getElementsByTagName ("li");
MENUH2 [0] .onMouseOver = show;
MENUH2 [0] .ONMOUSEOUT = desvio;
menul [0] .onMouseOver = show;
MENULUL [0] .ONMOUSEOUT = desvio;
função show ()
{
MENULUL [0] .className = "ClearFix Typeul Block"
}
função desproporcional ()
{
menu [0] .className = "typeul"
}
for (var i = 0; i <menuli.length; i ++)
{
menuli [i] .num = i;
var liul = menuli [i] .getElementsByTagName ("ul") [0];
If (Liul)
{
TypeShow ()
}
}
Função TypeShow ()
{
menuli [i] .onmouseOver = showul;
menuli [i] .onmouseout = não -calmo;
}
função showul ()
{
menuli [this.num] .getElementsByTagName ("ul") [0] .className = "Block";
}
função algowul ()
{
menuli [this.num] .getElementsByTagName ("ul") [0] .className = "";
}
}
</script>
</body>
</html>
2. Efeitos do programa
Espero que este artigo seja útil para a programação JavaScript de todos.