Crea un'accordion personalizzata - Aiuto Webflow

Come aggiungere un elemento dropdown

L'elemento dropdown ha azioni predefinite integrate che lo rendono utile come un'accordion personalizzata — apre la lista dropdown quando viene cliccato e la chiude quando viene cliccato un altro elemento o parte della pagina.

Puoi aggiungere un elemento dropdown al tuo sito andando su Pannello Aggiungi (A) > Elementi > Avanzato e trascinando l'elemento dropdown sulla tela.

Come cambiare gli stili predefiniti del dropdown

Per usare il dropdown nella tua accordion personalizzata, dovrai cambiare gli stili predefiniti dell'elemento dropdown. In particolare, dovrai regolare la larghezza in modo che il dropdown riempia completamente lo spazio del suo elemento genitore (cioè, qualunque elemento contenga l'accordion personalizzata).

Per cambiare gli stili predefiniti del dropdown:

1. Seleziona l'elemento dropdown genitore sulla tela del Designer (assegnato una classe di “Elemento Accordion” per questo esempio)
2. Vai a Pannello Stile > Dimensione
3. Imposta Larghezza su 100%

Come personalizzare il tuo toggle dropdown

Ora, dovrai personalizzare il tuo toggle dropdown in modo che riempia completamente il suo elemento genitore e nasconda il contenuto all'interno della lista dropdown quando l'accordion è chiusa. Regola le proprietà di display e altezza del toggle dropdown:

1. Seleziona il toggle dropdown sulla tela e assegnagli una classe (ad es., “Toggle Accordion”)
2. Vai a Pannello Stile > Layout
3. Imposta Display su flexbox per riempire lo spazio orizzontale
4. Imposta Allinea su centro per centrare verticalmente il testo
5. Vai a Pannello Stile > Dimensione
6. Imposta un valore di Altezza (ad es., 80px)

Come stilizzare il tuo fisarmonica

Se visualizzi in anteprima il tuo sito e clicchi sulla tua fisarmonica, potresti notare che si apre, ma il contenuto predefinito si sovrappone al contenuto circostante. Questo accade perché lo stile di posizione predefinito per l'elenco a discesa è assoluto. Dovrai cambiarlo affinché il contenuto si espanda e sposti gli elementi circostanti.

Per stilizzare la tua fisarmonica:

1. Seleziona l'elemento dropdown genitore (es. "Elemento fisarmonica")
2. Clicca sull'icona "ingranaggio" per aprire le Impostazioni del dropdown e mostrare il Menu
3. Seleziona l'elemento Elenco a discesa
4. Vai al Pannello stile > Posizione
5. Imposta Posizione su statica
6. Seleziona l'elemento dropdown genitore ("Elemento fisarmonica")
7. Vai al Pannello stile > Dimensione
8. Imposta Overflow su nascosto

Come creare la tua animazione personalizzata

Crea un'animazione personalizzata che apre e chiude la tua fisarmonica personalizzata:

• Crea azioni iniziali
• Anima l'apertura della fisarmonica
• Anima la chiusura della fisarmonica

Crea azioni iniziali

Inizierai creando due azioni iniziali per la tua fisarmonica.

Per il tuo dropdown:

1. Seleziona l'elemento dropdown ("Elemento fisarmonica")
2. Vai al Pannello interazioni > Trigger elemento e crea un nuovo trigger elemento
3. Scegli Apertura dropdown
4. Seleziona un'azione sotto Apertura menu
5. Scegli Inizia un'animazione sotto Animazione personalizzata
6. Crea un'animazione temporizzata e assegnale un nome (es. "Apertura fisarmonica")
7. Aggiungi un'azione alla tua animazione: Dimensione sotto Varie
8. Imposta come stato iniziale
9. Inserisci un valore di altezza (es. 80px)
10. Salva

Per la tua icona di attivazione:

1. Seleziona l'Icona all'interno dell'elemento dropdown
2. Assegna una classe alla tua icona (es. "Icona fisarmonica")
3. Seleziona l'elemento dropdown genitore
4. Apri il Pannello interazioni
5. Seleziona l'interazione Apertura dropdown
6. Modifica l'animazione temporizzata ("Apertura fisarmonica")
7. Seleziona l'icona ("Icona fisarmonica")
8. Aggiungi azione: Ruota sotto Trasforma
9. Imposta come stato iniziale
10. Imposta l'asse z su 0 gradi
11. Salva

Animare l'apertura dell'accordion

Per aprire l'accordion e ruotare l'icona:

1. Seleziona l'elemento dropdown genitore
2. Apri il pannello Interazioni
3. Scegli l'interazione Dropdown opens
4. Modifica l'animazione temporizzata (“Accordion opens”)
5. Aggiungi azione: Dimensione sotto Varie
6. Deseleziona stato iniziale
7. Inserisci “auto” per l'altezza
8. Seleziona l'icona (“Icona accordion”)
9. Aggiungi azione (allo stesso timestamp): Ruota sotto Trasforma
10. Imposta asse z a 180 gradi
11. Salva

Animare la chiusura dell'accordion

Per animare la chiusura:

1. Seleziona l'elemento dropdown genitore (“Elemento accordion”)
2. Apri il pannello Interazioni
3. Scegli l'interazione Dropdown opens
4. Seleziona azione sotto Menu closes
5. Scegli Avvia animazione
6. Crea animazione temporizzata e nominarla (es., “Accordion closes”)
7. Aggiungi azione: Dimensione sotto Varie
8. Inserisci valore altezza (es., 80px)
9. Seleziona icona
10. Aggiungi azione (stesso timestamp): Ruota sotto Trasforma
11. Imposta asse z a 0 gradi
12. Salva

Torna all'aiuto di webflow