Menú con tabs con CSS, jQuery y Mootools

23/Oct/2008 248

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. KevinchaWn [#]

    buy generic doxycycline doxycycline generic – vibramycin 100 mg

  2. Gctwwv [#]

    cialis tab 10mg – online med pharmacy cialis otc us

  3. KevinchaWn [#]

    amoxicillin 500mg price amoxicillin without rx – amoxicillin from canada

  4. Khcxlb [#]

    cialis over the counter australia – tadalafil australia paypal cialis 20mg

  5. KevinchaWn [#]

    doxycycline tetracycline buy doxycycline online without prescription – buy doxycycline online 270 tabs

  6. Zamfwp [#]

    prednisone us – how much is prednisone cost prednisone 10 mg daily

  7. KevinchaWn [#]

    amoxicillin 500 mg tablet amoxicillin without rx – amoxicillin 500mg for sale uk

  8. KevinchaWn [#]

    neurontin pill neurontin generic – neurontin 3

  9. Uazgwg [#]

    prednisone 5 mg tablet – 5443 prednisone prednisone 0.5 mg

  10. KevinchaWn [#]

    neurontin 300 mg cap gabapentin – neurontin 100mg

  11. ThomasStory [#]

    https://viagrasv.com/# when will viagra be generic
    viagra without a doctor prescription usa

  12. Iweadk [#]

    levitra for sale – generic vardenafil online uk generic vardenafil online uk

  13. ThomasStory [#]

    https://viagrasv.com/# mexican viagra
    where to buy viagra online

  14. Fdizes [#]

    order vardenafil online canada – levitra online order levitra

  15. Qgcwrp [#]

    lyrica 550 mg – lyrica tablets uk lyrica best price

  16. Leonardoxymn [#]

    erectile dysfunction medicines trustworthy online pharmacy – top online pharmacy

  17. Fpipas [#]

    lyrica 300 mg price – lyrica tablets 150mg buy lyrica cheap online

  18. Leonardoxymn [#]

    medicine for ed buy generic ed pills online – online pharmacy without insurance

  19. Ljzzwh [#]

    buy azithromycin online – zithropills.com can you buy zithromax

  20. Bjkciv [#]

    buy zithromax – azithromycin z pack azithromycin dosage

  21. Dmnlqc [#]

    buy cheap prednisolone – prednisolone without prescription buy prednisolone 5mg without prescription uk

  22. Jamescoaky [#]

    http://hydroxychloroquinefst.com/# hydroxychloroquine 90 mg

  23. Spbfpl [#]

    buy prednisolone australia – prednisolone pack prednisolone purchase uk

  24. Apoxeq [#]

    stromectol order online – stromectol drug cost stromectol

  25. Jamescoaky [#]

    http://hydroxychloroquinefst.com/# plaquenil 200mg price in india

  26. Akfsfz [#]

    stromectol ivermectin 3 mg – ivermectin 3mg for lice buy ivermectin for humans australia

  27. Vnbvmu [#]

    viagra 100mg online canada – sildenafil 5mg price how to order viagra in canada

  28. Ihfptg [#]

    purchase viagra online cheap – order viagra 50 mg can you buy real viagra from canada

  29. Jamescoaky [#]

    http://metforminfst.com/# metformin 1g

  30. Xmjzaq [#]

    lasix online canada – buy doxycycline online 270 tabs doxycycline monohydrate

  31. can hydroxychloroquine cause blindness [#]

    whats hcq https://plaquenilx.com/# hydrocloroquine

  32. Xfbaca [#]

    buy zithromax – fastzimax zithromax 100mg pills

  33. Oxqipy [#]

    buy lasix online – lasipll.com how to get lasix without a prescription

  34. Xckqjd [#]

    furosemide 250 mg tablet – furosemide brand name in india lasix 40 mg tablet price

  35. Fudnso [#]

    generic clomiphene – order clomiphene clomid online

  36. dolquine [#]

    hydroxycloraquin https://plaquenilx.com/# side effects of hydroxychloroquine 200 mg

  37. Homaqp [#]

    clomiphene generic – where can i buy clomiphene clomid treats

  38. Hzzfvu [#]

    viagra 50mg for sale – best viagra prices buy brand name viagra

  39. define chloro [#]

    hydroxychloroquine dangers https://plaquenilx.com/# hydroxychloroquine use

  40. Lgdify [#]

    buy online viagra tablets – generic viagra sales i want to buy viagra

  41. what do you eat on a keto diet [#]

    keto diet foods to eat https://ketodietione.com/

  42. Acugat [#]

    cheap tadalafil 20 mg canada – cost of cialis 2.5 mg best canadian online pharmacy

  43. Pcpqfr [#]

    cost of stromectol – ivermectin cream uk stromectol cream

  44. Pgknfh [#]

    hollywood casino – jackpot party casino hollywood casino

  45. gay dating denver [#]

    shinee key gay dating https://freegaychatnew.com/

  46. gay online dating subculture [#]

    best gay dating sites 2021 https://gaychatgay.com/

  47. Igkthy [#]

    online slots – casinoslotgam vegas casino online

  48. gay men phila dating [#]

    sugar daddy gay dating https://gaydatingzz.com/

  49. Gkfoan [#]

    non prescription erection pills – what is the latest treatment for erectile dysfunction medications that cause erectile dysfunction

  50. Glcokl [#]

    pills for erection – ed medication ed medications online

CSSLab