NovaMonoFix
Errores PHP
X
Usuario
Password
0 FPS

Varios ejemplos de menús

19 de Febrero del 2014 por Josep Antoni Bover4380 visitas, 5 comentarios, 21 votos con una media de 4.62 sobre 5.
Categorías : CSS, HTML, JQuery, Programación.
La web está en segundo plano, animación en pausa.
Cargando animación...
Varios ejemplos de menús

He estado haciendo pruebas con menús y sobretodo con CSS para practicar con las transiciones, y me estoy dando cuenta de que en CSS resulta muy difícil por no decir imposible en algunas situaciones hacer código re-aprovechable para las animaciones/transiciones en el sentido de que si añades/modificas/eliminas un menú tendrás que volver a editar el CSS. En cambio en JavaScript si te lo montas bien puedes hacer las cosas más dinámicas de forma que si modificas el menú no tengas que tocar ni JavaScript ni CSS.

La intención en principio era trastear un rato con transiciones complejas, ya que exceptuando el primer ejemplo los demás al desplegarse utilizan una transición, y al resaltar sus items utilizan otra transición dentro de la primera.

También he querido poner énfasis en hacer los menús lo más cómodos posible, dejando retrasos (delay) al plegarse para que el usuario tenga tiempo de moverse por el menú.



Menú Subrayado (JQuery)

Este es un menú simple sin sub-menús que tiene una animación en el subrayado implementada en JQuery. Esta animación debe calcular el ancho y la posición del item donde está el mouse para calcular el ancho y la posición inicial de la barra de subrayado.

Se podría hacer también con CSS, pero no veo ninguna forma de hacerlo dinámico es decir que calcule automáticamente los items del menú para desplazar la barra del subrayado, así que la única solución viable que veo seria medir cada parte del menú, e implementar una transición especificando la posición para cada parte del menú.

Para este caso en concreto yo he apostado por la comodidad de poder añadir/modificar/eliminar items sin tener que tocar código javascript ni css.



Menú Des-alineado (CSS3)

Este es un menú padre que contiene varios submenus, al desplegarse hace una rotación de los items y los deja torcidos. Al pasar por encima de un item, este se escala a una proporción de 1.2.

Los menuitems se han hecho con la propiedad position en absolute.

Para la animación del despliegue se ha utilizado la propiedad transition con las propiedades top, y transform (rotateZ y scale).

Al hacerlo con CSS sin nada de javascript no tengo forma de hacer los items torcidos aleatoriamente (con php se podría pero no es una práctica aconsejable), y además tengo que calcular sus posiciones a mano.

Otra cosa que no me ha gustado y que creo que mejoraría con JavaScript es el efecto de la escala, ya que por alguna razón repinta todos los items y se hacen como borrosos. Curiosamente en internet explorer 10 es donde se ve mas fino.

Por ultimo también hay que remarcar que tiene una transición en el marco principal con el degradado, y que al pasar el mouse por encima se hace mas luminoso. Aunque algunos navegadores antiguos no soporten transiciones con degradados de fondo, se puede hacer un degradado con uno de los colores translucido, y luego modificarlo haciendo un transition a la propiedad background-color.



Menú Pregunta (CSS3)

Este menú sigue en la dinámica del anterior con la diferencia de que muestra sus items en una sola fila.

A diferencia del menú anterior este se centra en el documento, y sus items tienen el position a relative, para poder centrar el contenido sin complicaciones.

La parte de la animación del despliegue se ha hecho con la propiedad transition aplicado a las propiedades top, left, y transform (rotateZ).



Menú Esfera (CSS3)

Este menú es sin duda el que mejor me ha quedado, y además es el único desde mi punto de vista que realmente merece la pena crear en puro CSS3 y posicionar sus items a mano.

Cada esfera pequeña tiene su propia transición para empezar con 100 milisegundos de retraso la animación.

Al perder el foco también requiere una transición para cada esfera, ya que queremos dejar un retardo (Delay) de como mínimo medio segundo (100 milisegundos más para cada esfera pequeña) para que el usuario tenga tiempo de mover el mouse por las esferas sin que se vuelvan a su posición oculta/inicial.



En definitiva mi conclusión es que si hay que hacer un menú que sabemos que va a tener siempre el mismo número de opciones suele ser más acertado utilizar el máximo de CSS posible, pero si necesitamos un menú dinámico que va a estar cambiando cada dos por tres, lo mejor es basarse JavaScript y desde él si es posible invocar a alguna animación o transición, y si no es posible por temas de diseño la función animate del jquery hace maravillas.


[#6] JOSE 25 Octubre del 2016 a las 19:57, votos 1 de 1.
saludos...buen aporte
[#5] devildrey33 16 Julio del 2016 a las 7:46, votos 0 de 0.
4 Hola Cyrux, muchas gracias por comentar. Respecto a tu pregunta sobre la plantilla de la web, he de decir que no es nada convencional, es decir ni wordpress ni joomla ni nada por el estilo.

Se podría catalogar como un CMS casero muy detallado que cubre mis necesidades básicas para un blog sobre programación, y que además utiliza algunas librerías JavaScript conocidas como son JQuery (par el DOM básico), y codemirror (para mostrar código HTML5 dinámico / laboratorio de pruebas), 

De hecho últimamente trabajo mas en el CMS que en publicar nuevas entradas para el blog. Por ejemplo ahora mismo estoy re-emplazando las cabeceras con imágenes png animadas por animaciones utilizando Canvas 2D e incluso con Web-Gl mediante la librería Three.js. test canvas

Sobre los menús asi de pronto te puedo decir que el 99% de las imagenes son svg`s (por eso las puedo redimensionar en el hover sin perder calidad) y el 1% restante es el `burguer` que abre el menú principal, y las `X` para cerrar los menús, que están hechos en css.

Me imagino que no era lo que esperabas leer, de todas formas para cualquier consulta aquí me tienes. Un saludo!
[#4] Cyrux 16 Julio del 2016 a las 2:00, votos 1 de 1.
Hola, cordial saludo. Me gusta mucho la apariencia de este sitio y los contenidos están geniales, han sido de mucha ayuda. Quisiera preguntar algo y espero no estar fuera de orden ¿que plantilla están usando para su sitio? Es simple curiosidad, me gusta la forma de los menúes, es bastante original.
De antemano, gracias por su tiempo...
Saludos.
[#3] devildrey33 07 Septiembre del 2015 a las 20:46, votos 0 de 0.
2 Hey Jeremy, cuanto tiempo!. A ver si quedamos un día de estos para hacer unas birras :P
[#2] Jeremy Hurtado 07 Septiembre del 2015 a las 20:33, votos 1 de 1.
Están muy conseguidos esos Menús, el último ha sido mi preferido :-)
Aunque las opciones de como matar un demonio no tienen precio :-)
Buen trabajo!!