Archivo de la categoría ‘jQuery’

Videotutorial: Cómo hacer un plugin jQuery – Menú acordeón multinivel

miércoles, 3 de marzo, 2010

Respondiendo a la multitud de peticiones en los comentarios del artículo sobre cómo crear un menú en acordeón, aquí os muestro cómo hacer el mismo menú pero con soporte para varios niveles.
Este menú está basado en el anterior, y como apenas necesitaba un pequeño cambio en el javascript para hacerlo multinivel, he aprovechado para convertirlo en un plugin y enseñaros en un screencast cómo hacer vuestros propios plugins en jQuery.

Ver Demo menú acordeón multinivel
Leer el resto de la entrada »

Menú vertical en acordeón con CSS y jquery

miércoles, 7 de octubre, 2009

menu_acordeonA pesar del buen feedback recibido sobre mi serie de tutoriales de CodeIgniter, los artículos sobre menús animados con CSS y javascript siguen siendo los más populares en este sitio, y parece que son bastante útiles para la gente que está empezando. Por ello hoy me tomo un pequeño respiro de los videotutoriales y voy a enseñaros cómo hacer el clásico menú vertical en acordeón con CSS y jQuery.
El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado desplegable con CSS y jquery

jueves, 9 de julio, 2009

menu_desplegableTras el inesperado éxito de mi artículo Menú animado con CSS y jquery, me he decidido a escribir un nuevo tutorial sobre creación de menús: cómo hacer un menú horizontal animado desplegable con CSS y jquery. Cada elemento del menú horizontal contendrá un submenú vertical que se desplegará con una animación. A su vez, al pasar el ratón sobre cada entrada del submenú éste cambiará de color de forma gradual. El resultado lo puedes ver aquí: Ver demo
Leer el resto de la entrada »

Menú animado con CSS y jquery

domingo, 17 de mayo, 2009

La diferencia entre un buen diseño y un diseño genial puede estar en pequeños detalles que proporcionen mayor riqueza visual, como los menús animados realizados habitualmente en Adobe Flash. Como no soy amigo del Flash (*insertar aquí delirio sobre porqué los desarrolladores serios odiamos flash*), voy a mostraros cómo hacer un menú similar al que tenemos en la cabecera de esta web usando CSS Sprites y javascript (jQuery).

Preparando las imágenes

En primer lugar montaremos los tres estados del botón (normal, hover y activo) en un sprite tal que así:

homeboton

La técnica de sprites consiste en utilizar una única imagen para todos los casos, mostrando sólo la parte que nos interesa mediante la propiedad background-position. La altura de la imagen es de 30px, de manera que para mostrar cada bloque cambiaremos la posición vertical del fondo a 0, 30px o 60px según el fragmento.
Leer el resto de la entrada »

RSS iTunes podcast Twitter

Categorías

Enlaces

Archivos