Artículo

---

2 ¡votar!

Menú con efecto caída creado con jQuery

Vamos a crear un menú formado por barras verticales que estarán formados por una imagen que bajará desde arriba cuando se pase el puntero del ratón por su correspondiente barra. Además cada barra vertical tendrá varias opciones que subirán desde abajo al pasar el ratón por su barra correspondiente.

Cuando pulsemos en una de estas opciones, el resto de barras verticales desaparecerán, y la barra pulsada se situará a la izquierda, y a su derecha tendremos una capa con información de la opción pulsada.

También tendremos un botón para volver el menú principal.

Empezaremos por crear el menú vertical con código HTML.

<div id="cc_menu" class="cc_menu">
<div class="cc_item" style="z-index:5;">
<img src="images/1.jpg" alt="image" />
<span class="cc_title">Collection</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_1">Winter 2010</li>
<li class="cc_content_2">Spring 2011</li>
</ul>
</div>
</div>
<div class="cc_item" style="z-index:4;">
<img src="images/2.jpg" alt="image" />
<span class="cc_title">Stores</span>
<div class="cc_submenu">
<ul>
<li class="cc_content_3">Milano</li>
<li class="cc_content_4">Paris</li>
</ul>
</div>
</div>
...
<div id="cc_content" class="cc_content">
<span id="cc_back" class="cc_back"><< Go back</span>
<div class="cc_content_1">
<h1>Winter 2010</h1>
<p>Some content</p>
</div>
<div class="cc_content_2">
<h1>Spring 2011</h1>
<p>Some content</p>
</div>
...
</div>
</div>

Al primer elemento del menú, le pondremos la propiedad de estilos z-index con un valor de 5, cuyo valor iremos decrementando en las siguientes opciones del menú. Con esto conseguimos que el último elemento esté en la capa más baja. Hacemos esto para crear el efecto de colapso de cartas.

Cada elemento del submenú compartirá la clase con su respectivo contenedor div. De esta forma, nosotros podremos hacer que el contenedor aparezca a la derecha cuando se pulse una opción del submenú.

A continuación veremos los estilos.

El div principal, .cc_menu, que rodeará al resto de elementos del menú tendrá el siguiente estilo.

.cc_menu{
width:700px; /*140px * 5*/
height:600px;
position:relative;
font-size:14px;
text-transform:uppercase;
color:#fff;
}

El ancho del contenedor es la suma de todos los anchos de las distintas opciones que tiene el menú. Si a cada una le damos el valor de 140 px, habrá que multiplicar eso por el número de opciones.

Los estilos de cada elemento de la navegación es el siguiente:

.cc_item{
text-align:center;
width:140px;
height:600px;
float:left;
border-bottom:1px solid #000;
background:#444 url(../images/bg.png) repeat top left;
position:relative;
-moz-box-shadow:3px -3px 10px #000;
-webkit-box-shadow:3px -3px 10px #000;
box-shadow:3px -3px 10px #000;
}

A cada elemento le asignamos un box shadow para que la capa llegue a ser visible. En IE esto no funciona, por lo que habría que ponerle alguna imagen que hiciera el mismo efecto.

El título de cada elemento del menú tendrá un fondo oscuro con una delgada sombra alrededor.

span.cc_title{
color:#fff;
font-size:16px;
top:200px;
left:5px;
position:absolute;
padding:3px 0px;
background:#111;
width:130px;
display:block;
z-index:11;
-moz-box-shadow:1px 1px 4px #000;
-webkit-box-shadow:1px 1px 4px #000;
box-shadow:1px 1px 4px #000;
}

El submenú de cada elemento tendrá los siguientes estilos:

.cc_submenu ul{
list-style:none;
width:140px;
margin:0;
padding:0;
height:0px; /*increase to 200px to slide up*/
overflow:hidden;
text-align:left;
background:#000;
position:absolute;
left:0px;
bottom:0px;
opacity:0.7;
z-index:13;
}

A la propiedad bottom del elemento y a su altura le asignamos el valor 0 para que esté oculto, para luego incrementar su altura en 200 pixels y crear así el efecto de aparición desde abajo.

La lista de elementos del submenú tendrá los siguientes estilos:

.cc_submenu ul li{
color:#ddd;
cursor:pointer;
padding:10px;
}

La imagen que sale desde la parte de arriba, tendrá un valor negativo en su propiedad top, de esta forma estará oculta. Luego mediante código javascript, a la propiedad top le asignaremos un valor de 0 para crear el efecto de aparecer desde arriba. Los estilos completos son los siguientes:

.cc_item img{
position:absolute;
width:140px;
height:600px;
top:-600px;
left:0px;
}

El contenedor que rodea a todos los elementos también le damos un valor left negativo para que se muestre oculto y luego hacerlo visible mediante javascript. Los estilos para esto son los siguientes.

.cc_content{
width:600px;
height:600px;
border-bottom:1px solid #000;
position:absolute;
left:-700px;
background:#444 url(../images/bg.png) repeat top left;
overflow:hidden;
-moz-box-shadow:4px 0 7px #000;
-webkit-box-shadow:4px 0 7px #000;
box-shadow:4px 0 7px #000;
}

