Menú con superposición de capa y jQuery

Imagen original de Codrops 

Un menú puede ser tan práctico y versátil como uno quiera que sea o tan llamativo y elegante como nos propongamos. Un menú puede ser el punto fuerte de un blog o tan triste e insignificante que nadie repare en él.

 No hay consejo que valga a la hora de escoger un menú, como ocurre con el diseño siempre digo que eso es a gusto del propio autor.

Si se trata de hacer un menú para otra persona es bueno tener en cuenta el uso que se va a dar a ese menú o la cantidad de enlaces que va a necesitar porque si son muchos quizás sea mejor un menú desplegable. Si el blog es comercial entonces nos podemos permitir un menú dinámico con grandes imágenes y efectos atractivos.

 A la hora de escoger un menú el abanico de posibilidades es muy amplio y por suerte tenemos a mano grandes sitios con tutoriales, mi favorito es Codrops y suyo es el original menú del ejemplo. 

Trabaja con jQuery y tiene la particularidad que al pasar el ratón sobre las pestañas la pantalla se oscurece creando el efecto típico de las ventanas modales. Al mismo tiempo que la ventana se oscurece se despliega un submenú mostrando contenido extra. 

El ancho de este menú es de 560px una medida que se adapta a casi cualquier espacio del blog, si deseamos añadir más pestañas puede hacerse y también personalizar el menú respecto a colores.

¿Seguimos? Para añadir este menú en nuestro blog podemos hacerlo de la siguiente forma: Buscamos ]]></b:skin> y justo antes añadimos los estilos:

.oe_overlay { /* estilos de la ventana */
    background: none repeat scroll 0 0 #000000;
    height: 100%;
    left: 0;
    opacity: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
ul.oe_menu {  /* ubicación y ancho del menú */
    clear: both;
    float: left;
    list-style: none outside none;
    margin: 30px 0 0 30px;
    position: relative;
    width: 560px;
}
ul.oe_menu > li {  /* cada pestaña */
    float: left;
    height: 101px;
    padding-bottom: 2px;
    position: relative;
    width: 112px;
}
ul.oe_menu > li > a { /* color pestañas visibles */
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 80px;
    margin: 1px;
    opacity: 0.8;
    padding: 10px;
    text-decoration: none;
    text-shadow: 0 0 1px #000000;
    width: 90px;
    background: #138C95;
}
ul.oe_menu > li > a:hover, ul.oe_menu > li.selected > a { /* color pestañas seleccionada  */
    background: none repeat scroll 0 0 #0B585E;
    color: #000;
    opacity: 1;
}
.oe_wrapper ul.hovered > li > a { /* color pestaña en hover */
    background: none repeat scroll 0 0 #2ED8E9;
    text-shadow: 0 0 1px #ccc;
    color: #000;
}
ul.oe_menu div { /* bloque oculto */
    background: none repeat scroll 0 0 #2ED8E9;
    display: none;
    height: 180px;
    left: 1px;
    padding: 30px;
    position: absolute;
    top: 103px;
    width: 498px;
}
ul.oe_menu div ul li a {
    color: #000;
    display: block;
    font-size: 12px;
    margin: 2px;
    padding: 2px 2px 2px 4px;
    text-decoration: none;
}
ul.oe_menu div ul.oe_full {
    width: 100%;
}
ul.oe_menu div ul li a:hover {
    background: none repeat scroll 0 0 #000000;
    color: #FFF;
}
ul.oe_menu li ul {
    float: left;
    list-style: none outside none;
    margin-right: 10px;
    text-align: left;
    width: 150px;
}
li.oe_heading {  /* borde del bloque ocultor */
    border-bottom: 1px solid #000;
    color: #000;
    font-size: 16px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    text-shadow: 0 0 1px #ccc;
}

Estos estilos son los que tiene mi ejemplo, si preferimos los estilos del autor podemos descargarlos de su página.

A continuación lo que haremos será añadir jQuery justo antes de </head> si ya estamos utilizando la librería entonces omitimos este paso.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>

Seguimos, y copiamos el contenido de este archivo y lo pegamos a continuación de la librería jQury, es decir antes de </head>

Guardamos los cambios y con la plantilla en Diseño añadimos un gadget de HTML, en su interior pegaremos lo siguiente:

<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>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Special Events</a></li>
       <li><a href="#">Runway Show</a></li>
       <li><a href="#">Overview</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Winter 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Behind the scenes</a></li>
       <li><a href="#">Interview</a></li>
       <li><a href="#">Photos</a></li>
       <li><a href="#">Download</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Categories</li>
       <li><a href="#">Casual</a></li>
       <li><a href="#">Business</a></li>
       <li><a href="#">Underwear</a></li>
       <li><a href="#">Nature Pure</a></li>
       <li><a href="#">Swimwear</a></li>
       <li><a href="#">Evening</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Projects</a>
     <div style="left:-111px;"><!-- -112px -->
      <ul>
       <li class="oe_heading">Fashion Shows</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Evening specials</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Media</li>
       <li><a href="#">Wallpapers</a></li>
       <li><a href="#">Downloads</a></li>
       <li><a href="#">Images</a></li>
       <li><a href="#">Contest 2011</a></li>
       <li><a href="#">Fashion Mania</a></li>
       <li><a href="#">Green Earth Day</a></li>
      </ul>
     </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;">
      <ul>
       <li class="oe_heading">Shows 2010</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Shows 2011</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">New York</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Special Events</li>
       <li><a href="#">Fashion Party 2011</a></li>
       <li><a href="#">Fashion Countdown Party 2010</a></li>
       <li><a href="#">Fashion Day Milano</a></li>
       <li><a href="#">Model Workshops</a></li>
      </ul>
     </div>
    </li>
    <li><a href="">Stores</a>
     <div style="left:-447px;">
      <ul>
       <li class="oe_heading">Europe</li>
       <li><a href="#">Milano</a></li>
       <li><a href="#">Paris</a></li>
       <li><a href="#">Berlin</a></li>
       <li><a href="#">London</a></li>
      </ul>
      <ul>
       <li class="oe_heading">Asia</li>
       <li><a href="#">Hong Kong</a></li>
       <li><a href="#">Tokio</a></li>
       <li><a href="#">New Delhi</a></li>
       <li><a href="#">Beijing</a></li>
      </ul>
      <ul>
       <li class="oe_heading">United States</li>
       <li><a href="#">New York</a></li>
       <li><a href="#">Los Angeles</a></li>
       <li><a href="#">Seattle</a></li>
       <li><a href="#">Miami</a></li>
      </ul>
     </div>
    </li>
   </ul>
  </div>

Ahí debemos tener en cuenta que cada almohadilla # debemos sustituirla por en sitio a enlazar y cada texto-enlace debe ser sustituido por el texto a mostrar.