JMiur [E]

Animated Navigation es es un menú animado simple que requiere del uso de la librería JQuery que podemos agregar a nuestro sitio utilizando las AJAX Libraries API de Google agregando lo siguiente antes de </head>:
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1.3.2");
</script>
o bien, enlazándolas de manera directa:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>



El primer paso es agregar el pequeño código del script, también, antes de </head>:
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$("#topnav li").prepend("<span></span>");
$("#topnav li").each(function() {
var linkText = $(this).find("a").html();
$(this).find("span").show().html(linkText);
});
$("#topnav li").hover(function() {
$(this).find("span").stop().animate({marginTop: "-40"}, 250);
} , function() {$(this).find("span").stop().animate({marginTop: "0"}, 250);});
});
//]]>
</script>
Y luego, el CSS que podremos personalizar a gusto:
<style type="text/css">
ul#topnav { /* el menú es una lista */
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topnav li { /* cada item de la lista */
float: left;
height: 40px;
list-style-type: none;
margin: 0;
overflow: hidden; /* importante */
padding: 0;
}
ul#topnav a, ul#topnav span { /* cada item es un enlace */
clear: both;
height: 20px;
line-height: 20px;
padding: 10px 15px;
float: left;
/* propiedades de color, fonto y fuente de los textos */
}
#menu li a:hover { /* efecto onmouseover sobre los enlaces */
/* propiedades de color, fonto y fuente de los textos */
}
</style>
Hasta allí toda la preparación, ahora, el menú en si mismo que podemos colocar en cualquier parte, donde deseemos mostrarlo:
<ul id='topnav'>
<li><a href="direccion_URL"> MENU-1 </a></li>
<li><a href="direccion_URL"> MENU-2 </a></li>
<!-- cada item es un enlace -->
<li><a href="direccion_URL"> MENU-X </a></li>
</ul>
Quienes utilicen otro tipo de framework como Prototype + Scriptaculous deben tener en cuenta que habrá un conflicto ya que las librerías son incompatibles. Para esto, hay una solución que implica editar los scripts. Otra alternativa menos elegante pero en este caso, efectiva, es usar un blog auxiliar, colocar el menú allí y cargarlo mediante un IFRAME que es el modo en que se ve en el ejemplo de esta entrada.

39 comentarios:

Manfenix  

Lei la nota en banakabanaka, y voy a probar con este JQuery a ver que resulta. Gracias por la info JMiur :)

Responder
Vku  

Yo soy de Prototype Scriptaculous, pero realmente Jquery me esta empezando a gustar.

¿Ya has probado en este menú con lo de banaka? porque en algunos script no funciona.

Responder
Graciela  

guau queda bonitísisimo, saltarín...ahora, después de hacer 'chocado los puertos en mi pc' que importaría si lo hicieran las librerías :P :P :P

Responder
Graciela  

yo programo mi blog y me fui a lo de Banaka Banaka -deberíamos preguntarle el por qué o el significado de Banaka- :D

Responder
Gem@  

Pero que ven mis ojos jQuery en Vagabundia!! :D
La verdad que jQuery da la sensación de ser mucho más completa que otras librerías imagino que todo es cuestión de analizar las necesidades de cada uno y decidirse por una u otro aunque con esta idea de Iván todo es posible. Por ahora mis ejemplos los sigo mostrando en un blog aparte pero tu idea me gusta ;)
(El significado de Banaka Banaka es muy gracioso Graciela, pero tiene más gracia cuando lo explica Iván)

Responder
JMiur  

Es para probar. Hay gustos para todos.

Vku: Sí, funcionará pero no estoy muy convencido de que sea razonable agregar varais librerías ya que eso implica aumentar la carga del sitio de manera importante. Todo depende, claro, hay que ver caso por caso.

Graciela: El pueblo pide a gritos una explicación del nombre :D

Gem@: Es cierto, depende de cada uno y sólo son herrameintas que se usan para algo, en este caso, el fin es más importante que el medio :D
Como dije antes, cargar varias librerías no es demasiado lógico y es preferible hacerlo en otro blog tal como lo muestras en el tuyo. El IFRAME funcionará si se trata de pequeñas cosas como en este caso. Me pareció más cómodo que mostrarlo en otra ventana.

Responder
BanakaBanaka!!  

Yo tampoco podía creerlo, Gem@... ¡¡jQuery en Vagabundia!!
Y además me gusta mucho el menú... poco código y muy resultón ;)

Vaaale.. habrá explicación de qué significa BanakaBanaka... es en euskera, sólo digo eso por ahora ;) el resto, ya lo pondré en mi blog jajaja!!

Un abrazo a tod@s!!

★Iván.

Responder
JMiur  

Soy una persona multifacética, Iván. Tengo muchas caras ... todas horribles :D

Responder
Σ=o) Pau  

Hiciste una reunión privada con Pizcos o que!!!!!!1 jajajjaa mirsh nuevecito con Jquery y llegas con un menu muy mono ^_^ me encanta!

pd: no creo que sean todas horribles, la visible no lo es ;)

besos ronroneados ^_^

Responder
Lagarto  

Pues ami me gustaria que pusieras algunas alternativas de menus como este pero en script.aculo.us, ya que eso de los frames no me va muy bien.

