MW: Efecto de superposición de menú con CSS y JQuery

En este tutorial vamos a crear un menú con un efecto de superposición (overlay) bastante logrado, en el que nosotros al movernos encima del menú, el fondo se volverá negro, mostrando únicamente el submenú que nos haya salido posteriormente. Esto lo haremos mediante CSS y JQuery de una manera fácil y sencilla. Recuerdo que podéis ver más información sobre los menús en CSS.

La estructura HTML

La estructura HTML consistirá en un div que contendrá la superposición y la lista desordenada de elementos que forman el menú. El menú tendrá un enlace y un elemento div como submenu dentro de la lista de elementos. Cada submenu contendrá listas para las columnas del submenu donde estará cuando tengamos el elemento que encabeza la lista:

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

Los divs del submenú tendrán cada uno una estilo de lista inline para la posición left. Tenemos que insertar estos valores porque queremos que el submenú esté en una posición absoluta pero entre un contenedor (div) posicionado relativamente. Así que, para posicionar todos los div del submenú al principio del menú principal debemos empujar cada div más a la izquierda, hasta que tengamos un valor negativo para cada div (decrementándolo 112px).

Código CSS

Primero tendremos que resetear los estilos. Luego empezaremos por la superposición del body (cuerpo), que es un div con una opacidad inicial de valor 0. La posición estará en fixed, porque queremos que el menú permanezca fijado en la parte superior izquierda de la pantalla.

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

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

La lista de los elementos del menú tendrá posición relativa:

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

El anchor de la capa superior del menú tendrá este estilo, formando lo que es la caja del menú:

 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 el código Javascript añadiremos la clase “hovered” al principal ul, así que al mover el cursor encima del menú cambiaremos todos los anchores (enlaces) al color blanco.

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

El submenú no será visible al principio, sólo se deslizará cuando nos ubiquemos encima de un elemento de capa de lista superior:

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

El estilo de los enlaces dentro de las listas 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; }

Una de las listas del submenú estará solo, así que le daremos todo el espacio:

 ul.oe_menu div ul.oe_full{     width:100%; }

Si no está solo le daremos un espacio de 150px, así tendremos 3 flotando cada uno al lado del otro.

 ul.oe_menu li ul{     list-style:none;     float:left;     width: 150px;     margin-right:10px; }

Finalmente, queremos que el encabezado de la lista del submenú destaque:

 li.oe_heading{     color:#aaa;     font-size:16px;     margin-bottom:10px;     padding-bottom:6px;     border-bottom:1px solid #ddd; }

Código JQuery

La idea principal es que la superposición haga que todo se vuelva oscuro excepto el menú, garantizando que dicha superposición esté debajo del menú porque será colocada antes de este en la estructura HTML.

Primero cachearemos algunos elementos:

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

Cuando pongamos el curos encima de cualquier item del menú, le daremos la clase slided y selected. El correspondiente div submenú será deslizado y los otros estarán ocultos. También le daremos un valor z-index alto al actual submenú (el que estemos viendo). Cuando movamos el cursor fuera e él, se 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” es necesaria para el estilo, mientras que la clase “slided” es una clase que ayuda a identificar cuál item está en uso.

Ahora nos concentraremos en la superposición definiendo que ocurre cuando nosotros nos posicionamos encima de lo que es el menú en general. La superposición se devanecerá, dandole una opacidad de 0,6 y se añadirá la clase “hovered”, así que los enlaces permanecerán blancos:

 $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, espero que os haya gustado, si tenéis alguna duda ya sabéis, a los comentarios!!!

Descargar el efecto de superposición de menú

Ver el efecto de superposición de menú

Vía | Tympanus