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. Cita: Iniciado por Mikmoro De nada, es un placer. Me alegro mucho de que haya servido. Saludos. Creo que aparte de las Gracias te debo ...

  #181 (permalink)  
Antiguo 24/03/2009, 17:47
Avatar de ilydiego  
Fecha de Ingreso: febrero-2009
Ubicación: en mi Casa
Mensajes: 71
Antigüedad: 7 años, 10 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
De nada, es un placer. Me alegro mucho de que haya servido.

Saludos.
Creo que aparte de las Gracias te debo un abrazote y un besote saludos
  #182 (permalink)  
Antiguo 20/04/2009, 18:09
 
Fecha de Ingreso: julio-2007
Ubicación: Málaga
Mensajes: 589
Antigüedad: 9 años, 4 meses
Puntos: 56
Respuesta: Menu desplegable 100% CSS

Hola, estoy probando el menú numero 1 (me ha servido mucho, gracias ). Pero el problema que tengo es que me ocupa dos lineas, ya que son muchos botones lo que tengo que utilizar. Asi que he usado "z-index" y "position:relative" en el menu desplegable para que visualice por encima de los botones de la segunda linea.

En Firefox y demás se ve bien, pero en IE el menú desplegable se queda por debajo

Llevo 3 dias dandole vueltas y el cliente me va a matar como no lo arregle rapido!

Haber si alguien me pudiera echar una mano, muchas gracias por adelantado!
  #183 (permalink)  
Antiguo 21/04/2009, 05:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

¿a qué elemento le estás aplicando el "z-index"?

No recuerdo el código de ese ejemplo, pero creo que deberías dárselo a:
"#menu ul li a:hover ul, #menu ul li:hover ul {z-index: }
que es la lista donde estárían alojadas las opciones.

Pero sólo estoy suponiendo...
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #184 (permalink)  
Antiguo 05/05/2009, 15:30
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

Hola Mikmoro se las paso el ccs que hiciste ahora una consulta es posible usar el numero 5 que hiciste pero aplicarlo a una tabla que extrae datos de una base sql server 2000 y darle opciones de eliminar actualizar y borrar los datos que aparecen en la tabla tal como sale en este ejemplo

que estes muy bien
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #185 (permalink)  
Antiguo 05/05/2009, 16:34
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

Hola, TonyChile.
Es posible, pero en cualquier caso nada tendrá que ver una cosa con otra, es decir: por una lado estaría el CSS y por otro lado estaría la funcionalidad de la que hablas, que en el ejemplo que muestras está hecha con AJAX.
Yo en tu lugar, si voy a usar AJAX para añadir y eliminar celdas, usaría también javascript para el resto de funcionalidades y efectos como que aparezca algo al pasar el ratón, etc.: si ya vas a depender de javascript, mejor no complicarse y usarlo para todo ese apartado.
  #186 (permalink)  
Antiguo 06/05/2009, 09:56
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

Gracias Mikmoro de hecho si uso el javascript para poder mostrar cierta informacion de lo que hacen algunos botones y campos para hacerlo mas entendible pare el usuario.


Cita:
Es posible, pero en cualquier caso nada tendrá que ver una cosa con otra, es decir: por una lado estaría el CSS y por otro lado estaría la funcionalidad de la que hablas, que en el ejemplo que muestras está hecha con AJAX.
Lo que me dices es que puedo usar el CSS para mostrar lo que tu creaste y en AJAX hacer las funciones para poder desarrollar lo que aparece en la pagina.

Cita:
si ya vas a depender de javascript, mejor no complicarse y usarlo para todo ese apartado.
Te refieres a que mejor deje de lado AJAX y desarrolle todo en javascript
si es asi sabes donde puedo ver un ejemplo como el que te di en la pagina pero solo de javascript sino es mucha la molestia.
Y muchas gracias Mikmoro por tu pronta respuesta
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #187 (permalink)  
Antiguo 06/05/2009, 10: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

No, al contrario, es decir: estos menús desplegables sólo con CSS pretender ser lo más accesibles y compatibles posible, prescindiendo entre otras cosas de javascript para funcionar.
Si tú vas a usar AJAX seguramente mediante algún framework para poder añadir y eliminar filas de la tabla, ya estás usando javascript, entonces, aunque hagas los menús muy accesibles prescindiendo de javascript no tendrá mucho sentido, así que quizá sería mejor que en ese caso buscaras menús desplegables hechos con javascript, que te dieran el servicio del desplegable y otras funcionalidades (como la aparición poco a poco o el desvanecimiento, etc.)

Para lo de las filas de la tabla creo que había algo parecido con un framework llamado scriptaculous. Si no, busca por frameworks que permitan ordenar y añadir filas de tabla. Creo que lo encontrarás fácil.
  #188 (permalink)  
