Saltar al contenido
css

Menús desplegables solo con CSS

martes, 18 de diciembre del 2007

Para un par de clientes tuve que incluir menús desplegables en los diseños de sus sitios web. Uno de ellos, muy amablemente me envió una copia del menú que usaban en el sitio Internacional de su compañía. Pero al darme cuenta de la cantidad de archivos .js que había que incluir y la cantidad de div’s con condiciones «show» y «hide» para hacer un simple menú, pensé: debe haber una forma más sencilla de hacer esto…

CSSplayMe dí a la tarea de investigar, y gracias a un enlace que me envió mi amigo  diseñador Alvaro Diaz encontré el sitio CSSplay de Stuart Nicholls. El sitio tiene una gran variedad de menús que usan solo CSS y listas (ul y li), además de muchos ejercicios con CCS que valen la pena revisar. Los ejemplos son muy buenos, pero les recomiendo usar los menús «cross browser» ya que funcionan perfectamente en IE6, IE7 y Firefox. Además funcionan sobre archivos de flash (solo hay que incluir el parámetro wmode=»transparent» al swf).

Este es un ejemplo sencillo de menú de 3 nivesles hechos solo con css y li’s:

Descargar el código (zip)

Deja una respuesta

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

veinte − nueve =

Comentarios (90)

Me parece muy práctico y sencillo de usar la forma en que se propone generar el menú.
En el ejemplo, se muestra un menú horizontal, sirve para menú del mismo estilo pero de forma vertical?, puede mostrarnos un ejemplo?; en ambos caso podríamos bajar el código fuente para basarnos nosotros y no tener que navegar al sitio del cual ud. obtuvo la información?.

Gracias por los datos, es muy práctico para los que no entendemos mucho de jscript.

Carlos Malagón

Gracias por tu comentario Carlos, ya puedes descargar el código del ejemplo.

Me parece muy bueno, me ha sacado de un lio.

Gracias.

gracias, eres el único que lo pone bien clarito.

El menu es escepcional. EL diseño es bonito, y se puede cambiar a gusto de cada cual.La explicación muy clara.

La duda es : ¿Es freeware o hay que pedir cuarenta permisos + pagar para uso en una web?

Muy bueno el menú, pero tengo un problema, ya que al ejecutar el menú sólo funciona correctamente en IE6 pero si lo incluyo bajo otro div que abarca todo el contenido de la página no funciona, puesto que al pasar con el ratón sobre el menú se despliega todo al mismo tiempo.

El menú es completamente freeware. Solo aconsejo dejar los comentarios del autor original (CSS Play) como agradecimiento al tiempo y esfuerzo del autor.

Gracias al autor por subir esta información.

Hey que tal, como estan, Muchas gracias por tocarme el codigo de como hacer un menu solo con css, en verdad si que fue muy util, muchas gracias, es interesante y lo explicate pero «perfect»…..

Cuidense….. Bye!

Muchas gracias al autor por el aporte. Primer «tutorial» de menu desplegable css bueno que veo.

Gracias por tu aporte en verdad lo necesitaba mucho exito con tu blog…

Muchas gracias por este aporte, en realidad me parece muy práctico y de gran utilidad.

Excelente menu con css, muy funcional y practico, gracias por el aporte.

Excelente de verdad muy bueno.

millones de gracias asi da gusto

HOla amigo, buenas noches, tengo una pregunta, este codigo lo pegas en la .css o en el .xml ? de ante mano muchas gracias ¿tienes correo en msn para estar en contacto?

excelente menu !! gracias

El menu es excelente pero no funciona correctamente para IE6, ya que si tengo un control html, cuando paso en mouse en el menu, éste se posiciona por debajo de mi control, espero me hayan entendido y me puedan ayudar

Luisa, gracias por tu comentario. Si revisas el código, el menú trae unos comentarios especiales que permite que el menú sea visible en IE6. No te entiendo tu problema, por favor envíame un pantallazo y el código para poder ayudarte.

MUY BUENO! … MUCHAS GRACIAS!

Hay alguna forma de que funcione en chrome?

Muchas gracias por este excelente ejemplo, por fin logro entender cómo funciona y hacerme mis propios menús desplegables sin tener que «huir» a Flash, jeje.
Un saludo!

grax x el sitio =) era justo lo q taba buscando =)

exelente el menu es muy practicopara trabajar.

El menú también funciona en Google Chrome. Pueden verlo en http://www.visa.com.co

Colombia – San Juan de Pasto, Mayo 11 de 2.009
Señor
Luis Angel Camargo
Diseñador y Consultor WEB
Cordial Saludo.

Me dirijo hacia usted para agradecerle por su ayuda sobre la creación de menus despleglables, me ha sido de gran ayuda para mi carrera de ing. de sistemas que actualmente la estoy cursando. Muchas Gracias por sus aportes al conocimiento.

atentamente
Martin Reyes

muchisimas gracias estube buscando esto por todos lados aguante el autor que lo hizo es un master y bueno el aporte

El menu esta muy bueno, y la idea de hacer un menu con solo css es muchisimo mejor. Pero en este caso, este menu tiene muchisimo codigo y esta demasiado parchado para los navegadores, la verdad que pienso que seria mas facil usando javascript que recorrer todo ese codigo. El codigo se puede simplificar muchisimo mas y tambien se lo puede hacer sin parchar.

Hola… estuve dando vueltas por toda la red buscando un ejemplo práctico de menu desplegable… y la verdad este es el único sitio donde encontré algo que aparte de tener un gran valor, permite el acceso al codigo, Gracias Luis…

Excelente codigo, muy bueno felicidades… esto era lo que buscaba.

Muchas gracias por el ejemplo, la verdad es que soy nuevo en este mundo del CSS y me parecio un ejemplo muy claro y breve para aplicar.

muy buen trabajo, es estético y pracitco.
gracias y me ayudo mucho para un trabajo

Muchas gracias la verdad esta muy bueno este codigo, yo estaba utilizando otro y la verdad no me funcionaba en varios navegadores, este se encuentra muy completo.

muchisimas gracias por éste aporte…es sencillo y muy útil.

hola, me parece muy bueno tu menu , pero quisiera saber como ingresarlo a mi php nuke 8.1 ya que intentado cargarlo pero no me carga los sub menus porfavor me puedes ayudar con eso.
saludos

Muy buen aporte me ha sido de gran utilidad….

hey gracias :D!

Muchas gracias, realmente me ha solucionado un gran problema.

hola luis angel gracias por el menu

Me sirvio, gracias

Muchas gracias el menu desplegable es muy bueno y creativo.
Me gustaria que compartieran otro menu desplegable.
(.js)

Gracias por compartir esto amigo para ir entendiendo un poco más el css ¿Por favor podrías poner la versión para que salga en vertical? porque al hacer el cambio se descuadra, supongo debe ser por el posicionamiento

Saludos

Hola men, gracias mil!!! de mucha ayuda lo que publicas, de verdad a veces das mil vueltas en la red buscando y nada que resuelves tu duda, pero al final una luz en el tunel con tu publicación… espero sigas ayudandonos a todos los que vamos empezando en esto, sigue asi, y felicidades!!

utilice el ejemplo para hacer un menu con 8 items el problema que tengo es que despues de 5 items en internet explorer no funciona. alguna sugerencia

mor1b: el número de items no tiene nada que ver. En el ejemplo el contenedor del menú (#marco) tiene un ancho fijo de 455px. Prueba modificando este valor o eliminando la regla widht de este estilo. También debes tener cuidado con las etiquetas comentariadas para internet explorer 6 o 7. Si sigues teniendo problemas envíame tu página al correo luisangel.camargo en gmail.

[…] 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 […]

ES MUY PRACTICO Y SENCILLO, TAL COMO LO EXIGE LA BUEN PROGRMACION.
GRACIAS

Hola Luis Angel Camargo, excelente el menú desplegable, esot mismo se podría realizar en vez de que al pasar el cursor aparezcan los submenus se generen al hacer clic?

Hola David, no lo he hecho, pero habría que probar. Actualmente el menú se vuelve visible al pasar por encima el puntero del mouse usando el identificador «:hover» de un vínculo. Habría que cambiar «:hover» por «:active» en todas las instancias expecto para el primer nivel del menú, es decir a las reglas que contienen: «a.top_link». Haz la prueba y me cuentas.

Es realmente liviano y bastante util.
Gracias por este maravilloso aporte, exitos en tus proyentos.