Menú horizontal con JQuerry y CSS3

Ya todos sabemos que los menúes son un elemento básico que nunca deben faltar en un blog, ya que ayuda al usuario a orientarse y a dirigirse en las diferentes secciones de tu blog (entrada o página).

Esta vez traigo a ustedes este excelente menú horizontal, que en lo personal me ha gustado mucho debido a sus múltiples efectos logrado con JQuerry y CSS3, y lo mejor de todo, es que es compatible con cualquier navegador.

Demo

(blog de pruebas)

Si usas una plantilla hecha por el diseñador de plantillas de blogger, primero deberás seguir los pasos de esta entrada de Ciudad Blogger.

Ahora para agregar el menú en tu blog, nos vamos a Plantilla, Editar HTML, adentro presionamos CTRL+F y buscamos:

</head>

Y antes pegamos:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Guarda los cambios de tu plantilla, y ahora solo nos queda irse a Diseño, Añadir Gadget, HTML/Javascript y pegamos:

<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/5655242/Script/jquery.easing.1.3.js"></script>
<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);
});
});
</script>

<style>
div.contenedor{
background:#000;
width: auto;
height: 93px;
position:relative;
left:0;
right:0;
z-index: 10;
}
ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width: auto;
position:relative;
}
ul.sdt_menu a{
text-decoration:none;
outline:none;
}
ul.sdt_menu li{
background:#000000;
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;
-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;
}
</style>


<br />
<br />
<br />
<br />
<br />
<div class="contenedor">
<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="URL imagen 1" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">About me</span>
<span class="sdt_descr">Get to know me</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL imagen 2" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Portfolio</span>
<span class="sdt_descr">My work</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Websites</a>
<a href="#">Illustrations</a>
<a href="#">Photography</a>
</div>
</li>
<li>
<a href="#">
<img src="URL imagen 3" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Inspiration</span>
<span class="sdt_descr">Where ideas get born</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL imagen 4" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Photos</span>
<span class="sdt_descr">I like to photograph</span>
</span>
</a>
</li>

<li>
<a href="#">
<img src="URL imagen 5" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Blog</span>
<span class="sdt_descr">I write about design</span>
</span>
</a>
</li>
<li>
<a href="#">
<img src="URL imagen 6" alt=""/>
<span class="sdt_active"></span>
<span class="sdt_wrap">
<span class="sdt_link">Projects</span>
<span class="sdt_descr">I like to code</span>
</span>
</a>
<div class="sdt_box">
<a href="#">Job Board Website</a>
<a href="#">Shopping Cart</a>
<a href="#">Interactive Maps</a>
</div>
</li>
</ul>
</div>
<br />
<br />