Menú horizontal animado con jQuery

Espero que la semana les esté yendo muy bien a todos. Hoy les traigo un tutorial que seguro le va a resultar muy útil a más de uno. Se trata de un menú sencillo de implementar.

Este menú horizontal tienen un efecto animado al pasar el cursor sobre cada enlace y este efecto se logra gracias a la implementación de la librería jQuery.

↪DEMO
(Pasar el cursor sobre el menú)

Vamos a empezar con el tutorial:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Ahorar agregaremos la librería jQuery. Si es que ya la tenemos en nuestra plantilla, no es necesario agregarla nuevamente y podemos saltarnos al paso 3.§ del tutorial.

Si no tenemos la librería, la agregaremos del siguiente modo. Damos un clic dentro del código, luego CTRL+F y en la casilla search buscaremos ]]></b:skin> y justo debajo pegaremos el siguiente script:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3.§ Debajo del script anterior (de la librería jQuery), pegaremos este otro script:

<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>

4.§ Ahora debajo de los scripts anteriores, pegaremos los estilos CSS, donde podremos cambiar colores, tamaño de fuente, tipo de fuente, etc. :

<style type='text/css'>
ul#topnav {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
ul#topnav li {
float: left;
height: 40px;
list-style-type: none;
margin: 0;
overflow: hidden;
padding: 0;
}
ul#topnav a, ul#topnav span {
clear: both;
height: 20px;
line-height: 20px;
padding: 10px 15px;
float: left;
background: #000; /* color fondo menú */
font-size: 16px; /* tamaño de la fuente */
color: #fff; /* color de la fuente */
border-right: 1px solid #fff; /* grosor, tipo y color de borde */
font-family: Arial; /* fuente tipográfica */
}
ul#topnav li a:hover {
background: #9999cc; /* color fondo menú al pasar el cursor */
color: #000; /* color de la fuente al pasar el cursor */
}
</style>

5.§ Guardamos la plantilla.

6.§ Ahora vamos a Diseño - Añadir un gadget - HTML/Javascript. Agrearemos las siguientes líneas HTML con los enlaces de nuestro menú.

<ul id='topnav'>
<li><a href="AQUI-URL"> Inicio </a></li>
<li><a href="AQUI-URL"> Menú-1 </a></li>
<li><a href="AQUI-URL"> Menú-2 </a></li>
<li><a href="AQUI-URL"> Menú-3 </a></li>
<li><a href="AQUI-URL"> Menú-4 </a></li>
</ul>

7.§ Damos clic en Guardar y arrastramos el gadget debajo de la cabecera de nuestro blog y damos clic en Guardar disposición.

¿Te gustó el menú?
También te pueden ser útiles estos menús