Saltar al contenido

Menú desplegable horizontal con css

jueves, 8 de octubre del 2009

A raiz del éxito que ha tenido el menú desplegable vertical y de algunas solicitudes, he investigado en el sitio de Stuart Nicholls (CSSplay), el cual contiene innumerables ejemplos de css. De allí tomé el menú “flyout-anywidth” y lo modifiqué un poco para crear los bordes, diferenciar el primer nivel y permitir multilínea en el primer nivel.

El menú es totalmente “cross browser”, funciona en IE6, IE7, IE8, Firefox, Opera, Safari y Chrome. Ya lo he usado en un par de proyectos y funciona de maravilla. Es muy liviano y fácil de actualizar, ya que está formado por items de una lista (ul, li).
Este es un ejemplo sencillo de menú de 3 niveles hechos solo con css y li’s:

DescargarDescargar código (zip)

Instrucciones

Si revisan el código se darán cuenta que para que funcione en Internet 6 los menús desplegables se formarán por medio de una tabla. Para esto se usan comentarios condicionales, los cuales solo funcionan en Internet Explorer:

<!--[if gte IE 7]><!--></a><!--<![endif]-->

La anterior línea quiere decir que si el navegador es una versión igual o superior a Internet Explorer 7 entonces cerrará el tag a (</a>). Cada nivel superior del menú debe incluir este comentario.

Igualmente al abrir o inicial un nivel del menú se debe incluir:

<!--[if lte IE 6]><table><tr><td><![endif]-->

Esto lo que hace es abrir una celda de una tabla si el navegador es Internet Explorer 6. Al finalizar la lista (ul) con sus items se debe incluir el comentario:

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

Este comentario cierra la celda, la tabla y el tag “a”, el cual habíamos dejado abierto con el primer comentario incluido.

La regla de estilos “#menu table” se usa para posicionar la tabla desplegable en Internet Explorer 6.

Si van a usar el menú por favor dejen los créditos de Stu Nicholls en el css.

Entradas relacionadas

Deja un comentario

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

Comentarios (7)

Tu menu muy bueno y eso pero tengo un problema con el IE 6.0 y es que no me ejecuta esto

$(‘#menu a’).each(function(){
var href = $(this).attr(“href”);
$(this).attr({ href: “#”});
$(this).click(function(){
$(“#contenido”).load(href);
});

En las versiones superiores si funciona y tambien en mozilla, pero necesito que funcione tambien con ie 6.0, ojalá pueda ayudarme…

Hola sebastiancb, con IE6 desafortunadamente puede uno tener resultados inesperados. No soy experto en javascript así que desafortunadamente no te puedo ayudar. Lo que si te puedo decir es que ya ni siquiera Microsoft da soporte sobre IE6, así que nosotros tampoco deberíamos hacerlo.

Excelente aporte no se como agradecerte. Gracias por compartir tus herramientas. Voy agrgar tu sitio ami lista de favoritos, gracias amigo

Luis, de verdad me ayudo mucho estas lineas de programacion para que mi botonera funcionara en IE 6
Saludos y gracias otra vez por compartir lo que sabes!

hola buenas noches hermano me baje un menu que tienes me parece buenisimo pero necesito de tu ayuda ten 3 dias tratando de resolver esto y no puedo tiro la toalla, resulta que tengo una pagina inicial con unos tab y el primero deveria mostrar tu menu y lo hace pero al parecer no esta aplicando el css (internet explorer) ya que fire fox si lo hace por favor dame un correo para enviarte el codigo para que me heches una mano es que necesito que funcione en explorer de verdar que son muy pocas lineas y pienso que no se te hara dificil para respondeme los tabs los puse con jquery

Hola solo queria saber si podrias dejar un ejemplo de como hacer un menu en css (los otros me sivio el de barra lateral) pero quiero hacer algo asi : http://www.iconspedia.com ese menu cuando das click en view al categorie que se agranda o se encoge, espero puedas poner un articulo asi sino muchas gracias por los otros 2 menus aun que alla usado 1.

jajaja, ya somos dos deseando un menú igual, pero veo que necesita javascript, no existe la manera de hacer uno parecido pero con css puro??