Foros del Web » Creando para Internet » CSS »

Menu desplegable 100% CSS

Estas en el tema de Menu desplegable 100% CSS en el foro de CSS en Foros del Web. 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, ...

  #1 (permalink)  
Antiguo 09/06/2008, 17:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Menu desplegable 100% CSS

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.

Última edición por Mikmoro; 18/06/2008 a las 08:09 Razón: Recopilación
  #2 (permalink)  
Antiguo 09/06/2008, 23:47
Avatar de Marcos071  
Fecha de Ingreso: enero-2006
Ubicación: Presidencia Roque Sáenz Peña - Chaco
Mensajes: 384
Antigüedad: 10 años, 10 meses
Puntos: 5
Respuesta: Menu desplegable 100% CSS

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!!!
  #3 (permalink)  
Antiguo 10/06/2008, 13:12
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 14 años, 9 meses
Puntos: 770
Respuesta: Menu desplegable 100% CSS

Buen trabajo Mikmoro

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

Saludos,
  #4 (permalink)  
Antiguo 10/06/2008, 13:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #5 (permalink)  
Antiguo 11/06/2008, 02:40
Colaborador
 
Fecha de Ingreso: diciembre-2005
Mensajes: 2.898
Antigüedad: 11 años
Puntos: 281
Respuesta: Menu desplegable 100% CSS

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.
__________________
Diseño y posicionamiento de paginas web Diseñador web freelance
Sigueme en Google Plus
  #6 (permalink)  
Antiguo 11/06/2008, 02:48
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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

Saludos.

Mikel.
  #7 (permalink)  
Antiguo 11/06/2008, 07:58
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 9 años, 8 meses
Puntos: 36
Respuesta: Menu desplegable 100% CSS

¡Por fin! ¡Un menú desplegable con sólo CSS que funcione en IE6! Esto es una maravilla...
  #8 (permalink)  
Antiguo 12/06/2008, 09:16
 
Fecha de Ingreso: junio-2008
Mensajes: 1
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola, gracias!!! por el menú era lo que hace días estaba buscando porque no me salia. Saludos.
  #9 (permalink)  
Antiguo 12/06/2008, 09:57
 
Fecha de Ingreso: junio-2008
Mensajes: 93
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Gracias, muy buen aporte.
  #10 (permalink)  
Antiguo 12/06/2008, 10:10
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 14 años, 9 meses
Puntos: 995
Respuesta: Menu desplegable 100% CSS

buen aporte
aunque personalmente prefiero hacer un html menos complicado, usar script ie7 y hacer el desplegable con li:hover
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #11 (permalink)  
Antiguo 12/06/2008, 11:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #12 (permalink)  
Antiguo 12/06/2008, 11:12
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 14 años, 9 meses
Puntos: 995
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
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 )
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #13 (permalink)  
Antiguo 12/06/2008, 11:18
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS



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.
  #14 (permalink)  
Antiguo 12/06/2008, 20:39
 
Fecha de Ingreso: octubre-2004
Mensajes: 135
Antigüedad: 12 años, 1 mes
Puntos: 0
Respuesta: Menu desplegable 100% CSS

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.
  #15 (permalink)  
Antiguo 12/06/2008, 21:02
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 9 años
Puntos: 6
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje


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
  #16 (permalink)  
Antiguo 13/06/2008, 01:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #17 (permalink)  
Antiguo 13/06/2008, 05:41
 
Fecha de Ingreso: mayo-2008
Mensajes: 77
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Muhas gracias por esto , me viene de perlas.
  #18 (permalink)  
Antiguo 13/06/2008, 16:15
 
Fecha de Ingreso: marzo-2008
Ubicación: Valdivia
Mensajes: 85
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

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!
  #19 (permalink)  
Antiguo 13/06/2008, 16:30
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #20 (permalink)  
Antiguo 13/06/2008, 16:44
 
Fecha de Ingreso: marzo-2008
Ubicación: Valdivia
Mensajes: 85
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

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.
  #21 (permalink)  
Antiguo 13/06/2008, 17:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #22 (permalink)  
Antiguo 13/06/2008, 17:25
 
Fecha de Ingreso: marzo-2008
Ubicación: Valdivia
Mensajes: 85
Antigüedad: 8 años, 8 meses
Puntos: 1
Respuesta: Menu desplegable 100% CSS

Ey, muchas gracias Mikmoro por responder.
Está super bueno el aporte, voy a probar ahora las modificaciones.
Saludos.
  #23 (permalink)  
Antiguo 13/06/2008, 17:36
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #24 (permalink)  
Antiguo 15/06/2008, 11:58
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 8 años, 6 meses
Puntos: 28
Respuesta: Menu desplegable 100% CSS

che Y Como Se Hace Para Que En Vez De Desplegarse Hacia Abajo, Lo Haga Para Arriba ?????????????
  #25 (permalink)  
Antiguo 15/06/2008, 12:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

¿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.
  #26 (permalink)  
Antiguo 15/06/2008, 12:18
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 8 años, 6 meses
Puntos: 28
Respuesta: Menu desplegable 100% CSS

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 :)
  #27 (permalink)  
Antiguo 15/06/2008, 12:35
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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

Mikel.

Última edición por Mikmoro; 15/06/2008 a las 12:43
  #28 (permalink)  
Antiguo 15/06/2008, 12:42
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 10 años, 1 mes
Puntos: 279
Respuesta: Menu desplegable 100% CSS

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.
  #29 (permalink)  
Antiguo 15/06/2008, 12:42
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 8 años, 6 meses
Puntos: 28
Respuesta: Menu desplegable 100% CSS

jaja, ok, disculpa mi ignorancia :P

Yo te digo las que salen una encima de la otra.
  #30 (permalink)  
Antiguo 15/06/2008, 13:06
Avatar de MasterXNicoX  
Fecha de Ingreso: junio-2008
Ubicación: ../Arg/SanLuis.city
Mensajes: 943
Antigüedad: 8 años, 6 meses
Puntos: 28
Respuesta: Menu desplegable 100% CSS

Cita:
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 ???
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 54 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 08:31.