¿Cómo está hecho esto?

agonzalezmosq · #1 (**permalink**) 08/02/2011, 18:09

Pasando por la página del grupo http://www.vetustamorla.com/ me he quedado muy sorprendido con el menú de navegación que tiene. La verdad es que no tengo ni idea de cómo lo han hecho.

Cambiar el color del texto y el fondo lo sé hacer mediante CSS, lo que me intriga es la barrita que te sigue cuando hay un hover y que modifica su tamaño para adaptarse al recuadro del enlace. ¿¿Cómo está hecho esto??

davpp · #2 (**permalink**) 08/02/2011, 18:25

me supongo que debe ser algo de javascript

dastiven · #3 (**permalink**) 08/02/2011, 20:04

No has probado haciendolo en flash?

agonzalezmosq · #4 (**permalink**) 09/02/2011, 14:15

¡Es que no está hecho en flash! Flash no es compatible con la mayoría de dispositivos móviles, además de suponer un inconveniente para SEO y accesibilidad, por eso me interesa saber cómo está hecho.

Yo supongo que será con eventos javascript, pero quería ver si alguien podría indicarme "grosso modo" la manera de hacer algo similar, tipo: creas la barra en una div, controlas el hover con el evento talPascual que llame a una función con la que la mueves mediante la propiedad style.left hasta una posición guardada en una variable, modificas su tamaño con la propiedad style.nosequé...
Algo que me permitiese tener una idea más o menos clara de cómo está hecho para poder luego trastear : )

pypeeweb · #5 (**permalink**) 09/02/2011, 15:49

Hola!!

Ese efecto creo que esta hecho con MooTools que es un framework de javascript. Sin embargo yo lo he hecho otras veces con jQuery. Te dejo aca el link para que veas.. Casi al final está el ejemplo de lo que querés.

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Cualquier cosa me decis!

Saludos!

--
Pypee › Web Workshop. Diseño, desarrollo & Hosting de Sitios Webs. http://www.pypee.com