Desplegable con opciones en cascada
El menú se abre escalando desde arriba y las opciones van entrando una detrás de otra.
Ajustes
Código
<div class="uv-fdd"><button class="tg">Categoría <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button style="--i:0">Todas</button><button style="--i:1">Diseño</button><button style="--i:2">Código</button><button style="--i:3">Fotos</button></div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Dónde usarlo
Un desplegable para cuando solo hace falta elegir una cosa. El selector de categoría de un catálogo de cursos online, por ejemplo: Todas, Diseño, Programación, Fotografía. La entrada escalonada hace que una lista sencilla parezca cuidada, y la flecha gira para dejar claro que el menú está abierto. Te sirve si buscas un menú desplegable animado en HTML y CSS.
Mantén la lista corta, seis o siete opciones como mucho, o la cascada se hace larga. Si tienes más, mira el desplegable con buscador. Y si tu público va con prisa, sube la velocidad de la animación.