Menú Horizontal Estilo Apple Fancy con Efecto Slide hacia afuera con CSS y jQuery

Navegando por Codrops me encuentro con un hermoso menú al estilo apple, es impresionante ver la imaginación que tiene Mary Lou para crear este tipo de menú.

El estilo de este menú de navegación es parecido al de Aplle, sólo que tiene un efecto de lo más elegante que puede tener un menú, el efecto es que cuando un usuario ingresa a tu página los iconos se deslizan hacia dentro del menú, luego cuando pasas el cursor por uno de los elementos, el icono se desliza desde la parte superior hacia afuera, esto crea un efecto llamado "card-shuffle". Pueden verlo funcionando en mi blog de pruebas.

Los iconos  utilizados para este tutorial se los pueden bajar desde Dryicons, si quieres utilizar este menú debes de seguir los siguientes pasos.

Primero tienes que asegurarte de tener la librería jQuery v1.3.2 en tu plantilla, si has realizado otro efecto o truco con esta librería es posible que ya la tengas, si es así salta este paso, de lo contrario con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes pega el siguiente código:

<script src='http://sites.google.com/site/pazosblogger/config/pagetemplates/script/jQuery1.3.2.min.js' type='text/javascript'/>

Ya tenemos la librería en nuestra plantilla, ahora toca añadir el Script que dará vida el efecto, para ello pegamos el siguiente código justo después del código que acabamos de pegar justo antes de la etiqueta </head>:

<script type="text/javascript">
$(function() {
var d=1000;
$('#menu span').each(function(){
$(this).stop().animate({
'top':'-17px'
},d+=250);
});

$('#menu > li').hover(
function () {
var $this = $(this);
$('a',$this).addClass('hover');
$('span',$this).stop().animate({'top':'40px'},300).css({'zIndex':'10'});
},
function () {
var $this = $(this);
$('a',$this).removeClass('hover');
$('span',$this).stop().animate({'top':'-17px'},800).css({'zIndex':'-1'});
}
);
});
</script>

Ya tenemos el script que animará el efecto en nuestra plantilla, ahora toca añadir el código CSS para darle estilo al menú, copia y pega el siguiente código justo antes de la etiqueta ]]></b:skin>:

[+/-] Ver / Ocultar Código

.navigation{
position:relative;
margin:0 auto;
width:915px;
}
ul.menu{
list-style:none;
font-family:"Verdana",sans-serif;
border-top:1px solid #bebebe;
margin:0px;
padding:0px;
float:left;
}
ul.menu li{
float:left;
}
ul.menu li a{
text-decoration:none;
background:#7E7E7E url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVVrJLgzOkG0dbQOW77U8385GIgYyQkZkm4MTTS9-3NQCmnsSReoipjzHe0aVHAahCb6ZLqKGYfQKYq_l_WRfGi2DNKGxw4Kvc9CShuVJKicX_o-KBC9dU0Q0-jMfSoEYMh8fHM0rmjgI/) repeat-x top left;
padding:15px 0px;
width:128px;
color:#333333;
float:left;
text-shadow: 0 1px 1px #fff;
text-align:center;
border-right:1px solid #a1a1a1;
border-left:1px solid #e8e8e8;
font-weight:bold;
font-size:13px;
-moz-box-shadow: 0 1px 3px #555;
-webkit-box-shadow: 0 1px 3px #555;
}
ul.menu li a.hover{
background-image:none;
color:#fff;
text-shadow: 0 -1px 1px #000;
}
ul.menu li a.first{
-moz-border-radius:0px 0px 0px 10px;
-webkit-border-bottom-left-radius: 10px;
border-left:none;
}
ul.menu li a.last{
-moz-border-radius:0px 0px 10px 0px;
-webkit-border-bottom-right-radius: 10px;
}
ul.menu li span{
width:64px;
height:64px;
background-repeat:no-repeat;
background-color:transparent;
position:absolute;
z-index:-1;
top:80px;
cursor:pointer;
}
ul.menu li span.ipod{
background-image:url(../url/de/tu/imagen.png);
left:33px; /*128/2 - 32(mitad del icono) +1 de borde*/
}
ul.menu li span.video_camara{
background-image:url(../url/de/tu/imagen.png);
left:163px; /* más 128 + 2px de borde*/
}
ul.menu li span.television{
background-image:url(../url/de/tu/imagen.png);
left:293px;
}
ul.menu li span.pantalla{
background-image:url(../url/de/tu/imagen.png);
left:423px;
}
ul.menu li span.herramienta{
background-image:url(../url/de/tu/imagen.png);
left:553px;
}
ul.menu li span.telefono{
background-image:url(../url/de/tu/imagen.png);
left:683px;
}
ul.menu li span.impresora{
background-image:url(../url/de/tu/imagen.png);
left:813px;
}

Guardamos los cambios en la plantilla, es hora de agregar el código HTML para llamar al estilo y al efecto, para ello ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código:

<div class="navigation">
<ul class="menu" id="menu">
<li><span class="ipod"></span><a href="#" class="first">Jugadores</a></li>
<li><span class="video_camara></span><a href="#">Camaras</a></li>
<li><span class="television"></span><a href="#">TVs</a></li>
<li><span class="pantalla"></span><a href="#">Pantallas</a></li>
<li><span class="herramienta"></span><a href="#">Herramientas</a></li>
<li><span class="telefono"></span><a href="#">Telefonos</a></li>
<li><span class="impresora"></span><a href="#" class="last">Impresoras</a></li>
</ul>
</div>

Ahora mueve el elemento justo debajo de la cabecera.

Configuración

Lo que está en color rojo cámbialo, por la dirección de tus iconos.
La # de color verde cámbialo por la dirección del enlace.
Lo que está en color azul cambia lo por tu  propio título de enlace.

Descargar