Fancy Navigator Menu jQuery & CSS, es un menú realizado en CSS y JQuery, muy fácil de hacer, que nos permitirá darle un toque “personal” a nuestro menú de navegación (También podéis mirar la lista de menús de navegación que publicamos hace tiempo).
La estructura es muy sencilla:
Código HTML
<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>
Una simple lista, que vamos a estilizar.
Código CSS
La clave principal para crear una máscara en el menú será la propiedad 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 inicial del menu, sin mantenernos encima de el--*/
float: left;
height:40px;
}
ul#topnav a, ul#topnav span {
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;
}
ul#topnav a{
color: #555;
background-position: left bottom;
}
ul#topnav span{ /*--Por defecto--*/
background-position: left top;
}
Código JS
Ahora vamos a darle una animación al menú, gracias a JQuery. Primero debemos enlazar a la biblioteca de JQuery:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Este es el código de jQuery a añadir en nuestro documento para que funcione la animación:
$(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);
});
});
Estandarización
CSS 2.1 válido.
XHTML 1.0 Transitional inválido (No se puede insertar la etiqueta en la línea 84, localizada en JQuery).
Ejemplo de su funcionamiento
Con esto lograremos un menú sencillo y a la vez práctico. Aunque desactivemos javascript seguirá siendo accesible. ¿Qué os parece?
Vía | Pixelco