Antiguo 06/05/2009, 11:23
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

Cita:
Mikmoro
No, al contrario, es decir: estos menús desplegables sólo con CSS pretender ser lo más accesibles y compatibles posible, prescindiendo entre otras cosas de javascript para funcionar.
Si tú vas a usar AJAX seguramente mediante algún framework para poder añadir y eliminar filas de la tabla, ya estás usando javascript, entonces, aunque hagas los menús muy accesibles prescindiendo de javascript no tendrá mucho sentido, así que quizá sería mejor que en ese caso buscaras menús desplegables hechos con javascript, que te dieran el servicio del desplegable y otras funcionalidades (como la aparición poco a poco o el desvanecimiento, etc.)

Para lo de las filas de la tabla creo que había algo parecido con un framework llamado scriptaculous. Si no, busca por frameworks que permitan ordenar y añadir filas de tabla. Creo que lo encontrarás fácil.
Muchas gracias nuevamente que estes muy bien y voy a hacer lo que me dices
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #189 (permalink)  
Antiguo 06/05/2009, 12:34
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

De nada, es un placer.

Saludos.
  #190 (permalink)  
Antiguo 07/05/2009, 18:48
(Desactivado)
 
Fecha de Ingreso: junio-2008
Mensajes: 287
Antigüedad: 8 años, 5 meses
Puntos: 9
De acuerdo Respuesta: Menu desplegable 100% CSS

pero este tipo de css los sacaste de esta pagina amigo http://araudi.net/ejemplos/menus_desplegables_CSS.html no lo hiciste tu
copiar y pegar no es bueno es bueno el aporte pero decir que tu lo hiciste eso esta mal porque robas creditos y eso no es justo amigo
hay que estudiar en vez de copiar y pegar codigo un saludo

ahi les dejo el link de algunos css

http://araudi.net/
  #191 (permalink)  
Antiguo 08/05/2009, 02:36
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 15 años, 3 meses
Puntos: 380
Respuesta: Menu desplegable 100% CSS

cher1_7, el sitio web que mencionas es de Mikmoro
__________________
Javascript Códigos - Bambú difunde
  #192 (permalink)  
Antiguo 08/05/2009, 02:37
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

  #193 (permalink)  
Antiguo 08/05/2009, 07:54
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 9 años, 6 meses
Puntos: 538
Respuesta: Menu desplegable 100% CSS

Cita:
Iniciado por cher1_7 Ver Mensaje
pero este tipo de css los sacaste de esta pagina amigo http://araudi.net/ejemplos/menus_desplegables_CSS.html no lo hiciste tu
copiar y pegar no es bueno ...

http://araudi.net/

La policía no es tonta, ve colillas y sabe que ahí han fumado. Otra cosa es el qué.

Así que Mik, ya sabes
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #194 (permalink)  
Antiguo 08/05/2009, 09:51
Avatar de Shiryu_Libra
Colaborador
 
Fecha de Ingreso: febrero-2007
Ubicación: Cantando "Screenager" en "Kirafa Kaput"
Mensajes: 3.614
Antigüedad: 9 años, 9 meses
Puntos: 87
Respuesta: Menu desplegable 100% CSS

A que Mik

por que te andas robando a ti mismo, ehh???
que barbaridad...
__________________
"Eres parte del problema, parte de la solucion o parte del paisaje"
Un Saludo desde Desierto de Altar, Sonora, MX.
Shiryu_libra
  #195 (permalink)  
Antiguo 08/05/2009, 17:18
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 14 años, 5 meses
Puntos: 361
Respuesta: Menu desplegable 100% CSS

Seguro que acabo de despertar a los vecinos con las carcajadas.

Mikel ¡¡que poca vergüenza!! Y nos tenías a (casi) todos engañados.

Saludos.

  #196 (permalink)  
Antiguo 11/05/2009, 09:41
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

Cita:
cher1_7
pero este tipo de css los sacaste de esta pagina amigo http://araudi.net/ejemplos/menus_desplegables_CSS.html no lo hiciste tu
copiar y pegar no es bueno es bueno el aporte pero decir que tu lo hiciste eso esta mal porque robas creditos y eso no es justo amigo
hay que estudiar en vez de copiar y pegar codigo un saludo
Wuaaaaaaaaaaaaaaa
Y yo haciendole preguntas a Mikmoro y ahora se que es un ladron que se roba los codigos a el mismo. O sera Mikmoro que tienes doble personalidad o eres un cleptomano que le roba a su otra personalidad

