Si alguna vez has querido que un panel se deslice en la pantalla al hacer clic en un botón, tenemos justo lo que necesitas.
Mostrar y ocultar un elemento al hacer clic es una interacción muy común, y es una de las que mostramos en nuestra página de Interacciones.
¿Cómo lo hicimos? Te lo enseñamos. Solo sigue estos pasos y echa un vistazo a la versión en vivo en tu cuenta de Webflow.
Paso 1: Añade los elementos de la interacción
Para esta interacción, necesitaremos un botón para activarla y nuestro menú, que requiere un bloque div.
Paso 2: Aplica estilos a los elementos
Puedes dar estilo a tus elementos como quieras, pero recuerda crear nombres de clase claros y memorables para que sean fáciles de recordar más tarde.
Para este ejemplo, llamaremos a nuestro bloque div "Menú lateral" y le daremos los siguientes estilos:
- Posición fija: Derecha (para mantenerlo anclado al lado derecho de la pantalla)
- Altura: 100% (para que cubra toda la altura de la pantalla al expandirse)
- Ancho: 30%
- Color de fondo: Negro
Paso 3: Añade y da estilo a los elementos de nuestro menú lateral
Para este ejemplo, añadiré una imagen, un título y algo de texto de párrafo, pero puedes incluir lo que quieras, desde un menú de navegación hasta la biografía de un autor.
Paso 4: Añade una interacción a nuestro menú lateral
Para mantener el menú lateral fuera de la pantalla al cargar, debemos añadir una apariencia inicial y configurarlo para que se mueva un 100% hacia la derecha (de modo que el 100% quede fuera de la pantalla).
Paso 5: Añadir una interacción al botón
Para que el botón sea el activador de la interacción, también debemos asignarle una.
Selecciona el botón, elige el activador de clic (Click Trigger), marca la casilla "Afectar a elemento(s) diferente(s)" y escribe "Menú lateral". Ahora, cada uno de los siguientes pasos de la interacción afectará al menú lateral, no al botón.
Paso 6: Añadir un primer clic
En este caso, el primer clic hará que el menú lateral se deslice desde la derecha de la pantalla. Para este paso, simplemente devolveremos el menú a su posición original en la página, a la velocidad predeterminada de 500 ms.
Paso 7: Añadir un segundo clic
El segundo clic moverá el menú lateral fuera de la pantalla. Así que, en este paso, devolveremos el objeto a su apariencia inicial: 100% hacia la derecha.
Paso 8: ¡Listo!
¡Y eso es todo! Ahora, en la vista previa en vivo, podemos ver que al hacer clic en el botón, el menú lateral sale desde la derecha. Al hacer clic de nuevo, el menú vuelve a su sitio. ¡Perfecto!
¿Quieres ver este ejemplo por ti mismo? Ábrelo en tu cuenta de Webflow.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
¿Quieres ir más allá de las interacciones básicas de mostrar/ocultar? Este vídeo presenta Webflow Interactions, la misma herramienta que usarás para crear menús activados por clic, superposiciones y comportamientos de interfaz dinámicos sin escribir código.
