Crie um acordeão personalizado - Ajuda do Webflow

Como adicionar um elemento dropdown

O elemento dropdown possui ações padrão integradas que o tornam útil como um acordeão personalizado — ele abre a lista dropdown quando clicado e a fecha quando outro elemento ou parte da página é clicada.

Você pode adicionar um elemento dropdown ao seu site indo para Painel de Adição (A) > Elementos > Avançado e arrastando o elemento dropdown para a tela.

Como alterar os estilos padrão do dropdown

Para usar o dropdown no seu acordeão personalizado, você precisará alterar os estilos padrão do elemento dropdown. Em particular, você precisará ajustar a largura para que o dropdown preencha completamente o espaço de seu elemento pai (ou seja, qualquer elemento que contenha o acordeão personalizado).

Para alterar os estilos padrão do dropdown:

1. Selecione o elemento pai dropdown na tela do Designer (dado uma classe de “Item do Acordeão” para este exemplo)
2. Vá para Painel de Estilo > Tamanho
3. Defina a Largura para 100%

Como personalizar seu toggle do dropdown

Agora, você precisará personalizar seu toggle do dropdown para que ele preencha completamente seu elemento pai e esconda o conteúdo dentro da lista dropdown quando o acordeão estiver fechado. Ajuste as propriedades de exibição e altura do toggle do dropdown:

1. Selecione o toggle do dropdown na tela e dê a ele uma classe (por exemplo, “Toggle do Acordeão”)
2. Vá para Painel de Estilo > Layout
3. Defina Exibição para flexbox para preencher o espaço horizontal
4. Defina Alinhar para centro para centralizar verticalmente o texto
5. Vá para Painel de Estilo > Tamanho
6. Defina um valor de Altura (por exemplo, 80px)

Como estilizar seu acordeão

Se você visualizar seu site e clicar no acordeão, pode notar que ele abre, mas o conteúdo padrão sobrepõe o conteúdo ao redor. Isso ocorre porque o estilo de posição padrão para a lista suspensa é absoluto. Você vai querer mudar isso para que o conteúdo se expanda e desloque os elementos ao redor.

Para estilizar seu acordeão:

1. Selecione o elemento pai dropdown (por exemplo, “Item do acordeão”)
2. Clique no ícone de “engrenagem” para abrir as Configurações do Dropdown e mostrar o Menu
3. Selecione o elemento Lista do Dropdown
4. Vá para o Painel de Estilo > Posição
5. Defina a Posição como estática
6. Selecione o elemento pai do dropdown (“Item do acordeão”)
7. Vá para o Painel de Estilo > Tamanho
8. Defina Overflow como oculto

Como criar sua animação personalizada

Crie uma animação personalizada que abre e fecha seu acordeão personalizado:

• Crie ações iniciais
• Anime a abertura do acordeão
• Anime o fechamento do acordeão

Crie ações iniciais

Você começará criando duas ações iniciais para seu acordeão.

Para seu dropdown:

1. Selecione o elemento dropdown (“Item do acordeão”)
2. Vá para o Painel de Interações > Gatilho de elemento e crie um novo gatilho de elemento
3. Escolha Dropdown abre
4. Selecione uma ação em Menu abre
5. Escolha Iniciar uma animação em Animação personalizada
6. Crie uma animação cronometrada e nomeie-a (por exemplo, “Acordeão abre”)
7. Adicione uma ação à sua animação: Tamanho em Diversos
8. Defina como estado inicial
9. Insira um valor de altura (por exemplo, 80px)
10. Salve

Para seu ícone de alternância:

1. Selecione o Ícone dentro do elemento dropdown
2. Dê uma classe ao seu ícone (por exemplo, “Ícone do acordeão”)
3. Selecione o elemento pai dropdown
4. Abra o Painel de Interações
5. Selecione a interação Dropdown abre
6. Edite a animação cronometrada (“Acordeão abre”)
7. Selecione o ícone (“Ícone do acordeão”)
8. Adicione a ação: Rotacionar em Transformar
9. Defina como estado inicial
10. Defina o eixo z para 0 graus
11. Salve

Animar a abertura do acordeão

Para abrir o acordeão e girar o ícone:

1. Selecione o elemento dropdown pai
2. Abra o painel de Interações
3. Escolha a interação Dropdown abre
4. Edite a animação cronometrada (“Acordeão abre”)
5. Adicione ação: Tamanho em Diversos
6. Desmarque o estado inicial
7. Insira “auto” para altura
8. Selecione o ícone (“Ícone do acordeão”)
9. Adicione ação (no mesmo timestamp): Girar em Transformar
10. Defina eixo z para 180 graus
11. Salve

Animar o fechamento do acordeão

Para animar o fechamento:

1. Selecione o elemento dropdown pai (“Item do acordeão”)
2. Abra o painel de Interações
3. Escolha a interação Dropdown abre
4. Selecione a ação em Menu fecha
5. Escolha Iniciar animação
6. Crie uma animação cronometrada e nomeie-a (por exemplo, “Acordeão fecha”)
7. Adicione ação: Tamanho em Diversos
8. Insira o valor de altura (por exemplo, 80px)
9. Selecione o ícone
10. Adicione ação (mesmo timestamp): Girar em Transformar
11. Defina eixo z para 0 graus
12. Salve

Voltar para ajuda do webflow