Crear un acordeón personalizado - Ayuda de Webflow

Cómo añadir un elemento de menú desplegable

El elemento menú desplegable tiene acciones predeterminadas integradas que lo hacen útil como un acordeón personalizado: abre la lista desplegable al hacer clic y la cierra cuando se hace clic en otro elemento o parte de la página.

Puedes añadir un elemento de menú desplegable a tu sitio yendo a Panel de Añadir (A) > Elementos > Avanzado y arrastrando el elemento menú desplegable al lienzo.

Cómo cambiar los estilos predeterminados del menú desplegable

Para usar el menú desplegable en tu acordeón personalizado, necesitarás cambiar los estilos predeterminados del elemento desplegable. En particular, necesitarás ajustar el ancho para que el menú desplegable llene completamente el espacio de su elemento padre (es decir, cualquier elemento que contenga el acordeón personalizado).

Para cambiar los estilos predeterminados del menú desplegable:

1. Selecciona el elemento padre menú desplegable en el lienzo del Diseñador (dado una clase de “Elemento de acordeón” para este ejemplo)
2. Ve a Panel de Estilo > Tamaño
3. Establece Ancho en 100%

Cómo personalizar tu interruptor de menú desplegable

Ahora, necesitarás personalizar tu interruptor de menú desplegable para que llene completamente su elemento padre y oculte el contenido dentro de la lista desplegable cuando el acordeón esté cerrado. Ajusta las propiedades de display y altura del interruptor de menú desplegable:

1. Selecciona el interruptor de menú desplegable en el lienzo y dale una clase (por ejemplo, “Interruptor de acordeón”)
2. Ve a Panel de Estilo > Diseño
3. Establece Display en flexbox para llenar el espacio horizontal
4. Establece Alinear en centro para centrar verticalmente el texto
5. Ve a Panel de Estilo > Tamaño
6. Establece un valor de Altura (por ejemplo, 80px)

Cómo estilizar tu acordeón

Si previsualizas tu sitio y haces clic en tu acordeón, puedes notar que el acordeón se abre, pero el contenido predeterminado se superpone al contenido alrededor. Esto ocurre porque el estilo de posición predeterminado para la lista desplegable es absoluto. Querrás cambiarlo para que el contenido se expanda y desplace los elementos circundantes.

Para estilizar tu acordeón:

1. Selecciona el elemento desplegable padre (por ejemplo, “Elemento de acordeón”)
2. Haz clic en el icono de “engranaje” para abrir Configuración de desplegable y mostrar el Menú
3. Selecciona el elemento Lista desplegable
4. Ve al Panel de estilo > Posición
5. Establece Posición en estático
6. Selecciona el elemento desplegable padre (“Elemento de acordeón”)
7. Ve al Panel de estilo > Tamaño
8. Establece Desbordamiento en oculto

Cómo crear tu animación personalizada

Crea una animación personalizada que abra y cierre tu acordeón personalizado:

• Crear acciones iniciales
• Animar la apertura del acordeón
• Animar el cierre del acordeón

Crear acciones iniciales

Comenzarás creando dos acciones iniciales para tu acordeón.

Para tu desplegable:

1. Selecciona el elemento desplegable (“Elemento de acordeón”)
2. Ve al Panel de interacciones > Disparador de elemento y crea un nuevo disparador de elemento
3. Elige Desplegable se abre
4. Selecciona una acción bajo Menú se abre
5. Elige Iniciar una animación bajo Animación personalizada
6. Crea una animación cronometrada y nómbrala (por ejemplo, “Acordeón se abre”)
7. Añade una acción a tu animación: Tamaño bajo Varios
8. Establecer como estado inicial
9. Introduce un valor de altura (por ejemplo, 80px)
10. Guardar

Para tu icono de alternar:

1. Selecciona el Icono dentro del elemento desplegable
2. Asigna una clase a tu icono (por ejemplo, “Icono de acordeón”)
3. Selecciona el elemento desplegable padre
4. Abre el Panel de interacciones
5. Selecciona la interacción Desplegable se abre
6. Edita la animación cronometrada (“Acordeón se abre”)
7. Selecciona el icono (“Icono de acordeón”)
8. Añadir acción: Rotar bajo Transformar
9. Establecer como estado inicial
10. Establecer eje z a 0 grados
11. Guardar

Animar la apertura del acordeón

Para abrir el acordeón y rotar el icono:

1. Selecciona el elemento desplegable padre
2. Abre el panel de Interacciones
3. Elige la interacción Dropdown opens
4. Edita la animación cronometrada (“Acordeón se abre”)
5. Añade acción: Tamaño bajo Varios
6. Desmarca el estado inicial
7. Introduce “auto” para la altura
8. Selecciona el icono (“Icono del acordeón”)
9. Añade acción (en el mismo momento): Rotar bajo Transformar
10. Establece el eje z a 180 grados
11. Guarda

Animar el cierre del acordeón

Para animar el cierre:

1. Selecciona el elemento desplegable padre (“Elemento del acordeón”)
2. Abre el panel de Interacciones
3. Elige la interacción Dropdown opens
4. Selecciona la acción bajo Menu closes
5. Elige Iniciar animación
6. Crea una animación cronometrada y nómbrala (por ejemplo, “Acordeón se cierra”)
7. Añade acción: Tamaño bajo Varios
8. Introduce el valor de altura (por ejemplo, 80px)
9. Selecciona el icono
10. Añade acción (mismo momento): Rotar bajo Transformar
11. Establece el eje z a 0 grados
12. Guarda

Volver a la ayuda de webflow