Menu circular con submenus CSS

[carlosferdo]

Buendos dias.

He visto googleando este menu circular y me interesaria mucho para mi pagina web:

Código:

http://www.cssplay.co.uk/menus/cssplay-round-and-round.html

¿Alguien podria ayudarme algo con el codigo css de ese menu o algo parecido?

Yo he conseguido hacer uno igual que este:

Código:

http://www.cssplay.co.uk/menus/circular.html

[Albuss]

Amigo Mio, hay una ligera diferencia entre tu menu y el que quieres hacer, el tuyo esta hecho con CSS , sin usar trancsiciones o Keyframes o Eventos Html, y crees que es esto lo que necesitas para el resultado que quieres, pues bien ...

No es asi, el menu deplegable circular esta hecho con javaScrip, con CSS3 lo veo imposible de hacer, ya que tienes que llamar a otro activador para que se despliegue y eso solo se hace con javascrip.


Si estas interesado te puedo ayudar, pero tienes que decirme que nociones tienes de programación en POO

[kseso?]

Sin poder acceder con este dispositivo al ejemplo, si me extraña y mucho que un menú de Stu Nicholls en esa página utilice algo más que css.
Casi diría que sólo sea puro css.

De todas formas, los ejemplos de cssplay tienen todo el código html+css ahí, accesible y listo para copiar y jugar con él.

Pero déjeme recordarle, su autor y todo lo que ha aportado al desarrollo y enseñanza desinteresada de css lo merece, las licencia bajo la que publica sus trabajos.

[carlosferdo]

Gracias por las respuestas.
Pues no consigo acceder a descargar el codigo de ese menu.. si alguien fuera capaz se lo agradeceria.

Sino me bastaria con una ayuda sobre onmouseover y onmouseout ya que con el menu que ya tengo echo, parecido a:

Código:

http://www.cssplay.co.uk/menus/circular.html

, quiero colocar el logo de mi web justamente en el medio y que al pasar el raton por encima apareciese el menu circular.

[kseso?]

Efectivamente 1:

Using CSS3 Transforms and Transitions to produce an animated circular icon menu with circular icon sub menus.

Just hover the single icon to see it animate into six icons in a circular pattern...

Iniciado por carlosferdo

Gracias por las respuestas.
Pues no consigo acceder a descargar el codigo de ese menu.. si alguien fuera capaz se lo agradeceria.

Efectivamente 2:
El css del menú está incluido en el header de la página y con el marcado html sería decir una verdad de perogrullo indicarlo.

Así que sólo tiene que seleccionar ver código fuente de la página para ¡ale hop!

[furoya]

Perdón, kseso?, ¿que bazofia estás usando para conectarte? ¡Pero mi amigo, así no se puede navegar, y es muy difícil responder en el Foro! Espero que puedas recuperar el equipamento adecuado pronto.



Hay muchos efectos para menúes circulares. Me refiero a las animaciones, porque poner botones en redondo es muy sencillo.

A mi no me gustan, pero alguna vez respondí a un asunto como éste (sí, es otro de los temas que repiten mil veces)

Rollovers

creo que tengo algo más, pero sería para otra cosa y necesita una adaptación. Hay que ver si la encuentro.

Repito lo que ya se mencionó arriba : ése ejemplo está para mostrar el poder de CSS y la inventiva de su autor. Es código experimental y lo mismo se puede hacer más fácil con JS o cualquier lenguaje especialmente creado para estas animaciones y cálculos de posicionamiento.

[emprear]

Quiero dejar un comentario sobre el menu que aparece (o debería aparecer) en
http://www.cssplay.co.uk/menus/csspl...and-round.html
si bien en las indicaciones se eñala que trabaja en ie9, esto no es así ya que en el html nos encontramos con el meta <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
que fuerza el uso del motor de IE7. para verlo en funcionamiento debemos utilizar las herramientas de desarrollo y activar Estándar de IE9 en la opción "modo de documento"

Saludos

[webosiris]

Iniciado por carlosferdo

Gracias por las respuestas.
Pues no consigo acceder a descargar el codigo de ese menu.. si alguien fuera capaz se lo agradeceria

¿ click derecho > ver código fuente ?

[kseso?]

Hola Furoya:
La respuesta primera la hice desde un dispositivo móvil (telf). Es por eso que cuando hablaba de acceder no me refería a ir a la pág. y ya, sino de poder ver códigos y jugar con ellos. Esto es, sin poder usar firebug, webdeveloper o equivalentes.

Por la misma razón sólo mostraré mi extrañeza por la observación de Emprear: y pensar si ese meta no será para la pág. y no para los ejemplos.
Pues me extraña en cssplay, no digo que sea imposible, que si el autor menciona que es funcional para una versión no lo sea.
A ver si al tener un pc a mano separo los códigos html+css del ejemplo y ya puedo hablar de lo que sucede, no de penseques y creíques.

[emprear]

Iniciado por kseso?

Hola Furoya:
y pensar si ese meta no será para la pág. y no para los ejemplos.
Pues me extraña en cssplay, no digo que sea imposible, que si el autor menciona que es funcional para una versión no lo sea.

Pregunto:
Además de la url mencionada, hay alguna otra que contenga el el ejemplo de ese menú circular en forma individual? Porque al menos yo no la encuentro.

A lo señalado respecto de la visualización en IE9, agrego que el funcionamiento tampoco es correcto (funciona parcialmente si se quiere), ya que.
Tras el hover inicial se despliega el primer circulo/nivel con los corrrespondientes íconos, al hacer hover sobre uno de estos, se despliega un segundo circulo/nivel con 6 opciones más, pero al intentar acceder a una de estas 6 nuevas opciones, desaparecen al quitar el foco del icono del primer nivel.