Cher1_7 deberias haber averiguado bien antes de haber hecho el post por lo menos me ayudo a reirme un rato gracias
ya que si te fijas en el link que recomiendas
dice al comienzo:
Esta web está hecha únicamente como índice para dar acceso a todos los recursos que he ido creando como respuesta a las consultas de los usuarios de forosdelweb, o por iniciativa propia.
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"

Última edición por TonyChile; 11/05/2009 a las 09:47
  #197 (permalink)  
Antiguo 11/05/2009, 09:44
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

De todas formas gracias ya que ahi con tu post ayudaras a otros mira que en la pagina salen muchos mas ejemplos
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #198 (permalink)  
Antiguo 11/05/2009, 09:48
 
Fecha de Ingreso: mayo-2009
Mensajes: 1
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Hola Buenas,

Podrías poner el CSS del ejemplo 12 que tienes en la otra página

Ejemplo 12 Primer nivel horizontal, despliega en vertical (hover), y despliega un tercer nivel a la derecha en vertical.

Yo necesito uno con 4 niveles y fijandome en el que tienes con 3 creo que podré sacar el 4.

Un gran trabajo el que has hecho, y deseando que termines esa página de RECURSOS CSS con todas las explicaciones, será la mejor página con ejemplos para aprender CSS que he visto.

Última edición por Jepin; 11/05/2009 a las 09:54
  #199 (permalink)  
Antiguo 11/05/2009, 10:23
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

Hola, jepin.
En cada ejemplo tienes siempre el código CSS accesible mirando sólo el código HTML y viendo a dónde enlaza la hoja de estilo.
En el caso que comentas (menú 12), la hoja de estilo está enlazada aquí:
http://www.araudi.net/Desplegables/css/menu-12.css

en esta línea de código:
Cita:
<link rel="stylesheet" href="css/menu-12.css" type="text/css" />
Así puedes hacerlo con cualquier ejemplo, sólo mirando el HTML.

Y sí, tienes razón, prometí escribir las explicaciones de todos los ejemplos y por otras circunstancias dejé la página parada. Pero ya que me pinchas veré si acabo con lo que estoy y me pongo manos a la obra.

P.D.: no te preocupes, cher1_7, cualquiera metemos la pata de vez en cuando: una breve y sincera disculpa arregla casi cualquier cosa.
  #200 (permalink)  
Antiguo 11/05/2009, 10:27
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

Cita:
Iniciado por TonyChile Ver Mensaje
dice al comienzo:
Esta web está hecha únicamente como índice para dar acceso a todos los recursos que he ido creando como respuesta a las consultas de los usuarios de forosdelweb, o por iniciativa propia.
Y no sólo eso, TonyChile: bastaba con ver a dónde apuntan los enlaces del primer post
  #201 (permalink)  
Antiguo 11/05/2009, 10:50
Avatar de TonyChile  
Fecha de Ingreso: marzo-2009
Ubicación: Maipú, Santiago
Mensajes: 422
Antigüedad: 7 años, 8 meses
Puntos: 7
Respuesta: Menu desplegable 100% CSS

Cita:
Mikmoro
Y no sólo eso, TonyChile: bastaba con ver a dónde apuntan los enlaces del primer post
me da la impresion que no se dio el tiempo de leer absolutamente nada lo vio aca despues debe haber estado buscando en la web encontro tu pagina y dijo ROBO noooooooooooo y lo publico sin leer nada talvez estaba en un ciber y se le acababa el tiempo por eso no leyo nada
__________________
Chilenos 100% Chilenos de Corazón
"Nuestra mayor gloria no está en no caer jamás, sino en levantarnos cada vez que caigamos"
  #202 (permalink)  
Antiguo 13/05/2009, 10:09
Usuario no validado
 
Fecha de Ingreso: marzo-2007
Mensajes: 238
Antigüedad: 9 años, 9 meses
Puntos: 5
Respuesta: Menu desplegable 100% CSS

mikel tu site araudi.net/ y estosmenu estan excelentes! ;), yo he aprendido mucho de ellos

Gracias!
  #203 (permalink)  
Antiguo 13/05/2009, 10:27
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

Gracias. Me alegro de que te hayan servido de algo

Saludos.
  #204 (permalink)  
Antiguo 17/05/2009, 06:40
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta Respuesta: Menu desplegable 100% CSS

Muchísimas gracias por el recopilatorio. El Menú 5 es perfecto.

La pregunta: Cómo se podría conseguir que al desplegar el segundo nivel éste quedará alineado con todo el menú, y no que apareciese a partir de la altura del link del primer nivel ? Es para conservar el mismo height y así poder meterlo en un DIV con un height fijo.
  #205 (permalink)  
Antiguo 17/05/2009, 08:16
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

