soy Kseso y esto EsCSS

Menú deslizante letra a letra y opción tras opción

Demo de un menú en el que las opciones se despliegan una tras otra y letra tras letra. Con plegado inverso al despliegue. Pero mejor que explicartelo es que veas la demo ;-)

Menú deslizante letra a letra y opción tras opción

·Por Kseso ✎ 18

Tras publicar la demo del artículo Palíndromos y bifrontes autoexplicados con "animation" Css, basada en jugar con la propiedad Css letter-spacing, por ahí surgió la posibilidad de encontrar una aplicación más práctica o realista que el juego presentado en ese artículo.

Así que nada más práctico que los típicos menús de opciones desplegables. Los que suelen llamarse allá en la lengua del imperio algo así como sliding menú o en otras ocasiones también marquesinas (marquee).

Sliding menu letra a letra y opción tras opción

En esta ocasión me explayo un poco más con los selectores para invertir el orden en que se despliegan o pliegan las opciones y jugando con transition-delay que lo hagan una tras otra en vez de todas simultáneamente.

Disfruta

See the Pen vEBqOW by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Como ves, todo se basa en una técnica muy conocida por los lectores de este blog. A estas alturas más que mucho uso es ya todo un abuso de la pseudoclase :checked aplicada a inputs junto al combinador de hermano ( ~ ).

avatar del Editor del blog

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