Saludos

[summaky]

Iniciado por emprear

Tras el hover inicial se despliega el primer circulo/nivel con los corrrespondientes íconos, al hacer hover sobre uno de estos, se despliega un segundo circulo/nivel con 6 opciones más, pero al intentar acceder a una de estas 6 nuevas opciones, desaparecen al quitar el foco del icono del primer nivel.

Saludos

Efectivamente, no funciona en ie9: el segundo nivel desaparece al intentar ir a él (como dice emprear: al perder el foro, desaparecen)

[furoya]

Iniciado por emprear

A lo señalado respecto de la visualización en IE9, agrego que el funcionamiento tampoco es correcto (funciona parcialmente si se quiere), ya que.
Tras el hover inicial se despliega el primer circulo/nivel con los corrrespondientes íconos, al hacer hover sobre uno de estos, se despliega un segundo circulo/nivel con 6 opciones más, pero al intentar acceder a una de estas 6 nuevas opciones, desaparecen al quitar el foco del icono del primer nivel.

Iniciado por summaky

Efectivamente, no funciona en ie9: el segundo nivel desaparece al intentar ir a él (como dice emprear: al perder el foco, desaparecen)

¡Le están buscando el pelo al huevo! Encima del trabajo enorme que se tomó Nicholls para demostrar el poder de CSS cuando se lo usa con creatividad (y mucho conocimiento) ¿también pretenden que no tenga ni un bug? Es un abuso digno de un perfeccionista. Con decirles que hasta yo se lo dejaría pasar.

Iniciado por kseso?

La respuesta primera la hice desde un dispositivo móvil (telf). Es por eso que cuando hablaba de acceder no me refería a ir a la pág. y ya, sino de poder ver códigos y jugar con ellos. Esto es, sin poder usar firebug, webdeveloper o equivalentes.

Ah, bueno. Ahora entiendo. Es que y a veces he respondido de cada máquina; me dió miedo que tuvieses que pasar por una situación tan desesperante.
Los móviles son un gran invento. Pero para algunas cosas no sirven, no tienen espacio.
En este momento estoy teniendo un problema grueso con mi celular. Quizá estrene el nuevo subforo consultando ... pero el tema va a terminar como pasó en otros sitios ... insultando a la compañía de teléfonos, que así nunca va a poner un baner en FdW.

[emprear]

Iniciado por furoya

¡Le están buscando el pelo al huevo! Encima del trabajo enorme que se tomó Nicholls para demostrar el poder de CSS cuando se lo usa con creatividad (y mucho conocimiento) ¿también pretenden que no tenga ni un bug? Es un abuso digno de un perfeccionista. Con decirles que hasta yo se lo dejaría pasar.

Pero si no desmerecemos a nadie !!!, se llame Nicholls, Julio Verne ó Guido Süller... y después de todo la culpa es tuya @furoya, de tanto seguir tus posts, lo del perfeccionismo se me viene contagiando... y si pone
A Circular menu with circular sub menus
For IE9, IE10, Firefox, Opera, Safari and Chrome
Quiero que funcione en IE9, IE10, Firefox, Opera, Safari and Chrome. Es más, seguro que si le mando un email comentándole del error, me nombra su heredero universal y después se suicida.

[furoya]

Iniciado por emprear

Es más, seguro que si le mando un email comentándole del error, me nombra su heredero universal y después se suicida.

Totalmente de acuerdo. Si hay algo que no somos los neurótico-obsesivos es "desagradecidos".

¡Pero no me vengas a echar la culpa de tus patologías! ¡Hazte cargo, caramba!.

[offtopic]

(Sólo espero que a nadie se le ocurra guglear 'guido süller'; todo bien con el hombre, pero es inexplicable ... si alguien nos empieza a hacer preguntas.)

[/offtopic]

[Albuss]

He estado experimentando, y el efecto de rotación y translacion es fácil de conseguir con css3 , lo único que, es que, he tenido que incluir javascript para que los eventos de ratón se aplicasen a los múltiples elementos div con los que he hecho la animación css3 del menú circular.


Estoy perfeccionando la sintaxis, a ver si entre hoy y mañana os pongo aqui todo el código.

[Covids0020]

Iniciado por Albuss

...el menu deplegable circular esta hecho con javaScrip, con CSS3 lo veo imposible de hacer, ya que tienes que llamar a otro activador para que se despliegue y eso solo se hace con javascrip...

Esto sólo como nota mental: siempre que encuentro en Google los típicos anuncios de "espectacular nosequé en CSS", siempre que busco cosas en CSS -> desactivo Javascript; y la mayoría de las veces se caen esos "espectaculares nosequé".

Otras veces te llevas la alegría de ver un currazo como el del autor del menú (más que nada por imaginación), en IE9 es más o menos normal que se caiga pero si el problema es el foco en la lista anidada puede haber soluciones. La cuestión es que, hoy por hoy y salvo si quieres dar soporte a navegadores viejos, se pueden hacer muchas muchas cosas sólo con CSS (e imaginación, claro).
Haces las virguerías para navegadores modernos y para el resto, en vez de romperte los cuernos intentando que se vea igual, haces otra versión, por ejemplo para IE9: diseño degradativo, que está muy de moda ahora.

Si, por ejemplo, se necesita Javascript para hacer unas tabs en CSS puro, el problema no es CSS... si no nuestro conocimiento.

Éste es el menú que yo quiero montar pero sólo en CSS. Es una virguería ;) --(y se puede: sólo son transiciones y transformaciones)--
http://www.digett.com/san-antonio-web-design/

S!