Eso sería un problema, porque si por ejemplo tienes el item 4 que sólo tienes dos subelementos, si quedaran arriba del todo no podrías llegar a ellos con el ratón, porque desaparecería al salir de la casilla del item 4, además de que estéticamente quedaría muy feo, creo yo.
  #206 (permalink)  
Antiguo 18/05/2009, 16:06
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta Respuesta: Menu desplegable 100% CSS

Que no podrías llegar ? Yo con que queden a la altura de la primera casilla me quedo conforme. Además, imagina que hay un nivel más aún, y que el item 4, tiene un 4.2 y que éste tiene un 4.2.5, eso sería ya ... 5 casillas por debajo !

Item 1.....|....Item 4.1.....|....Item 4.2.1
Item 2.....|....Item 4.2 +..|....Item 4.2.2
Item 3.....|.......................|....Item 4.2.3
Item 4 +..|.......................|....Item 4.2.4
Item 5.....|.......................|....Item 4.2.5

Si suponemos que el máximo son 5 subitems para cualquier item superior, se puede usar un menú así con un fondo horizontal de width fijo.

La pregunta es: en caso de ser posible, cómo se hace ?
Ahora el problema que tengo es que de momento he añadido un segundo subnivel (como el ejemplo) y cuando estoy encima del Item 4 + aparecen los 4.X y los 4.X.Y al mismo tiempo y a la misma altura, pero si me pongo encima del 4.X se desplazan a la altura del 4.X. No doy con el CSS y con la definició de un hipotético nivel2 para que éste no aparezca al mismo tiempo que el superior, así que me queda algo como ésto:

*[mouse]

Item 1.....|......................|
Item 2.....|......................|
Item 3.....|......................|
[Item 4+]|....Item 4.1.....|....Item 4.2.1
Item 5.....|....Item 4.2 +.|.....Item 4.2.2
............................................Item 4.2.3
............................................Item 4.2.4
............................................Item 4.2.5

Y entonces muevo el mouse y ... tachán !

Item 1.....|......................|
Item 2.....|......................|
Item 3.....|......................|
Item 4+...|....Item 4.1....|
Item 5.....|...[Item 4.2 +]|...Item 4.2.1
...........................................Item 4.2.2
...........................................Item 4.2.3
...........................................Item 4.2.4
...........................................Item 4.2.5

O sea, que todo el rato se ve "todo", cuando debería ser algo secuencial, no ?

Última edición por laylu; 18/05/2009 a las 16:34
  #207 (permalink)  
Antiguo 18/05/2009, 16:37
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

Creo que no me has entendido bien. no, no podrías llegar. ¿Por qué? imagina que pones el ratón sobre el itme 4, y este contiene 2 elementos: pues bien, si esos dos elementos quedan arriba del todo del menú, es decir, en las dos primeras casillas arriba en vertical, cuando quieras alcanzar una de ellas con el ratón, éste saldrá de la casilla del item 4, y por tantos sus dos elementos desaparecerán. ¿Me explico ahora?

Para lo de los niveles de submenús, echa un vistazo al menú número 10, que tiene tres niveles (despliega el 2 y 2.1), y no aparecen todos a la vez, sino secuencial, como tú quieres.
  #208 (permalink)  
Antiguo 18/05/2009, 16:42
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Menu desplegable 100% CSS

Ahm ... claro. Lo ideal sería que se activaran con clic (que lo tienes hecho en un menú según pude ver por aquí ayer) y que estuviesen a la altura del primero, sino me pasará lo que te comento, que se saldrían del fondo.

Con lo del clic voy a probar, pero se pueden poner que aparezcan a la altura del primero ? Así sería el menú perfecto !
  #209 (permalink)  
Antiguo 21/05/2009, 08:13
 
Fecha de Ingreso: mayo-2009
Mensajes: 62
Antigüedad: 7 años, 6 meses
Puntos: 0
Pregunta Respuesta: Menu desplegable 100% CSS

He hecho un croquis de lo que necesito para preservar el width y el height del fondo en el que aparecerá el menú desplegable.

farm4.static.flickr.com/3588/3550741145_b586f4da5b_o. png

EL menú debe aparecer siempre, con un click, en la parte más alta, a la altura de la primera casilla.

¿ Es posible sólo con CSS ?
  #210 (permalink)  
Antiguo 21/05/2009, 11:12
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

Tienes un error en el enlace. Es este:
http://farm4.static.flickr.com/3588/...86f4da5b_o.png
Seguramente se puede, pero yo no te lo recomiendo en absoluto: me parece poquísimo usable, raro y difícil de entender.
Pide a otras personas que miren tu croquis y pregunta si comprenden qué opciones son qué, a quién pertenecen, etcétera.
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:32.