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.
(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:
<!-- JavaScript -->
<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>
<!--Los estilos CSS-->
<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>
<!-- Menu -->
<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 />
Personalización
hola URL del enlace.
hola URL de la imagen que se mostrará al pasar el cursor sobre el menú
hola Titulo del menú
hola Descripción del menú
hola Titulo de las subpestañas
Este menú usa la ultima versión de JQuerry, en caso de no funcionar buscar las versiones antiguas de JQuerry y eliminarlas.
12 comentarios
Anonymous · diciembre 10, 2013 a las 2:58 pm
(h) nunca había visto nada igual, Gracias :p
Hayder Juvinao · diciembre 18, 2013 a las 1:42 pm
Gracias a ti por comentar 😉
Alexis Sanchez · enero 8, 2014 a las 4:11 pm
Excepcional, gracias :-d
Hayder Juvinao · enero 28, 2014 a las 4:28 pm
Gracias por comentar 🙂
Diego Nieto · enero 28, 2014 a las 12:02 pm
Saludos y gracias de antemano.
Me gustaría saber si se puede poner submenus en los submenus y como tendria que hacerlo ya que soy novato en estos temas, atentamente Diego
Diego Nieto · enero 28, 2014 a las 12:05 pm
Mi E-mail es: diniaz@hotmail.com :))
Hayder Juvinao · enero 28, 2014 a las 4:29 pm
Diego voy a tratar de ayudarte.
Saludos
Anonymous · febrero 14, 2014 a las 6:57 pm
Enorme trabajo. Gracias, a ti y a todos los que comparten sus conocimientos. 😉
ruben iglesias perez · febrero 23, 2014 a las 5:56 pm
a mi no me sirvio,el primer codigo no me sale en HEAD sino head,empezando por hay,luego al meter el codigo da error ke no puede acabar en scrip y > [- (
Maria Conde · abril 30, 2014 a las 3:51 pm
Muchas gracias , hace tiempo estaba detrás de este menú pero no me funcionaba.
Muy agradecida
Maria Conde · abril 30, 2014 a las 3:54 pm
Hace tiempo estaba detrás de este menú, y no podía ponerlo.. no funcionaba a pesar de que seguía las instrucciones (h)
Dando La Nota · noviembre 9, 2014 a las 7:31 pm
a mi lo del menu despegable no me sale me sale el menu como ese pero no la parte despegable