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í:
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.
Las etiquetas XHTML
Al contrario que en otras soluciones de menús animados que podemos encontrar por la red, en este método únicamente vamos a usar el markup necesario, no añadiremos etiquetas <span> vacías extra para añadir funcionalidad. Para simplificar incluiremos solo el elemento del ‘Home’:
<ul id="nav"> <li id="home"> <a href="#">Home</a> </li> </ul> |
Añadiendo el CSS
Haremos que tanto el <li> como el <a> sean de la misma medida fija, para poder jugar con la posición del background. Indentamos el texto para hacerlo desaparecer, de esta manera el menú será completamente accesible y semántico.
ul#nav{ background: transparent url('images/menu.png') no-repeat top left; } ul#nav, ul#nav li{ margin:0; padding:0; height:30px; width:83px; list-style:none; float:left; } ul#nav li#home a{ height:30px; width:83px; display:block; text-indent:-9999px; background: url('images/menu.png') bottom left; } ul#nav li#home a:active, ul#nav li.activo{ background: url('images/menu.png') 0px 60px; } |
El background del <ul> mostrará la parte superior de la imagen, es decir el estado normal del botón. El enlace contendrá la parte inferior, desplazada mediante el background-position, y permanecerá oculto con javascript hasta que pasemos el ratón por encima. Finalmente el <li> solo tendrá background si nos encontramos en la sección activa del menú, o estamos pulsando el botón (pseudoclase :active).
Entra jQuery
Y ahora viene la madre del cordero, un poco de ‘jQuery magic’:
$(function() { $("ul#nav li a").css("opacity","0").hover(function() { // on mouse over $(this).stop().animate({ opacity: 1 }, 400); }, // on mouse out function() { $(this).stop().animate({ opacity: 0 }, 400); }); }); |
Sencillo, ¿verdad? Simplemente cambiamos la opacidad del enlace a 0 al cargar, para que no veamos el fondo que contiene el fragmento hover de la imagen. Después adjuntamos el evento para aumentar la opacidad del enlace hasta hacer visible su fondo cuando pasamos el ratón por encima, realizando la operación inversa al retirar el ratón.
Como puedes ver el funcionamiento de este menú se basa en aprovechar la jerarquía de la lista del menú, apilando fondos en el <ul>, <li> y <a> y mostrando el que nos interesa.
Hola… esta interesante todo este tema de no usar flash y tener los mismos resultados… pero tengo dudas sobre como hacer bien lo que muestras aquí… porque no si harán falta archivos que hay que vincular al html o que… podrías explicarme mejor vía mail.. o ampliando tu tutoría, en todo caso muchas gracias
@Alex Lo complicado de estas cosas en realidad es pensar cómo hacerlo, después implementarlo es fácil. No necesitas nada más de lo pone en el artículo. El CSS lo metes en un archivo, el javascript en otro, y los incluyes, mas las imágenes en su ruta correcta. Lo único que he obviado es que hay que añadir la librería jQuery, por supuesto. Puedes echarle un vistazo al fuente de esta web, a la cabecera, y veras el menú completo. De todas formas si no te aclaras con algo, no dudes en preguntar 🙂
Este ha sido mi primer contacto con jQuery y francamente… impresionante…
He bajado de la página oficial de jQyery la librería para Dreamweaver CS3.
* Sabrías explicarme como la instalo o la ubicacion en carpetas donde ha de ir en Adobe/Dreamweaver.
La cosa está en que me has confundido jeje, ya que en elejmplo siguiente del menu despleglabe, llamas a las funciones através de una URL, que diferencia hay entre poseerlas o usarlas de otro servidor..
Gracias de antemano y felicidades por estos aportes!!
@Daniel No utilizo Dreamweaver, así que no sé como funcionará ese paquete preparado para Dreamweaver, de todas formas simplemente bajando el .js y colocándolo en el raíz donde tengas la web (o en una carpeta siempre que la referencies) es suficiente, no tiene misterio.
Lo de cargar la librería mediante una URL, es porque Google tiene un repositorio de varias librerías javascript, entre ellas jQuery, para que puedas cargarlas desde sus servidores. Las ventajas son varias: los que visiten tu web bajarán jQuery de Google (por lo tanto no usarán tu ancho de banda), Google envía la librería comprimida con gzip por lo que cargará más rápido, y además si el cliente ya ha visitado otra web que cargue jQuery desde Google (cada vez más común) la tendrá cacheada y no tendrá que bajársela (ahorrando tiempo de carga). Como ves, son todo ventajas, la única pega es que si Google se cae la librería no se cargaría, pero eso es poco probable 🙂
Muchísimas gracias por la pronta respuesta. Vale, estaba algo despistado sobre el tema. Ha quedado muy claro. Me repito nuevamente, felicidades.
cuales IDE utilizas si no usas DW ?
@Nameless Utilizo Coda y TextMate, dependiendo de si trabajo en remoto o en local. No son IDEs en sí, mas bien editores muy completos, ambos están sólo para Mac.
No, habra por si a caso un error en el script david?
Es que no sale y estoy seguro de que todo esta bien acomodado.
Gracias por el mini tuto
muy bueno, gracias, lo voy a probar a ver que tal.
tengo un template hecho en html css no muy bonito pq soy novatisimo en esto pero ya esta, como puedo agregar el menu jquery q he hecho con este tutorial en mi codigo html ??
😉
Hola david, muchas gracias por este pequeño tuto, la verdad me he pasado más de un mes tratando de desarrollarlo, la verdad es que supuestamente colocaba todo bien, la función, el jquery, etc. Y no me funcionaba, hoy intenté colocar la llamada al jquery antes de la función y creo que eso resolvió el problema. Nuevamente, Muchas Gracias…
Hola,
yo se que ya hace tiempo de este post, pero lo estoy probando y no me funciona, solo veo una imagen y no pasa nada cuando paso sobre el o doy click.
me podrian indicar en que stoy fallando. este es mi menu, dentro de cada archivo esta exacto lo que tu pusiste aca, gracias:
Home
@yair cuélgalo en algún sitio y pon el enlace, o envíamelo por email.
Hola como estas ?
Te cuento que probé este efecto y en Ie8 no salen bien las imagenes. Tenes idea por que puede pasar esto ? En los demas navegadores casi no se nota.
Saludos y gracias.,
hola, muy bueno tu sitio.
puedo preguntar algo? en un sitio que estoy haciendo tengo un menu con jquery desplegable hacia abajo, pero inmediatamente tengo una animacion con jquery, el problema es que cuando paso el cursor sobre el boton, este de despliega pero detras de la animacion que se encuentra debajo…..que hago para dejar el menu desplegable funcionando sobre la animacion?
existe una forma de hacer que uno este antes que el otro…como una jeraquia?
gracias.
@Dandres Depende del caso se puede hacer de varias maneras. Las funciones de animación, ya sea .animate() o .slideUp() por ejemplo, tienen un segundo parámetro al que le pasas una función, y esa función se ejecutará al terminar la animación actual, por ejemplo:
$('#bloque1').slideDown('fast', function(){
$('#bloque2').slideDown();
});
Échale un vistazo también a la función .queue() para cosas más complejas.
bien estaba buscando algo como eso, esta un poco mas claro un menu que reconozca que esta activo sin afectar el contenido de mi web es decir un menu independiente del link que le coloque, espero usar pronto este ayuda y espero implementar en mi web, gracias…
hola David, mira q me pase un buen rato intentando cargar este ejemplo aun soy nuevo en jquery, me podrias decir como jalo la funcion para que se ejecute.
lo que yo se es que se jala con el nombre de la funcion pero estoy algo confundido no se cual es el nombre de la funcion mira esto esta haciendo
$(window).load(function() {
$(‘#nav’).hover();
});
No funciona porque en css se está aplicando valores shorthand en propiedades que no son shorthand.
Solo hay que quitar de css ‘-image’ y ‘-position’
background: url(‘images/menu.png’) bottom left;
background: url(‘images/menu.png’) 0px 60px;
[…] Blog de David Rojas, menús con CSS y Jquery : http://www.davidrojas.net/index.php/diseno-web/menu-vertical-en-acordeon-con-css-y-jquery/ http://www.davidrojas.net/index.php/diseno-web/menu-animado-desplegable-con-css-y-jquery/ http://www.davidrojas.net/index.php/diseno-web/menu-animado-con-css-y-jquery/ […]
David, buenas tardes. Fantástico el artículo.
He logrado que el jquery para un menu multinivel de similares características, funcione y se vea bien en Chrome, Firefox, Opera y Safari. Pero no en las versiones 8 y 9 de IE.
Me podrás comentar o ayudar al respecto.
Gracias.
portable fish finder
Menú animado con CSS y jquery
Candidadenovan2.Shop1.Cz
Menú animado con CSS y jquery