CSSLab

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.

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.