Varios ejemplos de menús
Categorías : CSS, HTML, JQuery, Programación.
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.