Primeiro declare:
Embora eu tenha trabalhado na posição de front-end da Web por muitos anos, não tenho altos requisitos técnicos para a posição. HTML e CSS são usados com mais frequência e existem muito poucos JavaScript original e são basicamente modificados. Então, quando realmente escrevo, descobri que a fundação não era sólida, aprendi e pratiquei, e ganhei muito.
Imagem de reprodução:
Não há mais bobagem, código de postagem
1. Código CSS
A cópia do código é a seguinte:
A: link {cor: branco; decoração de texto: nenhum;}
A: Visitado {Color: White; Text-Decorative: Nenhum;}
A: Hover {Color: White; Text-Decorative: Nenhum;}
A: ativo {cor: branco; decorativo de texto: nenhum;}
li {float: esquerda; display: inline; cor de fundo:#003366; largura: 120px; text-align: centro; margem: 2px; preenchimento: 10px 0 5px 0; posição: relativa;}
.limouseOver {Background-Color:#0033ff; cor: vermelho;}
.limouseout {Background-Color:#003366; cor: preto;}
li ul {display: nenhum; largura: 120px; posição: absoluto; esquerda: 0; top: 30px;}
li ul li {margem: 0px Auto; Border-top: 1px Solid #006699;}
2. Código JavaScript
A cópia do código é a seguinte:
<idioma do script = javascript>
Menu da função (menu1) {
// Mova o mouse para dentro e para fora do nome da classe alternar e ocultar e exibir alternar.
if (document.getElementById (menu1)) {
var menus_ul = document.getElementById (menu1);
if (menus_ul.getElementsByTagName ("li"). comprimento) {
var menus_li = menu_ul.getElementsByTagName ("li");
para (i em menus_li) {
MENU_LI [i] .onMouseOver = function () {this.className = "LimouseOver"; if (this.getElementsByTagName ("ul"). Length) {this.getElementsByTagName ("Ul") [0] .style.display = "Block";}}
MENU_LI [i] .onMouseOut = function () {this.className = "Limouseout"; if (this.getElementsByTagName ("ul"). Length) {this.getElementsByTagName ("ul") [0] .style.display = "Nenhum";}}
}
}
}
}
</script>
3. Código HTML
A cópia do código é a seguinte:
<ul id = menu1>
<li> <a href = ""> home </a> </li>
<li> <a href = ""> menu 1 menu 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1Submenu1Submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> menu 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1Submenu1Submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<Cript> var menu1 = novo menu ("MENU1"); </script>
ilustrar:
1. Considerando que as páginas UL e LI são usadas com mais frequência, você pode adicionar #menu1 antes do CSS para limitar o escopo do estilo de menu.
2. JS ouve principalmente eventos de movimento e remoção do mouse e muda para os estilos de LimouseOver e Limouseout; Ao mesmo tempo, altera os atributos de exibição do submenu para alcançar a função de exibir oculta.
3. A mesma página pode ser chamada repetidamente sem conflito. O código JavaScript no código HTML é uma instância de chamada. O menu1 no anterior é um nome de variável arbitrário, e o menu1 nos colchetes é o ID na página HTML.
Desvantagens deste exemplo:
1. O MouseOver, o MouseOut e o submenu li do menu li são os mesmos, ou seja, a mesma cor e fonte, e não há configuração separada.
2. Como é compatível com o IE6 e o IE7, a posição: Absoluto é usado e os atributos esquerdo e superior são adicionados. O topo deve ser definido de acordo com a altura geral do menu li.