Este tutorial explicará paso a paso cómo usar JQuery y CSS para crear un menú dinámico interesante. La función "escribir menos, hacer más" de jQuery es bien conocida por todos. Incluso las personas sin una amplia experiencia en programación JS pueden aprender rápidamente a usarla a través de la API que proporciona. Por supuesto, si tiene experiencia, todavía la recomiendo. Puedes comprender los principios de implementación de cada función principal de jQuery. No hablemos de otras cosas, solo veamos cómo usarlo para lograr el efecto mágico del menú.
.jpg)
Puede hacer clic para ver la demostración o descargar el código fuente .
Paso 1: estructura HTML
Eche un vistazo al código HTML del menú. No es diferente del código de menú normal:
<div id="menú" clase="menú">
<ul>
<li><a href="javascript:;">Inicio</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Recursos</a></li>
<li><a href="javascript:;">Tutoriales</a></li>
<li><a href="javascript:;">Acerca de</a></li>
</ul>
</div>
La clave es usar secuencias de comandos para crear varias capas separadas en cada punto de anclaje (un elemento), de modo que se puedan controlar para que se animen por separado cuando se pasa el mouse. Para hacer esto, necesitamos modificar la estructura del DOM cuando se carga el DOM para que cada código de anclaje quede de la siguiente manera:
<a href="javascript:;">
<span class="out">Inicio</span>
<span class="bg"></span>
<span class="over">Inicio</span>
</a>
El contenido de cada punto de anclaje original se agregará a dos elementos de extensión (.out y .over), y el otro elemento de extensión (.bg) es la capa de imagen de fondo.
En cuanto a cómo modificar la estructura DOM, el código JS se explicará en el Paso 3.
Paso 2: estilo CSS
En el ejemplo, se muestran dos estilos, uno con una imagen de fondo y otro sin imagen de fondo (consulte la demostración para obtener más detalles). También puede personalizar libremente su propio estilo para diseñar un menú más atractivo. Aquí se muestran los estilos básicos y su explicación. :
/* El siguiente es el estilo básico del menú.
*/.menuulli{
flotador: izquierda;
/* El contenido del subelemento del menú está más allá de la visibilidad */
desbordamiento: oculto;
/* Algunos códigos se omiten a continuación*/
}
.menu ul li a {
/* Debe ser un posicionamiento relativo */
posición: relativa;
mostrar: bloquear;
ancho: 110px;
/* Algunos códigos se omiten a continuación*/
}
.menu ul li un lapso {
/* Todas las capas utilizarán posicionamiento absoluto */
posición: absoluta;
izquierda: 0;
ancho: 110px;
}
.menu ul li a span.out {
arriba: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Inicialmente, la capa .over y la capa .bg son -45px en relación con el elemento a para lograr el efecto oculto*/
arriba: -45px;}/
*El siguiente es un ejemplo del uso de una imagen de fondo*/
#menú {
/*Fondo del menú*/
fondo:url(bg_menu.gif) desplazamiento 0 -1px repetir-x;
borde: 1px sólido #CCC;}
#menú ul li a {
color: #000;
}
#menu ul li un lapso.sobre {
color: #FFF;
}
#menú ul li span.bg {
/* Especificar altura e imagen de fondo*/
altura: 45 píxeles;
fondo: url(bg_over.gif) centro centro sin repetición;
}
También puede personalizar el estilo CSS usted mismo, y aquí también se proporciona una versión simplificada del estilo ( ver demostración )