Overlay Effect Menu usando jQuery
En este tutorial vamos a crear un menú sencillo que se destaque una vez al pasar el ratón sobre ella, cubriendo todo, excepto el menú con una capa oscura. El menú se quedará blanco y un área de submenú que se expanda. Vamos a crear este efecto usando jQuery.
Por lo tanto, vamos a empezar!
La estructura HTML
La estructura HTML consistirá en un div contenedor principal para el menú que contiene la plantilla y la lista no ordenada para el menú. El menú tendrá un enlace y un elemento div como submenú en sus elementos de lista. Cada uno de los elementos de submenú contienen listas de las columnas del submenú en el que cada uno tendrá un elemento de la lista la partida:
<div> <div id="oe_overlay"></div> <ul id="oe_menu"> <li> <a href="">Collections</a> <div> <ul> <li> 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> <li> 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>
El divs submenú cada uno tiene un estilo en línea para la posición de la izquierda.Como veremos más adelante, cuando nos fijamos en el estilo, tenemos que establecer este valor ya que queremos estar en el submenú de la posición absoluta, pero dentro de un contenedor en posición relativa. Así, con el fin de la posición de todos los divssubmenú al principio de todo el menú, hay que ”tirar” de cada div más a la izquierda,por lo tanto, vamos a tener un valor negativo a la izquierda de cada div (decreciente112px).
Veamos el estilo.
El CSS
Asegúrese de que, de restablecer los primeros estilos (no queremos ningún relleno navegador definido o margen de la lista). Vamos a empezar por la superposición para el cuerpo, que es un div simple con una opacidad inicial de 0:
.oe_overlay{
background:#000;
opacity:0;
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
}
La posición se establece en fijo, ya que queremos que se quede siempre en la esquinasuperior izquierda llenar toda la pantalla.
La lista del menú principal tendrá el siguiente estilo:
ul.oe_menu{
list-style:none;
position:relative;
margin:30px 0px 0px 40px;
width:560px;
float:left;
clear:both;
}</pre>
<pre>ul.oe_menu > li{
width:112px;
height:101px;
padding-bottom:2px;
float:left;
position:relative;
}
Ellos se ubicarán relativamente de manera que podamos contar con los elementos de submenú con posición absoluta.
El ancla de la capa superior del menú tendrá el siguiente estilo, formando el cuadro:
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;
}
En nuestro JavaScript vamos a añadir la clase ”hovered” a la ul principal, una vez quese mueven con el ratón sobre el menú, por lo que podemos cambiar todos los anclajesa blanco:
.oe_wrapper ul.hovered > li > a{
background:#fff;
text-shadow:0px 0px 1px #FFF;
}
El elemento de submenú no será visible al principio, pero sólo en la diapositiva cuandoPase el ratón sobre un elemento de la capa lista de los mejores:
ul.oe_menu div{
position:absolute;
top:103px;
left:1px;
background:#fff;
width:498px;
height:180px;
padding:30px;
display:none;
}
The style for the links inside of the submenu lists:
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;
}
Una de nuestras listas de submenú estará sola, así que queremos que tome todo el espacio:
ul.oe_menu div ul.oe_full{
width:100%;
}
Y si no es el único, queremos que tenga un ancho de 150px, por lo que podemos tener 3 flotantes siguientes entre sí:
ul.oe_menu li ul{
list-style:none;
float:left;
width: 150px;
margin-right:10px;
}
Y, por último, queremos que la cabecera de la lista de submenús se destaque:
li.oe_heading{
color:#aaa;
font-size:16px;
margin-bottom:10px;
padding-bottom:6px;
border-bottom:1px solid #ddd;
}
Y eso es todo el estilo! Vamos a continuar con los efectos usando jQuery.
El JavaScript
La idea principal es hacer una plantilla que parezca que todo se oscurece en la página excepto en el menú. Le garantizamos que la plantilla se queda en el menú porque nos coloca ante el menú de la estructura HTML. Y la plantilla se mantiene en la cima de todo lo demás porque todo viene antes que en la estructura HTML. Así, el z-índices están en el orden deseado. Considere que si usted integra este menú en alguna parte.
Primer paso. Veamos algunos de sus elementos:
var $oe_menu = $('#oe_menu');
var $oe_menu_items = $oe_menu.children('li');
var $oe_overlay = $('#oe_overlay');
Cuando suspender cualquiera de los elementos del menú, vamos a añadir las clases “slided” y “selected” para el artículo. El div submenú correspondiente recibirá resbalar hacia fuera y todos los demás se oculta conseguir. También damos un muy alto índice z al submenú actual. Cuando movemos el ratón fuera, vamos a eliminar la clase “selected”:
$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');
});
La clase “selected” que se necesita para el estilo, mientras que la clase “slided” es una clase de ayuda que vamos a identificar qué elemento se encuentra “en uso “.
Ahora, nosotros nos encargamos de la plantilla mediante la definición de lo que sucede cuando nos adentramos en el contenedor de todo el menú. Vamos a desaparecer la superposición de una opacidad de 0,6 y agregar la clase “hovered” en el contenedor, de modo que los anclajes de la estancia blanca:
$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();
})
Y eso es todo! Esperamos que se hayan divertido con este tutorial y les haya resultado muy útil!