Artículo

---

0 ¡votar!

Crear un menú con una caja deslizante

Vamos a crear un menú donde al situarnos por las opciones, el texto se cambiará por una imagen, deslizandose la opción seleccionada para abajo y mostrando más opciones aquellos que tengan opciones añadidas.

Para conseguir este efecto, haremos uso del plugin para jQuery Easing Plugin

Vamos a empezar con el código HTML. Para ello utilizaremos una lista desordenada, colocada de forma horizontal. En esta lista meteremos todos los elementos que tengan nuestro menú. Si además la opción seleccionada tiene un menú extra con otras opciones, entonces le añadimos una capa con esas opciones. La imagen que acompaña a cada opción no se mostrará al principio, sino que se hará una vez que se pase por encima de la opción.

<ul id="sdt_menu" class="sdt_menu">
<li>
<a href="#">
<img src="images/1.jpg" 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>
...
</ul>

Ahora pasemos a la hoja de estilos. Lo primero que hacemos es dar las propiedades a la lista desordenada.

ul.sdt_menu{
margin:0;
padding:0;
list-style: none;
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
font-size:14px;
width:1020px;
}

Desactivamos el text-decoration y outline de todos los enlaces de la lista.

ul.sdt_menu a{
text-decoration:none;
outline:none;
}

Los elementos “li” de la lista tendrán una posición relativa y estarán colocados a la izquierda.

ul.sdt_menu li{
float:left;
width:170px;
height:85px;
position:relative;
cursor:pointer;
}

El estilo para el link principal donde tendremos nuestros dos “span” para el título y la descripción serán los siguientes:

ul.sdt_menu li > a{
position:absolute;
top:0px;
left:0px;
width:170px;
height:85px;
z-index:12;
background:transparent url(../images/overlay.png) no-repeat bottom right;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
}

Lo siguiente que hacemos es dar los estilos a la imagen. Recordemos que esta estará oculta al principio y que solo aparecerá cuando pasemos por encima de la opción.

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;
}

Los estilos para el contenedor del título y de la descripción les daremos los siguientes estilos:

ul.sdt_menu li span.sdt_wrap{
position:absolute;
top:25px;
left:0px;
width:170px;
height:60px;
z-index:15;
}

Lo próximo que hacemos es definir los estilos para la caja que se desplaza hacia abajo. Nosotros le asignamos un valor de 0 para la altura y por medio de la animación le indicaremos la altura que se necesita.

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;
}

Los enlaces para los “span” y los enlaces de las cajas serán los siguientes:

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;
}

Al título y la descripción le daremos los siguientes estilos

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;
font-size:10px;
letter-spacing:1px;
}

Pasemos ahora a ver los estilos del submenú el cual estará oculto. Este aparecerá a la izquierda o a la derecha dependiendo de donde estemos.

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;
}

Al primer elemento del submenú, de dejamos un margen top.

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 pasaremos a ver el código javascript que le dará la funcionalidad al menú que hemos creado.

$(function() {
$('#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);
});
});

Vía: tympanus.net
Demo

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios