Crea un menú animado con jQuery y CSS

Fancy Navigator Menu jQuery & CSS es un elegante menú animado desarrollado con jQuery & CSS.

Implementar este menú en nuestros desarrollos es muy simple ya que sólo son necesarios 3 pasos.

Implementación

Estructura HTML

Para crear las estructura del menú en el HTML de la página, es necesario un código como el siguiente:

<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

Estilos con CSS

En esta parte se utiliza un técnica que imita a una máscara, esto se logra usando :

overflow: hidden;

ul#topnav {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font-size: 1.1em;
}
ul#topnav li{
	margin: 0;
	padding: 0;
	overflow: hidden;  /*--Importante - Estado por defecto--*/
	float: left;
	height:40px;
}
ul#topnav a, ul#topnav span { /*--Las etiquetas <a> y <span> comparten
las mismas propiedades de <span> que éste será un duplicado de la etiqueta <a> --*/
	padding: 10px 20px;
	float: left;
	text-decoration: none;
	color: #fff;
	background: url(a_bg.gif) repeat-x;
	text-transform: uppercase;
	clear: both;
	width: 100%;
	height: 20px;
	line-height: 20px; /*--Alineación vertical del texto--*/
}
ul#topnav a{ /*--Hover: cuando el puntero del mouse para por encima--*/
	color: #555;
	background-position: left bottom;
}
ul#topnav span{ /*--Estado de navegación por defecto--*/
	background-position: left top;
}

Animación jQuery

Primero enlazar a la biblioteca jQuery:

<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

$(document).ready(function() {

	$("#topnav li").prepend("<span></span>"); 
//Crear un espacio vacío antes de la etiqueta

	$("#topnav li").each(function() { 
//Por cada item
		var linkText = $(this).find("a").html();
//Encontrar el texto denteo de la etiqueta <a>
		$(this).find("span").show().html(linkText); 
//Agregar el texto a la etiqueta span
	}); 

	$("#topnav li").hover(function() {
//En el hover (cuando el puntero del mouse se posiciona por encima)...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Encontrar la etiqueta<span>
y moverla 40 px hacia arriba.
		}, 250);
	} , function() { //Cuando se quita (retira o mueve) el puntero del mouse...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Mover la etiqueta <span>
devuelta a la posición original (0px)
		}, 250);
	});

});

Fancy Navigator Menu jQuery & CSS.

Web: www.sohtanaka.com/web-design/animate-navigation-with-css-jquery