Menú y submenú con JQuery y CSS3
Este es un menú que necesariamente tiene que tener una llamada desde javascript al submenú.
Se puede leer todo el código en el ejemplo (está el css y el jquery en duro para el ejemplo, pero recomiendo llevarlo a archivos aparte), voy a explicarlo un poco.
Para la estructura usaremos la etiqueta <nav> de HTML5 y listas <ul>. Para el submenú usaremos un <div> que contiene otras listas y con CSS3 le diremos que nos la distribuya en dos columnas. Para ello aplicaremos al <div id=”submenu”> el siguiente atributo:
column-count:2;
column-gap:5px;
column-rule: dotted 1px #999;
Como a día de hoy los navegadores no se han puesto de acuerdo en el estándar hay que añadir las tres mismas líneas con el prefijo -webkit- y -moz- para solucionar el cross-browser.
Los bordes redondeados se consiguen también con css3 escribiendo (por supuesto con los prefijos también):
border-radius:0 0 10px 10px;
Y ahora llega la magia de Jquery. El orden en el que hemos colocado los divs del submenú debe ser el mismo índice en el DOM que los elementos de la lista principal. Así, al Menú 1 le corresponde el primer div que hay dentro del elemento nav. Al Menú 2 le corresponde el segundo. Para asociarlos usamos este índice de la siguiente manera:
$(document).ready(function() {
$(“.submenu”).hide(); // Primero ocultamos todos los submenús
$(“#menu li”).mouseover(function(){
var indice=$(this).index(); // Con esto declaramos el índice de cada elemento li del menú principal
$(“.submenu”).hide(); // Esto lo hacemos para que no se superpongan los submenús
$(“div.submenu”).eq(indice).fadeIn(); // Con esta sentencia le decimos que aquel div con la clase submenú cuyo índice en el DOM sea el mismo que el que sea clicado aparezca
$(“#menu li”).removeClass(“menuOver”);
$(this).addClass(“menuOver”);
});
$(“h1″).mouseover(function(){
$(“div.submenu”).fadeOut();
$(“#menu li”).removeClass(“menuOver”);
});
});
¡Y zas! Ya tenemos un menú con submenús en varias columnas fácilmente.
Espero que os sea útil.
Saludos.