Navicon: del trigram ☰ al aspa X: animando el cambio con transiciones Css 3.10.13
Navicon: del trigram ☰ al aspa X. Animando el cambio con transiciones Css y menú de navegación asociado
Navicon: del trigram ☰ al aspa X: animando el cambio con transiciones Css
A estas alturas el reconocimiento y uso del navicon es lo suficientemente amplio como para considerarlo estándar por la vía de los hechos consumados.
También están suficientemente documentadas los múltiples métodos de lograrlo. Va para un año que recogía alguno de ellos en el artículo ☰ Navicon "3 líneas" semántico y RWD para el menú de navegación
Quizás lo que no esté tan explorado sea cómo hacer el cambio gradual (transición animada) cuando se utilizan dos símbolos diferentes para los estados activo e inactivo
Así que este artículo es un juego Css de aproximación a ello: animar el paso del trigram ☰ inicial al aspa X. Tal como puedes ver en el gif de la derecha y más tarde en la demo.
Construyendo el navicon
Lo primero a realizar es elegir cómo construimos las tres líneas del navicon teniendo presente su paso a un aspa. Tras varios intentos me decidí para este juego Css por hacerlo con un sólo elemento (cuestión práctica y semántica) y dejar en manos de Css lograr la apariencia:
<a href='#diana' class='toggle'></a>
El hecho de que sea un enlace ('a') con su 'href' es para poder utilizar la técnica del ':target' sin salto que ya hemos visto y usado más veces en el blog. Aquí y aquí, por ejemplo.
Las tres líneas del navicon con Css
Lograr la apariencia del navicon es súmamente sencillo. Tamaño y background al elemento y sus dos pseudos '::before' y '::after' posicionados convenientemente. Tal que así:
.toggle {
background: rgba(0,0,0,.4);
display: block;
position: absolute;
top: 1.3rem;
left: .5rem;
height: .5rem;
width: 3rem;
border-radius: 3px;
z-index: 2;
}
.toggle::before, .toggle::after {
content: '';
background: inherit;
position: absolute;
left: 0;
top: -.7rem;
width: 100%;
height: 100%;
border-radius: 3px;
transform: rotate(0deg);
}
.toggle::after {
top: .7rem;
}
Con lo anterior ya tenemos la apariencia deseada del navicon cuando está inactivo. Esto es, con el menú oculto. Tres líneas horizontales del mismo color y separación al gusto. Lo siguiente es lograr la apariencia de aspa o X al hacer click sobre el navicon para mostrar el menú.
#diana:target ~ .toggle {
background: rgba(0,0,0,0);
z-index: 1;
}
#diana:target ~ .toggle::before {
top: 0;
background: #3A4451;
transform: rotatez(45deg);
transform-origin: center center 0;
}
#diana:target ~ .toggle::after {
top: 0;
background: #3A4451;
transform: rotatez(-45deg);
transform-origin: center center 0;
}
Lo que hacemos es ocultar al elemento '.toggle' haciendo su background transparente. A sus pseudoelementos les declaramos un fondo al gusto, anulamos el desplazamiento que tenían ('top: 0') y los giramos 45º a izquierda y derecha tomando como punto de giro su centro.
Con lo anterior ya el cambio es brusco. Ahora soy un trigram y sin estados intermedios se forma el aspa. Por lo tanto es hora de suavizar la transición de un estado a otro. Para ello, nada mejor que el grupo de propiedades de 'transition' declaradas como sigue.
Para el estado inicial o del menú oculto (apariencia de 3 líneas horizontales):
.toggle {
transition: .3s linear;
}
.toggle::before, .toggle::after {
transition: transform .3s linear, top .3s .2s;
}
De esto sólo cabe reseñar que a los pseudoelementos aplicamos dos transiciones diferentes. Una para el giro y otra con cierto delay al desplazamiento en la vertical ('top'). El resultado es que primero se mueven en la vertical para colocarse uno sobre el otro y a continuación giran para formar el aspa.
Pero esta transición queda bien para ir de las tres líneas a la X, pero resulta extraño para el contrario: de la X a las 3 líneas. Para evitarlo creamos una transición diferente:
#diana:target ~ .toggle::before,
#diana:target ~ .toggle::after{
transition: transform .3s linear .2s, top .3s;
}
Como ves, lo que hacemos ahora es aplicar el retraso (delay) a la transformación o giro. Así que para pasar de la X a las 3 líneas primero se colocan en horizontal y despues se desplazan arriba y abajo.
Para apreciarlo con más detalle sólo tienes que aumentar los tiempos en la propiedad 'transition'.
Puedes verlo en pleno funcionamiento en esta demo en codepen.
See the Pen Animated favicon: from ☰ to X by Kseso (@Kseso) on CodePen
Aspectos complementarios
Y como lo más difícil y motivo del artículo ya está realizado, decidí complementar un poco más la demo. Así que ahí tienes un menú que despliega para dejar ver sólo los iconos textuales al ':hover' sobre el navicon y que muestra el texto de las opciones de forma no permanente al colocar el cursor sobre ellos.
Si haces click sobre el navicon el despliegue es permanente al usar como parte del selector ':target'.
Para lograr que parezca que el navicon tenga efecto toggle (mostrar u ocultar el menú de forma alterna) o oo que es lo mismo, que aparentemente parece que tenga dos href distintos es el segundo span que acompaña al '.toggle': el span con clase '.
<a href='#' class='revertir'>revertir</a>
<a href='#diana' class='toggle'></a>
Posicionado en el mismo lugar que el navicon pero sin ser visible, intercambian sus valores de 'z-index' según sea necesario. Pasa a estar uno debajo del otro para poder recibir o no el chick del ratón.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
¡Qué simpático!. Muy bien el detalle de las animaciones distintas para cada dirección.
ResponderEliminarPor supuesto, como ya se había comentado antes (aquí), en Opera no anda. Aún no acepta 'transform' para pseudoelementos. Estaba pensando inventar algún truco, pero para este efecto va a ser imposible. Hay que hacer otra animación, que sea solamente para '.toggle' y no para sus '::before' y '::after'.
Acá se nota la diferencia entre pensar como diseñador o como programador. Te había contado que estuve haciendo íconos de un elemento, y algunos animados, pero esas animaciones nunca las había pensado en forma estética. Para mí eran una forma de hacer que se entendiese el significado del símbolo : como una "batería cargando" que rellena el dibujo de la pila repetidas veces, o un "acceso a internet" que gira un mapamundi para mostrar que se está conectado.