Menú con tabs con CSS, jQuery y Mootools

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.

Sobre el Autor: Jorge Epuñan

Soy quien escribe en este sitio: diseñador gráfico de profesión, desarrollador web por preferencia y amante de la interacción humano-computador. Cuando no pienso en web, salgo a trotar por mis barrios en Santiago, Chile o me junto con amigos a un bar a conversar sobre nuevas tendencias y tecnologías. Twitter profesional y personal, además del Contacto.

Relacionados

Tip Precoz 3: RGBa

Tip Precoz 3: RGBa

Como debes saber, existe más de una manera de declarar colores en CSS: Nombres (websafe): por 17 colores en inglés : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white y yellow (actualmente los browsers modernos soportan muchos más). Sistema (no lo recomiendo): por colores del sistema operativo que esté utilizando el usuario del sitio: ActiveBorder, AppWorkspace, Background, ButtonFace, ButtonHighlight, ButtonShadow, ButtonText, HighlightText, InactiveBorder, [...]

<option disabled="disabled"> en IE6+

Nuevamente vengo con un error de nuestro querido amigo IE6 que también es compartido por IE7 y el beta1 de IE8 (estos de Micro$oft no aprenden nunca…). Gracias a Rodrigo, me hizo notar que estos browsers no interpretan correctamente a <option> de un <select> que contenga el atributo disabled="disabled". Todos los otros navegadores buenos lo [...]

Mejor renderizado para textos

Mejor renderizado para textos

Érase una vez una tímida propiedad CSS que pocos conocen y nadie usa, pero que es muy beneficiosa cuando tratamos con textos. Es conocido que cada plataforma -y cada browser- trata a las tipografías a su modo; es así como un font-size de una Arial no es similar no sólo dependiendo de la resolución ó [...]

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

    dubó
    23 / Octubre / 2008

  2. 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

    scuain
    24 / Octubre / 2008

  3. 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

    dubó
    24 / Octubre / 2008

  4. 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.

    fearlex
    24 / Octubre / 2008

  5. @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.

    scuain
    25 / Octubre / 2008

  6. 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?

    Pablo
    28 / Octubre / 2008

  7. hola esta muy bueno tu blog me sirvio mucho gracias

    mary
    16 / Junio / 2009

  8. gracias, me sacaste de un apuro.

    kique
    30 / Julio / 2009

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

    Erick
    26 / Mayo / 2010

  1. [...] si realmente vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ...
    Blog de Cristiam Herrera Daza » Blog Archive » Nuestro verdadero cliente
  2. [...] vale la pena utilizar alguna ventana modal, o validación de formularios con :focus, menú con tabs, 2 ó 3 ...
    Nuestro verdadero cliente ↝ CSSLab

OJO: si vas a agregar código fuente, asegúrate de convertirlas antes a entidades HTML, sino el comentario no se renderizará correctamente.

compartido 2 veces
Cargando