Te lo agradeceria mil si colocas algunos ya que se ven muy bien y dan una apariencia como si fueran en flash.

Sin mas que decir solo termino con esta frase.

Exelente

Responder
egoloco  

Dire en esta entrada que contigo aprendi a entender JavaScript, pero este código es poco entendible... una explicación de como trabaja?? O deberia ver JQuery primero?

Responder
Graciela  

espero tu explicación Iván :)

Responder
Parábolas Tecnológicas  

Hola Jmiur.
Para mi es esencial usar jquery. Tengo un blog de blogger y la mayoría de los efectos que estan en él son de jquery y enriquece mucho al blog. Si esta en tus posibilidades pasa a chequear lo que estoy usando y dame tu opinión.

www.parabolastecnologicas.com.ve

P.D Tu blog me ha ayudado mucho para hacer el mio! felicitaciones y muchas gracias!

Responder
JMiur  

Pau: Me alegro que te guste :) (hablo del menú) :D

Lagarto: No conozco una alternativa parecida, probablemente haya pero no la he visto.

egoloco: Pués sí, para entenderlo, deberías ver un poco cómo funciona JQuery y cómo es su sintaxis. Por el momento, es algo que me excede :$

Responder
Pucho  

Muy bueno JMiur....Gracias

Responder
CHiCken  

MUY BUENO, PERO PORQUE SE ME PONE ESTE SIMBOLO: --> EN EL HEADER??
lo busco y no se ecuentra en la edicion HMTL

Responder
CHiCken  

Ola Jmiur encontre el problema:

ES EL STYLE

aay que borrar las 2 lineas (la primera y la terminacion) y listo :)

Responder
Markos  

No consigo que me funcione
No tengo añadida ninguna otra librería, no sé cuál será el problema. Si lo quiero colocar debajo del header, ¿debería hacer un iframe?

Gracaias

Responder
Markos  

Solucionado, se me había olvidado el div del menu... ¡Qué fallo!

Gracias de todas formas, siempre se puede contar contigo

Responder
CHiCken  

jmiur como lo puedo alinear al medio, en que lugar debo de poner la propiedad, tengo este menu en el #crosscol-wrapper y no lo puedo alinear :(

Responder
JMiur  

Como usa la propiedad float, deberá alinearlo usando margin y centrarlo al ojo.

Responder
CHiCken  

ya veo porque no se alineaba de ninguna manera :D y algo que vi en el codigo css es:

#menu li a:hover { }

porque #menu, en donde se aplica

Responder
JMiur  

El menú está en un DIV cuyo ID es ese y el hover es lo que permite controlar el efecto.

Responder
Constantin  

Hola JMiur soy Costan de Rumania, amigo una pregunta como hago que el menu me salga como el tuyo es decir con colores? Gracias de antemano.

Responder
JMiur  

El color, imagen de fondo o lo que se quiera se coloca en:

#menu li a:hover {}

CocinaCoco  

Hola JMiur!para darle color como el ejemplo de este post,probe en #menu li a:hover {}
background-color:#DF0101
pero no aparece el color de la pestaña,que forma seria la correcta?
puedes verlo aqui: http://www.cocinacoco.com.ar/
Saludos!!:D

JMiur  

En tu ejemplo, el menú tiene otro ID así que sería así:

ul#topnav a:hover {
background-color: #DF0101;
}

CocinaCoco  

Perfecto!ahora tiene color,una cosita mas,si hacia la derecha queda espacio porque no me permite poner mas lineas??
osea que si agrego una mas esa ultima no me funciona.

JMiur  

No, no tiene ancho definido así que podría agregarse cualquier otra siguiendo el mismo procedimiento.

CocinaCoco  

y cual puede ser mi error?cuando puedas verlo fijate que lo ultimo que agregue es "Extras" y no logro que funcione...y esta puesto igual que las lineas anteriores.
gracias!

JMiur  

Pensé que era otro. Ese lo había visto y parece funcionar perfectamente ¿Qué notas de extraño?

CocinaCoco  

ja!te estoy mareando!si,te explico.coloque 8 enlaces en el menu y funcionan perfecto solo hasta el septimo,en los siguientes enlaces al hacer clik sobre estos ultimos no hace ningun efecto.

JMiur  

Lo veo normal en todos los navegadores.

CocinaCoco  

Tenes razon...recién lo miré desde otra pc y se ve perfecto!!

JMiur  

Prueba borrar la caché del navegador proque es probable que eso esté influyendo para que no veas los cambios.

Responder
Enrique  

HoLA Master he visto GRANDES post tuyos , y he navegado mucho , y aun no me canso , TE DOY LAS GRACIAS POR SER COMO ERES Y QUE DIOS TE SIGA DANDO LA FORTALEZA , para continuar DONANDO TUS CONOCIMIENTOS A LA HUMANIDAD , BENDICIONES PARA TI Y TU FAMILIA .

Responder
JMiur  

Gracias por tanta exageración, Enrique :D

Responder
LisanUIO  

Hola JMiur espero estés bien, mi pregunta es la siguiente, existe alguna manera de que la imagen de fondo no tenga retraso?

JMiur  

Dependerá del tamaño que tenga y de dónde eté alojada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR