Menu desplegable 100% CSS

[Mikmoro]

Hola a todos.

Como mucha gente pregunta por un menú desplegable que esté hecho sólo con CSS, y algunos dan problemas con los diferentes navegadores, he hecho uno horizontal de dos niveles y centrado en la página, que pueda servir como referencia para desarrollar el propio a partir de ahí.

Menú CSS

La hoja de estilo

Ha sido probado y funciona correctamente en los siguientes navegadores:

- Firefox 2 y 3b5
- IE 6 y 7
- Opera 9.50
- Safari 3.1 Windows
- Konkeror
- Firefox 2.0 Linux

El código es válido XHTML 1.0 Strict y la CSS sin errores ni advertencias.

Espero que os sirva.

EDITO:

Como parece que están siendo prácticos, y por las consultas he ido haciendo más opciones, los voy a recopilar aquí para quienes no lean todo el hilo. También están en las FAQ.

Menú 2: menú horizontal con el segundo nivel también en horizontal.

Y su css.


Menú 3: segundo nivel en vertical, como el primero, pero que despliega hacia arriba.

Y su css.


Menú 4: segundo nivel en horizontal, como el segundo, pero hay que pulsar para que aparezca y queda activo tras hacerlo.

Y su css.


Menú 5: menú en vertical, con el segundo nivel también en vertical a su derecha.

Y su css.


Es lo que hay por el momento. Seguiremos añadiendo.

Mikel.

[Marcos071]

Muchas gracias!!! muy bueno tu aporte amigo, me encanto, xq siempre estuve con estos menues lidiando con los navegadores...ya implementare esta para una web que ahora estoy haciendo y te mando cuando este hecha y lo desean...

Muchas gracias mikmoro!!!

[JavierB]

Buen trabajo Mikmoro

Podías ponerlo en las FAQs, para tenerlo siempre a mano.

Saludos,

[Mikmoro]

Lo había pensado, javierB, pero como nunca lo visito no sabía si se podían poner cosas ahí por cualqueira o habrían de ser filtradas por lo moderadores o así. Pensaba mirarlo luego.

En un rato lo mando para allá. Gracias por el aviso.

Mikel.

[masclet]

Gracias y enhorabuena por tu trabajo.
Justo andaba enredando estos días con el tema de un menú desplegable con css, y este me ha parecido genial, xq lo último que estaba haciendo es poner un menú con ajax, pero que no me convence.

[Mikmoro]

Me alegro de que te sirva de base para tu desarrollo. Esa era la intención.

Saludos.

Mikel.

[Raulmmmm]

¡Por fin! ¡Un menú desplegable con sólo CSS que funcione en IE6! Esto es una maravilla...

[maria16]

Hola, gracias!!! por el menú era lo que hace días estaba buscando porque no me salia. Saludos.

[Wing]

Gracias, muy buen aporte.

[webosiris]

buen aporte
aunque personalmente prefiero hacer un html menos complicado, usar script ie7 y hacer el desplegable con li:hover

[Mikmoro]

Desde luego, todo es una cuestión de gustos.
Yo sin embargo prefiero no depender de Javascript para un menú hecho sólo con css. Si tengo que usar JS, seguro que es más sencillo hacer una función que haga lo mismo.

Mikel.

[webosiris]

Iniciado por Mikmoro

Desde luego, todo es una cuestión de gustos.
Yo sin embargo prefiero no depender de Javascript para un menú hecho sólo con css. Si tengo que usar JS, seguro que es más sencillo hacer una función que haga lo mismo.

por lo menos la tecnica que yo uso es 100% css, el js es solo para arreglar los bugs de ie6 y que permita usar hover en otros elementos además de A

TODOS los usuarios de ie6 tienen js activado (no es compatible ser tan obsesivo de la seguridad para desactivar js y usar IE6 )

[Mikmoro]

Si, desde luego es poco compatible.

Ya conocía el JS, pero nunca lo he usado. Sé que sólo se cargará para IE6, pero como bien sabes y seguro que me vas conociendo, esto es sólo un divertimento de cómo conseguir hacer ese menú con css y las peculiaridades del maldito. En un caso en producción, desde luego habría que estudiar qué merece más la pena, una cosa u otra en función del resto de cosas.

Mikel.

[samile]

Hola,

Esto es una maravilla, aprovecho para hacer una consultilla alguno sabe como ponerle bordes redondeados a este tipo de menus, yo lo estoy intentando con niftycube...pero solo he logrado que funcione para el titulo.

Agradeceria culaquier ayuda!!
Si logro que funcione lo publico para que todos puedan acceder.

[gepd]

Iniciado por Mikmoro

Si, desde luego es poco compatible.

Ya conocía el JS, pero nunca lo he usado. Sé que sólo se cargará para IE6, pero como bien sabes y seguro que me vas conociendo, esto es sólo un divertimento de cómo conseguir hacer ese menú con css y las peculiaridades del maldito. En un caso en producción, desde luego habría que estudiar qué merece más la pena, una cosa u otra en función del resto de cosas.

Mikel.

Exacto mikel creo en donde se debe probar un script debe ser en dos situaciones, compatibilidad con los navegadores y tiempo de respuesta que demánda cargarlo

ya que con los dos Js y CSS se puede conseguir el mismo aspecto, habría que hacer esa prueba, yo por ahora en todos mis codigo intento optimizarlos mucho cada linea son microsegundos importantes para aquellos usarios que no tienen la suficiente banda ancha como para "volar"...


saludos

[Mikmoro]

Yo, aunque como he dicho no lo he usado nunca, he leido que el script de compatibilidad de las pseudo-clases para IE hace que la web vaya un poco más torpe y pesada. Tendría que probarlo y comparar para saberlo seguro.

Mikel.

[loverpiu]

Muhas gracias por esto , me viene de perlas.

[mptx]

Se agradece el tremendo aporte, estaba harto de buscar por todos lados y este menú está de lujo,
sólo mirar código y listo.
saludos a todos los que buscaban un menú que funcione...en explorer!

[Mikmoro]

Atendiendo a una consulta del usuario neodani, he hecho el mismo menú pero con el segundo nivel también en horizontal.

El menú es este

Y la hoja de estilo esta

Espero que también os resulte útil.

Mikel.

[mptx]

Mikmoro,
una consulta: ¿dónde se maneja la alineación del menu en la ventana? porque lo puse
dentro de una tabla y ésta de alinea a la izq de la ventana. En el css veo un float left para la tabla
y lo cambio pero nada, en el codigo html igual y nada.
gracias de antemano.

[Mikmoro]

La alineación se maneja en la caja que contiene el menú, que se llama menú ( qué original):

#menu { text-align: center;
font-size: 0.7em;
width: 820px;
margin: 20px auto;
}

El selector de tabla lo he puesto así porque sólo tengo las tablas ficticias para IE6 en todo el menú. Para desambiguarlo, ponle una clase a las tablas del menú como:

<table class="falsa"><tr><td>...etc.

y ahora el selector de la tabla en la css lo pones como:

table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}

Esto te permitirá poner otras tablas sin que se vean afectadas por ese selector y colocarlas como quieras.

Mikel.

[mptx]

Ey, muchas gracias Mikmoro por responder.
Está super bueno el aporte, voy a probar ahora las modificaciones.
Saludos.

[Mikmoro]

Ya lo he corregido porque es cierto que era una cosilla que se podía mejorar. Gracias por el detalle. Si quieres volver a coger los códigos, está ya hecho lo que te he recomendado.

Mikel.

[MasterXNicoX]

che Y Como Se Hace Para Que En Vez De Desplegarse Hacia Abajo, Lo Haga Para Arriba ?????????????

[Mikmoro]

¿Cuál? ¿el primer menú o el segundo? es decir, el que despliega el segundo nivel en vertical o el que lo hace en horizontal.

Mikel.

[MasterXNicoX]

Osea, por ejemplo: cuando yo pongo el mouse en Opcion1 se despliega hacia abajo ( Opcion1.1 y Opcion1.2 ) Yo Quiero que ( Opcion1.1 y Opcion1.2 ) se desplieguen hacia arriba, y no hacia abajo.

Okis, eso :)

[Mikmoro]

EDITO: ya lo he visto. Me explico en el siguiente post.

Mikel.

[Mikmoro]

He visto tu consulta en el foro de javascript y veo que te refieres al primer menú, el que despliega en vertical.

Eso que pones supongo que es muy difícil, porque mantienes la opción de primer nivel en la parte supuerior después de desplegar, lo que creo que sería bastante complicado.

Supongo que será más fácil de hacer con javascript.

Mikel.

[MasterXNicoX]

jaja, ok, disculpa mi ignorancia :P

Yo te digo las que salen una encima de la otra.

[MasterXNicoX]

He visto tu consulta en el foro de javascript y veo que te refieres al primer menú, el que despliega en vertical.

Eso que pones supongo que es muy difícil, porque mantienes la opción de primer nivel en la parte supuerior después de desplegar, lo que creo que sería bastante complicado.

Supongo que será más fácil de hacer con javascript.

Mikel.

Che mikel, y dejando la opcion en la parte de abajo ???