Este es un menú muy simple, aunque simple, podemos aprender algunos conocimientos relevantes sobre CSS y JavaScript a partir de este ejemplo, lo cual es de gran beneficio para comprender los principios y conceptos básicos de la creación de menús desplegables. En este ejemplo, utilicé una etiqueta DIV como columna del menú desplegable y una TABLA como encabezado del menú. El principio es cambiar los atributos de visualización de la columna del menú desplegable identificando los movimientos del mouse.
El siguiente es el efecto de este menú DIV. Puede hacer clic en cualquier espacio en blanco de la página para cancelar la visualización del menú desplegable.
Sitio de tecnología de revista sitio de portal sitio de colección personal
Yesky.com
Información del distribuidor de computadoras
electrónica de moda
Siná
sohu sohu
Netease Netease
Estación de programación de red de mouse
Récord de compañeros de clase chinos
Bueno,
Red de Desarrollo de Software de China
, si te dijera que tal efecto solo requeriría docenas de líneas de código, ¿lo creerías?De todos modos, aprendamos cómo hacer este menú paso a paso. Paso a paso, vamos.
El primer paso es definir las hojas de estilo en cascada CSS para los elementos y columnas del menú. Aquí, si no sabe qué significa CSS, consulte el tutorial sobre CSS en "Sitio web de noticias informáticas". Definimos dos clases de CSS, una es Meun y la otra es SubMenú. El menú define el estilo que se muestra en la parte superior del menú y el Submenú define el estilo de visualización de la columna del menú desplegable. Aquí, lo que hay que tener en cuenta es el atributo CSS "posición:absoluta;ancho:200" en el submenú. Esto es necesario porque determina la posición donde mostramos el submenú. Otras propiedades CSS son opcionales. La siguiente es la descripción de estas dos clases de CSS. Puede colocar el siguiente párrafo entre <head></head> o <body></body> del sitio web.
<ESTILO>
<!--
.menu {color de fondo: verde; ancho: 120; alto: 20; color: blanco; alineación de texto: centro; tamaño de fuente: 9 puntos; peso de fuente: más negrita}
.submenu {posición:absoluta;arriba:40;color de fondo:amarillo claro;ancho:180;tamaño de fuente:9pt}
-->
</ESTILO>
En el segundo paso, echemos un vistazo al código Javascript para ocultar y mostrar las columnas del menú desplegable. Este código es muy simple y debería ser fácil de entender para cualquiera que haya aprendido un poco de JavaScript. Si no comprende Javascript, consulte también los artículos sobre JavaScript en el "Sitio web de noticias informáticas". El significado de este código es que cada vez que el mouse ingresa al elemento del menú (Menú), su columna del menú desplegable se mostrará mediante una función llamada Mostrar. La función principal de esta función Mostrar es mostrar la columna del menú desplegable actual, ocultar otras columnas del menú y colocar el elemento del menú que se muestra actualmente en la variable cm. Además, aquí también agregué un controlador de evento de clic del mouse simple (onclick). Cuando el mouse hace clic en la página web, todas las columnas del menú desplegable se ocultarán. A continuación, proporciono el programa Javascript completo, que incluye una función llamada getPos, que se utiliza para obtener la posición de visualización de la columna del menú desplegable.
<guión>
varcm=nulo;
document.onclick = nueva función ("mostrar (nulo)")
función getPos(el,sProp)
{var iPos = 0
mientras (el!=nulo)
{iPos+=el["desplazamiento" + sProp]
el = el.offsetParent}
devolver iPos}
función mostrar(el,m)
{si (m) {m.style.display=' ';
m.style.pixelLeft = getPos(el,"Izquierda")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight}
if ((m!=cm) && (cm)) cm.style.display='none' cm=m }
</SCRIPT>