Menú desplegable jQuery: Slide menú horizontal con jQuery y efecto deslizante

Hace tiempo que no publico menú en Pazos Blogger, pues hoy día les traigo este menú desplegable jQuery con CSS3 creado por tympanus, Pueden ver una demo en mi blog de pruebas.

El menú cuenta con un cuadro de diapositiva y una imagen en miniatura que aparece al pasar el mouse por encima de cada elemento del menú, también incluye un recuadro en el submenú con enlaces para algunos de los elementos del menú. Los submenú se deslizarán hacia la derecho o izquierda con un bonito efecto deslizante.

Iportante: Antes de instalar este menú, en una plantilla del diseñador de plantillas de blogger, primero tenemos que hacer unos cambios en la plantilla, lee este tutorial.

Para utilizarlo en tu blog ve a Diseño > Edición de HTML > con la ayuda de (Ctrl + F) busca la etiqueta </head> y justo antes gega el siguiente código que contienes el script jQuery y la librería jQuery:

<script src='http://pazos-blogger.googlecode.com/files/libreria.jquery.min.1.4.2.js' type='text/javascript'/>
<script src='http://pazos-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Ahora toca añadir el código CSS para darle estilo al menú, para ello copia y pega el siguiente código justo antes de la etiqueta ]]></b:skin> :

[+/-] Ver / Ocultar

/* Slide Menú desplegable con jQuery y CSS 3
----------------------------------------------- */
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}
ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAkt2tR65EwT5p5Uqq1Wl7EYnnkkJXkxkwkvFcgw9WkUZxG2yMx90h1j1x_yiO_m3oEBoLyORlSaNhyphenhyphentlhBPwmYQGuEZOubXzWc7N9FRnXdZM4owTcbr-JCLNWGnce4x8wG0coRr5dXtJK/) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000 inset;
-webkit-box-shadow:0px 0px 2px #000 inset;
box-shadow:0px 0px 2px #000 inset;
}
ul.sdt_menu li a img{
border:none;
position:absolute;
width:0px;
height:0px;
bottom:0px;
left:85px;
z-index:100;
-moz-box-shadow:0px 0px 4px #000;
-webkit-box-shadow:0px 0px 4px #000;
box-shadow:0px 0px 4px #000;
}
ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}
ul.sdt_menu li span.sdt_active{
position:absolute;
background:#111;
top:85px;
width:170px;
height:0px;
left:0px;
z-index:14;
-moz-box-shadow:0px 0px 4px #000 inset;
-webkit-box-shadow:0px 0px 4px #000 inset;
box-shadow:0px 0px 4px #000 inset;
}
ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
margin-left:15px;
text-transform:uppercase;
text-shadow:1px 1px 1px #000;
}
ul.sdt_menu li span span.sdt_link{
color:#fff;
font-size:24px;
float:left;
clear:both;
}
ul.sdt_menu li span span.sdt_descr{
color:#0B75AF;
float:left;
clear:both;
width:155px; /*For dumbass IE7*/
font-size:10px;
letter-spacing:1px;
}
ul.sdt_menu li div.sdt_box{
display:block;
position:absolute;
width:170px;
overflow:hidden;
height:170px;
top:85px;
left:0px;
display:none;
background:#000;
}
ul.sdt_menu li div.sdt_box a{
float:left;
clear:both;
line-height:30px;
color:#0B75AF;
}
ul.sdt_menu li div.sdt_box a:first-child{
margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
color:#fff;
}

Ahora busca la etiqueta </body> que está casi al final de la plantilla y pega justo antes el siguiente código:

<script type="text/javascript">
$(function() {
/**
* for each menu element, on mouseenter,
* we enlarge the image, and show both sdt_active span and
* sdt_wrap span. If the element has a sub menu (sdt_box),
* then we slide it - if the element is the last one in the menu
* we slide it to the left, otherwise to the right
*/
$('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
$elem.find('img')
.stop(true)
.animate({
'width':'170px',
'height':'170px',
'left':'0px'
},400,'easeOutBack')
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'140px'},500,'easeOutBack')
.andSelf()
.find('.sdt_active')
.stop(true)
.animate({'height':'170px'},300,function(){
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length){
var left = '170px';
if($elem.parent().children().length == $elem.index()+1)
left = '-170px';
$sub_menu.show().animate({'left':left},200);
}
});
}).bind('mouseleave',function(){
var $elem = $(this);
var $sub_menu = $elem.find('.sdt_box');
if($sub_menu.length)
$sub_menu.hide().css('left','0px');

$elem.find('.sdt_active')
.stop(true)
.animate({'height':'0px'},300)
.andSelf().find('img')
.stop(true)
.animate({
'width':'0px',
'height':'0px',
'left':'85px'},400)
.andSelf()
.find('.sdt_wrap')
.stop(true)
.animate({'top':'25px'},500);
});
$('#relatedPosts').toggle(
function(){
$('#rp_list').animate({'bottom':'10px'},500);
},
function(){
$('#rp_list').animate({'bottom':'-50px'},500);
}
);
$('#rp_list a').tipsy({gravity: 's'});
});
</script>

Por último nos vamos a Diseño nos situamos debajo de la cabecera de nuestro blog y hacemos clic en Añadir gadget > elejimos HTML/JavaScript y pegamos el siguiente código:

<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/1" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Acerca de</span>
<span class="sdt_descr">Pazos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/2" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portafolio</span>
<span class="sdt_descr">My Trabajo</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Blog</a>
<a href="#">Trucos blogger</a>
<a href="#">Tutoriales</a>
</div>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/3" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inspiración</span>
<span class="sdt_descr">Cuando las ideas nacen</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Trucos</span>
<span class="sdt_descr">Trucos Blogger</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/5" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Blog</span>
<span class="sdt_descr">Photoshop</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL/DE/TU/IMAGEN/6" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Poyectos</span>
<span class="sdt_descr">Me gusta el código</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Bolsa de trabajo</a>
<a href="#"> Tarjeta de compra</a>
<a href="#">Mapas interactivos</a>
</div>
</li>
</ul>

Ahora le podemos cambiar los títulos a los elementos del menú y submenú, donde pone # la reemplazamos por nuestro enlace.

Nota: El tamaño de las imágenes tienes que ser de 170x170 px.

Como pueden ver es uno de los menú desplegable con jQuery más bonitos que hay.

Descargar Script y CSS