Menú horizontal con efecto Slide jQuery

Hoy día les traigo este bonito menú horizontal con un bonito efecto jQuery, el menú está conformado de solapas, las cuales estarán escondidas hasta la mitad en la parte superior del blog, cuando el usuario haga clic el menú desplegar las solapas hacía afuera con un bonito efecto, y luego volverán a su posición normal. Pueden ver la Demo.

Este menú lo vimos anteriormente, pero de forma vertical, pueden ver el post . Para ponerlo en nuestro blog, es fácil, si tenemos una plantilla del diseñador de plantillas de blogger, tenemos que hacer algunos cambios en nuestra plantilla antes de seguir con la instalación del menú, lee este artículo. Si tienes otra plantilla que no sea del diseñador de plantillas de blogger, no tienes que hacer ningún cambio.

Primero ve a Diseño > Edición de HTML > busca  la etiqueta >  </head>

Justo antes pegamos el siguiente código:

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

<script type='text/javascript'>
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});

$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>

Ahora, busca la etiqueta ]]></b:skin>

Justo antes pegamos el código CSS para darle estilo:

/* CSS menú de Navegación Slide Horizontal*/
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 10px;
list-style: none;
z-index:999999;
width:721px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#E7F2F9;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
ul#navigation li a:hover{
background-color:#CAE3F2;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#60ACD8;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .inicio a{
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .pantallas a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .herramientas a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .telefonos a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .rssfeed a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .camaras a {
background-image: url(URL-DE-TU-IMAGEN);
}
ul#navigation .tv a {
background-image: url(URL-DE-TU-IMAGEN);
}

Por último, ve a Diseño > Añadir gadget > elije > HTML/Javascript > y pega el siguiente código:

<ul id="navigation">
<li class="inicio"><a href=""><span>Inicio</span></a></li>
<li class="pantallas"><a href=""><span>Pantallas</span></a></li>
<li class="herramientas"><a href=""><span>Herramientas</span></a></li>
<li class="camaras"><a href=""><span>Camarás</span></a></li>
<li class="rssfeed"><a href=""><span>Feed Rss</span></a></li>
<li class="telefonos"><a href=""><span> Teléfonos </span></a></li>
<li class="tv"><a href=""><span> Televisión </span>
</a></li></ul>

Si has hecho todo bien, te saldrán las solapas pero sin imágenes, tu tienes que subir tus imágenes a tu alojamiento de imágenes,  luego tomar la URL y pegarla donde índica.

Eso  es todo, que disfruten de este bonito menú.