El contenido de lo divs tendrán los siguientes estilos:

.cc_content div{
display:none;
margin:20px;
}

A cada párrafo le asignaremos los siguientes estilos:

.cc_content p{
background:#000;
padding:20px;
opacity:0.7;
}

Por último vamos a ver los estilos del botón de vuelta al menú.

span.cc_back{
position:absolute;
bottom:10px;
right:10px;
cursor:pointer;
color:#ddd;
}

Después de ver los estilos, vamos a ver como darle animación utilizando la librería jQuery.

Vamos a tener varias funciones que gestionarán el funcionamiento de nuestra navegación. Cada vez que nos situemos en un elemento de menú, queremos que la imagen se deslice desde la parte superior y el submenú se deslice desde la parte inferior. Y por supuesto, cuando salimos de una opción queremos el efecto contrario. Las funciones “m_enter” y “m_leave” se encargarán de ese funcionamiento.

La función “fold” hará que el menú se colapse cada vez que un elemento del menú es pulsado. La posición inicial es recuperada por la función “unfold”.

Las dos funciones “showContent” y “hideContent”, serán las encargadas de hacer que aparezcan o desaparezcan el contenido de los respectivos contenedores.

En nuestro código jQuery tendremos definidas algunas funciones:

//all the menu items
var $items              = $('#cc_menu .cc_item');
//number of menu items
var cnt_items   = $items.length;
//if menu is expanded then folded is true
var folded              = false;
//timeout to trigger the mouseenter event on the menu items
var menu_time;

Ahora vamos a definir lo que sucederá cuando se lancen los eventos mouseenter y mouseleave para cada elemento. También definiremos las acciones cuando se hace clic en el elemento.

$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave)
.find('.cc_submenu > ul > li')
.bind('click',function(){
var $li_e = $(this);
//if the menu is already folded,
//just replace the content
if(folded){
hideContent();
showContent($li_e.attr('class'));
}
else //fold and show the content
fold($li_e);
});

El código siguiente corresponde a la definición de la función “m_enter”.

function m_enter(){
var $this       = $(this);
clearTimeout(menu_time);
menu_time       = setTimeout(function(){
//img
$this.find('img').stop().animate({'top':'0px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'200px'},400);
},200);
}

El timeout es utilizado para prevenir a este evento si se muevo el ratón de forma rápida por los distintos elementos del menú.

La función “m_leave” está definida de la siguiente forma:

function m_leave(){
var $this = $(this);
clearTimeout(menu_time);
//img
$this.find('img').stop().animate({'top':'-600px'},400);
//cc_submenu ul
$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
}

Cuando pulsemos en el botón de volver al menú, queremos que se lance la función “unfold”.

$('#cc_back').bind('click',unfold);

La función “fold” solo mostrará el menú de la columna que hayamos seleccionado, y hacemos que el resto de elementos se vayan a la izquierda asignándole el valor de -140 pixels al margin.

function fold($li_e){
var $item               = $li_e.closest('.cc_item');
var d = 100;
var step = 0;
$items.unbind('mouseenter mouseleave');
$items.not($item).each(function(){
var $item = $(this);
$item.stop().animate({
'marginLeft':'-140px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = true;
showContent($li_e.attr('class'));
}
});
});
}

La función “unfold” muestra todos los elementos del menú y también oculta las imágenes y el submenú que estaban siendo mostrados.

function unfold(){
$('#cc_content').stop().animate({'left':'-700px'},600,function(){
var d = 100;
var step = 0;
$items.each(function(){
var $item = $(this);
$item.find('img')
.stop()
.animate({'top':'-600px'},200)
.andSelf()
.find('.cc_submenu > ul')
.stop()
.animate({'height':'0px'},200);
$item.stop().animate({
'marginLeft':'0px'
},d += 200,function(){
++step;
if(step == cnt_items-1){
folded = false;
$items.unbind('mouseenter')
.bind('mouseenter',m_enter)
.unbind('mouseleave')
.bind('mouseleave',m_leave);
hideContent();
}
});
});
});
}

La función para mostrar el contenido de nuestro contenedor a la derecha, asignándole el valor de 140 px a la propiedad left.

function showContent(idx){
$('#cc_content').stop().animate({'left':'140px'},200,function(){
$(this).find('.'+idx).fadeIn();
});
}

Por último la función de ocultar el contenido

function hideContent(){
$('#cc_content').find('div').hide();
}

Para el tema de las fuentes de nuestro menú, nos limitaremos a añadir las siguientes líneas en la cabecera de nuestros html.

<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/Liberation_Sans.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('span');
Cufon.replace('li');
Cufon.replace('h1');
Cufon.replace('p');
</script>

La fuente Liberation Sans la puede conseguir en este enlace.

Una demostración de este menú lo puede ver aquí.

Vía: Tympanus

Publicado por: angel carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios