Menú con tabs con CSS, jQuery y Mootools

Esos menúes tipo tabs ó con subniveles tanto [horizontales][1] 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.

Por suerte hacer estos tipos de menúes es bastante fácil: basta con tener claro cómo funcionan los [menúes con listas][2] 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 (). 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][3] ó [Mootools][4], 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"><br />
  <li><a href="#">Uno</a></li><br />
  <li class="cabeza"><a href="#">Dos</a><br />
     <ul><br />
        <li><a href="#">Dos.Uno</a></li><br />
        <li><a href="#">Dos.Dos</a></li><br />
        <li><a href="#">Dos.Tres</a></li><br />
     </ul><br />
  </li><br />
  <li><a href="#">Tres</a></li><br />
  <li class="cabeza"><a href="#">Cuatro</a><br />
     <ul><br />
        <li><a href="#">Cuatro.Uno</a></li><br />
        <li><a href="#">Cuatro.Dos</a></li><br />
     </ul><br />
  </li><br />
</ul>

[Ver ejemplo del HTML][5]{.verejemplo}

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

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

[Ver ejemplo con CSS][7]{.verejemplo}

Para mejorar el manejo del despliegue de los subniveles, le coloqué una class=“cabeza” a cada elemento de lista (

) 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(){<br />
  <span class="commentjs">// primero escondemos todos los subniveles</span><br />
  $('li.cabeza > ul').hide();<br />
  <span class="commentjs">// luego le agregamos el evento de <em>mouseover</em> y <em>mouseout</em> mediante <em>hover</em> de <em>jQuery</em></span><br />
  $('li.cabeza').hover(<br />
    function() {<br />
      $('ul', this).show();<br />
    },<br />
    function() {<br />
      $('ul', this).hide();<br />
  }); <br />
});

[Ver ejemplo jQuery][8]{.verejemplo}

Muy simple. Ahora, con Mootools (1.11):

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

[Ver ejemplo Mootools][9]{.verejemplo}

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.

[1]: http://www.csslab.cl/2006/02/20/menu-horizontal-y-algo/ “Enlace en CSSLab a “Menú horizontal y algo +”” [2]: http://www.csslab.cl/2007/12/28/videocast-2-menu-con-listas/ “Enlace en CSSLab a “Videocast 2: menú con listas”” [3]: http://www.csslab.cl/tag/jquery/ “Enlace en CSSLab a “Tags: jQuery”” [4]: http://www.csslab.cl/tag/mootools/ “Enlace en CSSLab a “Tags: Mootools”” [5]: http://www.csslab.cl/ejemplos/tabs/tabs_html.html “Enlace en CSSLab a “Menú con Tabs - HTML”” [6]: http://www.csslab.cl/2007/06/05/selectores-avanzados-de-atributos/ “Enlace en CSSLab a “Selectores avanzados de atributos”” [7]: http://www.csslab.cl/ejemplos/tabs/tabs_css.html “Enlace en CSSLab a “Menú con Tabs - CSS”” [8]: http://www.csslab.cl/ejemplos/tabs/tabs_jquery.html “Enlace en CSSLab a “Menú con Tabs - jQuery”” [9]: http://www.csslab.cl/ejemplos/tabs/tabs_mootools.html “Enlace en CSSLab a “Menú con Tabs - Mootoools””