Elegante Menu animado en CSS y JQuery

Posteado el 04. Apr, 2010 por Webi in Desarrollo Web, HTML y CSS

En este tutorial vamos a crear un menu en css animado para tu sitio web.

Paso 1

En este paso que es sencillo vamos a crear nuestra lista de menu en nuestro documento HTML que debe ser algo asi como el codigo que mostramos, logicamente con las opciones del menu que tu desees.

Code block

<ul id="topnav">
 <li><a href="#">Inicio</a></li>
 <li><a href="#">Servicios</a></li>
 <li><a href="#">Portafolio</a></li>
 <li><a href="#">Blog</a></li>
 <li><a href="#">Contactenos</a></li>
</ul>

Paso 2

Este es nuestro codigo CSS para darle estilo a nuestro menu. este codigo va ANTES del codigo</head>

Code block

<style type="text/css">
 
<style type="text/css">
html {    background: #cccccc; }
body {
 margin: 0; padding: 0;
 font: 10px normal Verdana, Arial, Helvetica, sans-serif;
 background: #cccccc;
}
 
h1 small{
 font: 0.2em normal Verdana, Arial, Helvetica, sans-serif;
 text-transform:uppercase;
 letter-spacing: 1.4em;
 display: block;
 color: #ccc;
}
.container {
 width: 520px;
 height: 330px;
 position: absolute;
 top: 50%; left: 50%;
 margin: -165px 0 0 -210px;
 overflow: hidden;
}
img {border: none;}
ul#topnav {
 margin: 10px 0 20px;
 padding: 0;
 list-style: none;
 font-size: 1.1em;
 clear: both;
 float: left;
 width: 520px;
}
ul#topnav li{
 margin: 0;
 padding: 0;
 overflow: hidden;
 float: left;
 height:40px;
}
ul#topnav a, ul#topnav span {
 padding: 10px 20px;
 float: left;
 text-decoration: none;
 color: #fff;
 text-transform: uppercase;
 clear: both;
 height: 20px;
 line-height: 20px;
 background: #1d1d1d;
}
ul#topnav a {        color: #555;
 background: url(a_bg.gif) repeat-x left bottom; }
ul#topnav span {
 background: url(a_bg.gif) repeat-x left top;
}
 
</style>

Paso 3

Descarga ahora el archivo JS que necesitamos desde aqui. y colocaremos el siguiente codigo antes de la etiqueta </head>

Code block

<script type="text/javascript" src="js/jquery.min.js"></script>

Paso4

Ahora agregamos este codigo debajo del codigo anterior

Code block

<script type="text/javascript">
 
$(document).ready(function() {
 
	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag
 
	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the a tag
		$(this).find("span").show().html(linkText); //Add the text in the span tag
	}); 
 
	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the span tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0" //Move the span back to its original state (0px)
		}, 250);
	});
 
});
</script>

Paso 5

En el zip de nuestro ejemplo adjuntamos un archivo llamado “a_bg.gif” que puedes editar y cambiar el color en photoshop.

Eso es todo! con esto ya tenemos nuestro menu animado

Articulos relacionados:

Colocando Marca de Agua en Adobe Lightroom

Tags: CSS, jQuery, menu

7 Respuestas para “Elegante Menu animado en CSS y JQuery”

Tweets that mention Elegante Menu animado en CSS y JQuery | Tutoriales en la Web -- Topsy.com

04. Apr, 2010

[...] This post was mentioned on Twitter by tutorialesweb. tutorialesweb said: Elegante Menu animado en CSS y JQuery http://goo.gl/fb/kc92F [...]
Jethrov

28. May, 2010

Gracias por el tuto. esta muy bien.

Tiene un bug en chrome. al abrir por la primera vez el menu sale mal y tienes que recorrer el cursor por encima para que se corrija.

Sabrías como hacer que salgan los subpages?

hay una forma que hace salir las paginas child por debajo, pero lo malo es que no salen en onmouseover.

esa es la forma.
ID.’&echo=0′);
if ($children) { ?>
Webi

28. May, 2010

Vamos a verificar el problema y te responderemos muy pronto.
emiliano

30. May, 2010

Muy bueno la verdad pero en crome no se muestra completo chicos pero eso lo puedo revisar pero la verdad me salvaron buscaba algo con esta calidad para mi web muchas gracias por este aporte ya sume su web a mis favoritos les repito muchas gracias por el aporte
Pablo

16. Jun, 2010

muy bueno el menu, lo que quisiera saber es como se puede hacer para que queden los botones activados, por ejemplo el que el boton home este activo cuando cargo el html?

Muchas Gracias
milan

16. Jun, 2010

muy buen tuto, gracias.
me sorprende lo sencillo y agradabje de su desarrollo me imaginaba algo más complicado.
Webi

17. Jun, 2010

Que bueno milan que te gustó por aqui sigue visitándonos estamos para seguir buscando tutoriales interesantes para todos