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 :
Contenidorelaciondo
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="http://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
