Menú con tabs con CSS, jQuery y Mootools

23/oct/2008 14

Esos menúes tipo tabs ó con subniveles tanto horizontales como verticales, son muy útiles al momento de desplegar grandes cantidades de navegación sin ser invasivos con el espacio. Puedes arquitecturar toda la estructura de tu sitio de manera tal que el usuario pueda encontrar fácilmente la información que desee, sólo con ir descubriendo con el mouse las subsecciones que están contenidas dentro del árbol general de navegación.

SafariFirefoxOperaInternet Explorer 6Internet Explorer 7

Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los menúes con listas e ir anidando unas dentro de otras; incluso sólo con CSS es suficiente para hacerla funcionar, pero lamentablemente el peor browser de la historia universal (IE6) no soporta pseudo-classes en selectores que no sean links (<a>). Así que lo mejor y que más soporte cross-browser nos entrega es utilizar Javascript en este proceso. Y qué mejor que utilizar jQuery ó Mootools, 2 de los frameworks con los que me gusta jugar.

En este artículo veremos el proceso para crear un menú con tabs y cómo hacerlo funcionar mediante CSS y con la ayuda de Javascript.

Como mencionaba, un menú con tabs se compone básicamente de listas anidadas sobre otras listas. El HTML sería el siguiente:

<ul id="menu">
<li><a href="#">Uno</a></li>
<li class="cabeza"><a href="#">Dos</a>
<ul>
<li><a href="#">Dos.Uno</a></li>
<li><a href="#">Dos.Dos</a></li>
<li><a href="#">Dos.Tres</a></li>
</ul>
</li>
<li><a href="#">Tres</a></li>
<li class="cabeza"><a href="#">Cuatro</a>
<ul>
<li><a href="#">Cuatro.Uno</a></li>
<li><a href="#">Cuatro.Dos</a></li>
</ul>
</li>
</ul>

Ver ejemplo del HTML

Si el mundo fuera hermoso y no existiera IE6, nos bastaría con un poco de CSS y selectores avanzados de atributos para hacerlo funcionar:

ul {
list-style: none;
}
ul li {
float: left;
width: 100px;
text-align: center;
}
li.cabeza>ul {
display: none;
}
li.cabeza:hover>ul {
display: block;
}

Ver ejemplo con CSS

Para mejorar el manejo del despliegue de los subniveles, le coloqué una class="cabeza" a cada elemento de lista (<li>) que contenga cada nuevo subnivel. Ahora es más fácil diferenciarlas con CSS ó Javascript, como mostraré a continuación. Primero, con jQuery:

$(document).ready(function(){
// primero escondemos todos los subniveles
$('li.cabeza > ul').hide();
// luego le agregamos el evento de mouseover y mouseout mediante hover de jQuery
$('li.cabeza').hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
});
});

Ver ejemplo jQuery

Muy simple. Ahora, con Mootools (1.11):

window.addEvent('domready', function() { 
// creamos una variable 'list' que será el selector <li> con class="cabeza", ya que la usaremos más de una vez.
var list = $$('li.cabeza');
// luego escondemos cada <ul> que esté contenido dentro de li.cabeza mediante display: none
list.getElement('ul').setStyle('display', 'none');
// ahora agregamos los eventos de mouseenter y mouseout respectivos
list.each(function(el) {
el.addEvent('mouseenter', function(){
$(this).getElement('ul').setStyle('display', 'block');
});
el.addEvent('mouseleave', function(){
$(this).getElement('ul').setStyle('display', 'none');
});
});
});

Ver ejemplo Mootools

Finalmente si usas un browser bueno, cualquier de los 3 métodos funcionará igual; viene de ti implementarlo de la mejor forma para que tus usuarios que aún usen IE6 para visitar tu sitio puedan disfrutar de una buena navegación y del contenido que ofrece.

Comentarios

  1. dubó [#]

    En general, se puede hacer con CSS y que funcione en IE6, ergo, prefiero no usar JS para estos fines, o me equivoco?

  2. Jorge Epuñan [#]

    Dubo: he investigado y no conozco ninguna técnica q permita hacer menú con tabs solo con css y q funcione hasta en IE6; como vez en el ejemplo q hice solo con css funciona en todos los browsers, menos en IE6.

    Si tienes una, bienvenido sea me encantaria saber como. Salu2.

  3. scuain [#]

    Gracias por el blog Jorge. Lo sigo desde hace bastante tiempo.

    En CSS Play hay algunos ejemplos de lo que te comenta dubó
    http://www.cssplay.co.uk/menus/dd_valid.html
    http://www.cssplay.co.uk/menus/final_drop.html

  4. Jorge Epuñan [#]

    scuain: gracias por tus palabras. lamentablemente de los ejemplos q rescatas, el primero (dd_valid) usa comentario condicional para insertar unas tablas para q funcione en IE6:

    <!–[if lte IE 6]>
    <a class="sub" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">HOVER/CLICK &gt;
    <table><tr><td>
    <![endif]–>

    Sobre el segundo ejemplo, esta lleno de hacks de css:

    /* another hack for IE5.5 */
    * html .menu ul ul {top:30px;t\op:31px;}

    Lamentablemente no existe una solucion definitiva, pura, limpia para tabs en IE6. me quedo con un poco de JS para tener el HTML mas pulcro (aprovechando claro q estare usando tal o cual libreria en el proyecto; no incluire jQuery o Mootools SOLO por unos tabs).

    Salu2.

  5. dubó [#]

    toda la razon, no es posible hacerlo sin hacks o js. lo que pasa es que estoy tan mecanizado en usar el ie7-js que se me olvidó. en todo caso esta ultima solucion me parece las mas liviana y estandarizable. lo puse en práctica en http://www.derechosdigitales.org

  6. fearlex [#]

    Esta es la mejor opcion que he encontrado hasta el dia de hoy, que funciona en todos los navegadores:

    http://www.htmldog.com/articles/suckerfish/dropdowns/

    Incluyendo el tan odiado IE6.

  7. scuain [#]

    @Jorge: Pensaba que querías algo que funcionase sin JS no algo perfecto ;-)

    Fuera de bromas… Yo tampoco conozco nada para IE6. Lo que apunta fearlex esta muy bien. He visto que esta basado en el clásico http://www.alistapart.com/articles/dropdowns que he usado alguna vez.

    Personalmente me quedo con estos dos último métodos.
    Son 100% válidos y funcionan sin JS en todos los navegadores menos IE6 (con JS activado funciona en todos). La desventaja es que “ensucias” un poco el HTML.

  8. Pablo [#]

    Está muy bien lo que comentas, y creo que voy a incluirlo en una web q estoy haciendo. El problema que he visto es que al desplegar los submenús desplazan el resto del contenido de la página, en lugar de superponerse.
    ¿Cómo se haría en este caso?

  9. Jorge Epuñan [#]

    Pablo: posicionando absolutamente el submenu. Saludos.

  10. Blog de Cristiam Herrera Daza » Blog Archive » Nuestro verdadero cliente [#]

    [...] si realmente vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en cómo se ordenará y finalmente entregará la [...]

  11. mary [#]

    hola esta muy bueno tu blog me sirvio mucho gracias

  12. kique [#]

    gracias, me sacaste de un apuro.

  13. Erick [#]

    Thanks a lot for sharing with us. I found many answers form your site. Comparing them with php tutorial would be a great experience.

  14. Nuestro verdadero cliente ↝ CSSLab [#]

    [...] vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 columnas, etc. Todo eso influye en cómo se ordenará y finalmente [...]

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab