Primer declarar:
Aunque he trabajado en la posición front-end de la web durante muchos años, no tengo altos requisitos técnicos para el puesto. HTML y CSS se usan con más frecuencia, y hay muy pocos JavaScript originales, y están básicamente modificados. Entonces, cuando realmente escribo, descubrí que la fundación no era sólida, y aprendí y practicé, y gané mucho.
Imagen de reproducción:
No más tonterías, código postal
1. Código CSS
La copia del código es la siguiente:
A: enlace {color: blanco; decoración de texto: ninguno;}
A: Visited {Color: White; Text-Decorative: None;}
A: Hover {Color: White; Text-Decorative: None;}
A: Active {Color: White; Text-Decorative: None;}
li {float: izquierda; pantalla: en línea; color de fondo:#0033366; ancho: 120px; text-align: centro; margen: 2px; relleno: 10px 0 5px 0; posición: relativo;}
.limouseover {Color de fondo:#0033ff; color: rojo;}
.limouseout {Color de fondo:#003366; color: negro;}
li ul {display: none; ancho: 120px; posición: absoluto; izquierda: 0; arriba: 30px;}
li ul li {margin: 0px Auto; border-top: 1px sólido #006699;}
2. Código JavaScript
La copia del código es la siguiente:
<Script Language = JavaScript>
Menú de funciones (menú1) {
// Mueva el mouse dentro y fuera de clase de nombre y oculte y visualiza alternar.
if (document.getElementById (menú1)) {
var menú_ul = document.getElementById (menú1);
if (menú_ul.getElementsBytagName ("Li"). Longitud) {
var menú_li = menú_ul.getElementsBytagName ("li");
para (i en menú_li) {
menú_li [i] .onmouseover = function () {this.classname = "Limouseover"; if (this.getElementsByTagName ("ul"). Longitud) {this.getElementsByTagName ("ul") [0] .style.display = "bloque";}}
menú_li [i] .onmouseout = function () {this.classname = "Limouseout"; if (this.getElementsByTagName ("ul"). Longitud) {this.getElementsByTagName ("ul") [0] .style.display = "Ninguno";}}
}
}
}
}
</script>
3. Código HTML
La copia del código es la siguiente:
<ul id = menú1>
<li> <a href = ""> Home </a> </li>
<li> <a href = ""> Menú 1 Menú 1 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
<li> <a href = ""> menú 2 </a>
<ul>
<li> <a href = ""> submenu1submenu1submenu1submenu1submenu1submenu1 </a> </li>
<li> <a href = ""> submenu 2 </a> </li>
</ul>
</li>
</ul>
<script> var menú1 = nuevo menú ("menú1"); </script>
ilustrar:
1. Teniendo en cuenta que las páginas UL y LI se usan con más frecuencia, puede agregar #menú1 antes de CSS para limitar el alcance del estilo de menú.
2. JS escucha principalmente eventos de movimiento y extracción del mouse, y cambia a estilos de Llouseover y Llouseut; Al mismo tiempo, cambia los atributos de visualización del submenú para lograr la función de mostrar oculto.
3. La misma página se puede llamar repetidamente sin conflicto. El código JavaScript en el código HTML es una instancia de llamada. El menú1 en el anterior es un nombre de variable arbitraria, y el menú1 en los soportes es la ID en la página HTML.
Desventajas de este ejemplo:
1. El mouseover, mouseut y submenu li del menú li son los mismos, es decir, el mismo color y fuente, y no hay una configuración separada.
2. Dado que es compatible con IE6 e IE7, posición: Absolute se usa y se agregan los atributos izquierdo y superior. La parte superior debe establecerse de acuerdo con la altura total del menú li.