Menu desplegable 100% CSS

[ilydiego]

Iniciado por Mikmoro

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

[CorpseOfSteel]

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!

[kseso?]

¿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...

[TonyChile]

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

[Mikmoro]

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.

[TonyChile]

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.

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.

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

[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.

[TonyChile]

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

[Mikmoro]

De nada, es un placer.

Saludos.

[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

ahi les dejo el link de algunos css

http://araudi.net/

[tunait]

cher1_7, el sitio web que mencionas es de Mikmoro

[Mikmoro]

[kseso?]

Iniciado por 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 ...

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

[Shiryu_Libra]

A que Mik

por que te andas robando a ti mismo, ehh???
que barbaridad...

[jomaruro]

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.

[TonyChile]

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

http://araudi.net/

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.

[TonyChile]

De todas formas gracias ya que ahi con tu post ayudaras a otros mira que en la pagina salen muchos mas ejemplos

[Jepin]

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.

[Mikmoro]

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:

<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.

[Mikmoro]

Iniciado por TonyChile

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

[TonyChile]

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

[worldPeace_Plis]

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

Gracias!

[Mikmoro]

Gracias. Me alegro de que te hayan servido de algo

Saludos.

[laylu]

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.

[Mikmoro]

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.

[laylu]

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 ?

[Mikmoro]

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.

[laylu]

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 !

[laylu]

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 ?

[Mikmoro]

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.