Modificar un menú

Emilio14 · 2 Ene 2014

Hola,

Estoy intentando hacer un menú desplegable vertical que pueda tener dentro imágenes con enlaces. Es decir, como contenedores que tengan elementos.
He encontrado uno muy bueno aquí pero el problema está en que hay que hacer clic en el título para que se despliegue.
¿Alguien podría decirme qué cosa hay que cambiar para que se despliegue solo con que el ratón se ponga sobre el título?

Gracias de antemano y feliz año

Totemizado · 2 Ene 2014

@lobogris te echará una mano sin duda jajaj yo sólo puedo decirte que creo que tienes que tocar css.

lobogris · 2 Ene 2014

Totemizado dijo:
@lobogris te echará una mano sin duda jajaj yo sólo puedo decirte que creo que tienes que tocar css.

Gracias por el cumplido :qmeparto: :mola:
@Emilio14 no necesitas Javascript para eso, con sólo CSS se puede hacer, con el selector :hover concretamente, he hecho un ejemplo rápido para que veas como va, si tienes alguna duda me dices -> Edit fiddle - JSFiddle

Lógicamente es un ejemplo y falta mucho por completar

Emilio14 · 2 Ene 2014

lobogris dijo:
Gracias por el cumplido :qmeparto: :mola:
@Emilio14 no necesitas Javascript para eso, con sólo CSS se puede hacer, con el selector :hover concretamente, he hecho un ejemplo rápido para que veas como va, si tienes alguna duda me dices -> Edit fiddle - JSFiddle

Lógicamente es un ejemplo y falta mucho por completar

Muchísimas gracias por el ejemplo, me ha servido muchísimo.
Lo que pasa que el menú está alineado horizontalmente y no sé cómo ponerlo vertical (los submenús sí están bien verticalmente).
Y una cosilla... ¿Hay alguna forma de hacer que los submenús se desplieguen poco a poco y no salgan tan de repente? Como ocurre con el ejemplo de la web que he colocado en el primer post. Si es muy lioso no te molestes en hacer ejemplo de eso, que no quiero volverte loco con mis preguntas.

De nuevo, muchas gracias.

andriyleu · 2 Ene 2014

Emilio14 dijo:
Muchísimas gracias por el ejemplo, me ha servido muchísimo.
Lo que pasa que el menú está alineado horizontalmente y no sé cómo ponerlo vertical (los submenús sí están bien verticalmente).
Y una cosilla... ¿Hay alguna forma de hacer que los submenús se desplieguen poco a poco y no salgan tan de repente? Como ocurre con el ejemplo de la web que he colocado en el primer post. Si es muy lioso no te molestes en hacer ejemplo de eso, que no quiero volverte loco con mis preguntas.

De nuevo, muchas gracias.

Para eso sí que haria falta Javascript (Jquery).

lobogris · 2 Ene 2014

Emilio14 dijo:
Muchísimas gracias por el ejemplo, me ha servido muchísimo.
Lo que pasa que el menú está alineado horizontalmente y no sé cómo ponerlo vertical (los submenús sí están bien verticalmente).
Y una cosilla... ¿Hay alguna forma de hacer que los submenús se desplieguen poco a poco y no salgan tan de repente? Como ocurre con el ejemplo de la web que he colocado en el primer post. Si es muy lioso no te molestes en hacer ejemplo de eso, que no quiero volverte loco con mis preguntas.

De nuevo, muchas gracias.

Mira a ver si te vale algo así, si que se puede hacer pero las transiciones no funcionan con la propiedad display ni con medidas relativas, por lo que por ejemplo un alto del 100% o auto no funciona lo cual tienes que estableces un alto fijo:

http://jsfiddle.net/GV5Ga/13/

- - - Actualización- - -

andriyleu dijo:
Para eso sí que haria falta Javascript (Jquery).

No es necesario, hasta puedes 'reconocer' clicks en CSS con el selector :target

andriyleu · 2 Ene 2014

lobogris dijo:
Mira a ver si te vale algo así, si que se puede hacer pero las transiciones no funcionan con la propiedad display ni con medidas relativas, por lo que por ejemplo un alto del 100% o auto no funciona lo cual tienes que estableces un alto fijo:

Edit fiddle - JSFiddle

- - - Actualización- - -

No es necesario, hasta puedes 'reconocer' clicks en CSS con el selector :target

Ostia, mirando tu código me he dado cuenta de una cosa: no sabía la existencia de transition: all 0.3s linear;

Edit: Apareció con CSS3 verdad?

Emilio14 · 2 Ene 2014

lobogris dijo:
Mira a ver si te vale algo así, si que se puede hacer pero las transiciones no funcionan con la propiedad display ni con medidas relativas, por lo que por ejemplo un alto del 100% o auto no funciona lo cual tienes que estableces un alto fijo:

Edit fiddle - JSFiddle

Me sirve, es un ejemplo perfecto de lo que quería. Ahora solo tengo que implementar las imágenes y los enlaces (que eso ya lo sé hacer xD) y listo.
Muchísimas gracias, te debo una

lobogris · 2 Ene 2014

andriyleu dijo:
Ostia, mirando tu código me he dado cuenta de una cosa: no sabía la existencia de transition: all 0.3s linear;

Edit: Apareció con CSS3 verdad?

Sí, transiciones, rotaciones, animaciones, keyframes... con CSS3 han aparecido bastantes utilidades

Emilio14 dijo:
Me sirve, es un ejemplo perfecto de lo que quería. Ahora solo tengo que implementar las imágenes y los enlaces (que eso ya lo sé hacer xD) y listo.
Muchísimas gracias, te debo una

Me alegro

Emilio14 · 2 Ene 2014

lobogris dijo:
Me alegro

:culpability: ¿Hay alguna forma de poner las transiciones a las imágenes? Les he aplicado una clase a las imágenes y las he metido dentro del CSS donde está la animación, pero no funciona ^^"...
Edit fiddle - JSFiddle ¿Dónde lo pongo entonces?

Perdona las molestias, esta sí que es mi última duda...

lobogris · 2 Ene 2014

Emilio14 dijo:
:culpability: ¿Hay alguna forma de poner las transiciones a las imágenes? Les he aplicado una clase a las imágenes y las he metido dentro del CSS donde está la animación, pero no funciona ^^"...
Edit fiddle - JSFiddle ¿Dónde lo pongo entonces?

Perdona las molestias, esta sí que es mi última duda...

Ahí tienes -> Edit fiddle - JSFiddle Al tener que darle un alto fijo tienes que asignarle un alto distinto, sino 200px se haría demasiado

Emilio14 · 2 Ene 2014

lobogris dijo:
Ahí tienes -> Edit fiddle - JSFiddle Al tener que darle un alto fijo tienes que asignarle un alto distinto, sino 200px se haría demasiado

Ahora ya está de 10. Eres un crack, muchas gracias.

Modificar un menú

Comparte esta página