Artículo

---

1 ¡votar!

Efecto de superposición del menú con jQuery

A lo largo de este tutorial vamos a ver como crear un menú sencillo que se activa una vez que se pasa el ratón por sus opciones, dejando en segundo plano la información del fondo. El menú se quedará blanco y aparecerá un submenú con opciones. Para crearlo utilizaremos jQuery.

Vamos a empezar a crear la estructura HTML, que consiste en un contenedor DIV para el menú, que contendrá una lista desordenada para el menú. Cada opción principal del menú, tendrá un enlace y un DIV donde indicaremos las opciones del submenú.

<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
<li>
<a href="">Collections</a>
<div>
<ul>
<li class="oe_heading">
Summer 2011
</li>
<li><a href="#">Milano</a></li>
...
</ul>
<ul>
...
</ul>
<ul>
...
</ul>
</div>
</li>
<li>
<a href="">Projects</a>
<div style="left:-111px;">
...
</div>
</li>
<li>
<a href="">Fragrances</a>
<div style="left:-223px;">
<ul class="oe_full">
<li class="oe_heading">
Fashion Fragrances
</li>
<li><a href="#">Deálure</a></li>
<li><a href="#">Violet Woman</a></li>
<li><a href="#">Deep Blue for Men</a></li>
<li><a href="#">New York, New York</a></li>
<li><a href="#">Illusion</a></li>
</ul>
</div>
</li>
<li><a href="">Events</a>
<div style="left:-335px;">
...
</div>
</li>
<li><a href="">Stores</a>
<div style="left:-447px;">
...
</div>
</li>
</ul>
</div>

Veamos ahora el código correspondiente a los estilos.

Lo primero que debemos de asegurarnos es que borramos los estilos, para asegurarnos que no cojan estilos de otras zonas. Luego empezaremos por asignar el overlay para el cuerpo, que será un DIV con la propiedad “opacity” a 0.

.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}

La posición será fija, y siempre partiendo desde la esquina superior izquierda de la pantalla. Los estilos del menú principal son los siguientes:

ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}

Es posible que desee adaptar su floatiness una vez que usted está planeando integrar esto en alguna parte en su sitio. Lo que es importante, es la colocación de los elementos de la lista

ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}

Los estilos para los enlaces del menú superior, tienen los siguientes estilos.

ul.oe_menu > li > a{
display:block;
background-color:#101010;
color:#aaa;
text-decoration:none;
font-weight:bold;
font-size:12px;
width:90px;
height:80px;
padding:10px;
margin:1px;
text-shadow:0px 0px 1px #000;
opacity:0.8;
}
ul.oe_menu > li > a:hover,
ul.oe_menu > li.selected > a{
background:#fff;
color:#101010;
opacity:1.0;
}

Con el JavaScript, cambiaremos la clase del menú a “hovered”, cuyos estilos son:

.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}

Los elementos del submenú no estarán visibles en un principio, y solo se mostrarán cuando se pase por la opción principal. Os dejamos los estilos

ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}

Lo siguiente son los estilos para los enlaces del submenú.

ul.oe_menu div ul li a{
text-decoration:none;
color:#222;
padding:2px 2px 2px 4px;
margin:2px;
display:block;
font-size:12px;
}
ul.oe_menu div ul li a:hover{
background:#000;
color:#fff;
}

Por último veremos el código JavaScritp que se encarga de la animación.

La idea principal es que cuando se pase por el menú, el resto de la pantalla se oscurezca, mientras que el menú se queda de forma activa.

Lo primero que haremos será guardar algunos elementos:

var $oe_menu            = $('#oe_menu');
var $oe_menu_items      = $oe_menu.children('li');
var $oe_overlay         = $('#oe_overlay');

Cuando pasemos por algún elemento del menú, añadiremos las clases “slided” y “seleted” al elemento. El correspondiente submenú aparecerá y los otros se ocultarán.

$oe_menu_items.bind('mouseenter',function(){
var $this = $(this);
$this.addClass('slided selected');
$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){
$oe_menu_items.not('.slided').children('div').hide();
$this.removeClass('slided');
});
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('selected').children('div').css('z-index','1');
});

Por último, indicamos lo que debe de suceder cuando entramos en el área del menú.

$oe_menu.bind('mouseenter',function(){
var $this = $(this);
$oe_overlay.stop(true,true).fadeTo(200, 0.6);
$this.addClass('hovered');
}).bind('mouseleave',function(){
var $this = $(this);
$this.removeClass('hovered');
$oe_overlay.stop(true,true).fadeTo(200, 0);
$oe_menu_items.children('div').hide();
})

Pueden ver una demo aquí.

Vía: Tympanus

Publicado por: Angel Carrero

Recomendar a un amigo

Compartir en redes

Email  

Comentarios