Erstellen Sie ein benutzerdefiniertes Akkordeon - Webflow-Hilfe

So fügen Sie ein Dropdown-Element hinzu

Das Dropdown-Element hat standardmäßig integrierte Aktionen, die es als benutzerdefiniertes Akkordeon nützlich machen — es öffnet die Dropdown-Liste, wenn darauf geklickt wird, und schließt sie, wenn ein anderes Element oder ein Teil der Seite angeklickt wird.

Sie können ein Dropdown-Element zu Ihrer Seite hinzufügen, indem Sie zum Hinzufügen-Panel (A) > Elemente > Erweitert gehen und das Dropdown-Element auf die Leinwand ziehen.

So ändern Sie die Standard-Dropdown-Stile

Um das Dropdown in Ihrem benutzerdefinierten Akkordeon zu verwenden, müssen Sie die Standardstile des Dropdown-Elements ändern. Insbesondere müssen Sie die Breite anpassen, damit das Dropdown den Raum seines übergeordneten Elements vollständig ausfüllt (d.h. welches Element auch immer das benutzerdefinierte Akkordeon hält).

So ändern Sie die Standard-Dropdown-Stile:

1. Wählen Sie das übergeordnete Dropdown-Element auf der Designer-Leinwand aus (in diesem Beispiel mit der Klasse „Akkordeon-Element“)
2. Gehen Sie zum Stil-Panel > Größe
3. Setzen Sie die Breite auf 100%

So passen Sie Ihren Dropdown-Umschalter an

Jetzt müssen Sie Ihren Dropdown-Umschalter anpassen, damit er sein übergeordnetes Element vollständig ausfüllt und den Inhalt innerhalb der Dropdown-Liste ausblendet, wenn das Akkordeon geschlossen ist. Passen Sie die Anzeige- und Höhe-Eigenschaften des Dropdown-Umschalters an:

1. Wählen Sie den Dropdown-Umschalter auf der Leinwand aus und geben Sie ihm eine Klasse (z.B. „Akkordeon-Umschalter“)
2. Gehen Sie zum Stil-Panel > Layout
3. Setzen Sie die Anzeige auf Flexbox, um den horizontalen Raum auszufüllen
4. Setzen Sie Ausrichten auf Zentrum, um den Text vertikal zu zentrieren
5. Gehen Sie zum Stil-Panel > Größe
6. Setzen Sie einen Höhenwert (z.B. 80px)

So stylen Sie Ihr Akkordeon

Wenn Sie Ihre Website in der Vorschau anzeigen und auf Ihr Akkordeon klicken, stellen Sie möglicherweise fest, dass sich das Akkordeon öffnet, aber der Standardinhalt überlagert den umliegenden Inhalt. Dies geschieht, weil der Standard-Position-Stil für die Dropdown-Liste absolut ist. Sie sollten es ändern, damit sich der Inhalt erweitert und umliegende Elemente verschiebt.

So stylen Sie Ihr Akkordeon:

1. Wählen Sie das übergeordnete Dropdown-Element (z.B. „Akkordeon-Element“)
2. Klicken Sie auf das „Zahnrad“-Symbol, um die Dropdown-Einstellungen zu öffnen und das Menü anzuzeigen
3. Wählen Sie das Dropdown-Liste-Element
4. Gehen Sie zum Stil-Panel > Position
5. Setzen Sie Position auf statisch
6. Wählen Sie das übergeordnete Dropdown-Element („Akkordeon-Element“)
7. Gehen Sie zum Stil-Panel > Größe
8. Setzen Sie Überlauf auf versteckt

So erstellen Sie Ihre benutzerdefinierte Animation

Erstellen Sie eine benutzerdefinierte Animation, die Ihr benutzerdefiniertes Akkordeon öffnet und schließt:

• Erstellen Sie anfängliche Aktionen
• Animieren Sie das Öffnen des Akkordeons
• Animieren Sie das Schließen des Akkordeons

Erstellen Sie anfängliche Aktionen

Sie beginnen mit der Erstellung von zwei anfänglichen Aktionen für Ihr Akkordeon.

Für Ihr Dropdown:

1. Wählen Sie das Dropdown-Element („Akkordeon-Element“)
2. Gehen Sie zum Interaktions-Panel > Element-Trigger und erstellen Sie einen neuen Element-Trigger
3. Wählen Sie Dropdown öffnet sich
4. Wählen Sie eine Aktion unter Menü öffnet sich
5. Wählen Sie Starten Sie eine Animation unter Benutzerdefinierte Animation
6. Erstellen Sie eine zeitgesteuerte Animation und benennen Sie sie (z.B. „Akkordeon öffnet sich“)
7. Fügen Sie Ihrer Animation eine Aktion hinzu: Größe unter Verschiedenes
8. Als Anfangszustand festlegen
9. Geben Sie einen Höhenwert ein (z.B. 80px)
10. Speichern

Für Ihr Umschalt-Symbol:

1. Wählen Sie das Symbol innerhalb des Dropdown-Elements
2. Geben Sie Ihrem Symbol eine Klasse (z.B. „Akkordeon-Symbol“)
3. Wählen Sie das übergeordnete Dropdown-Element
4. Öffnen Sie das Interaktions-Panel
5. Wählen Sie die Dropdown öffnet sich-Interaktion
6. Bearbeiten Sie die zeitgesteuerte Animation („Akkordeon öffnet sich“)
7. Wählen Sie das Symbol („Akkordeon-Symbol“)
8. Aktion hinzufügen: Drehen unter Transformieren
9. Als Anfangszustand festlegen
10. Setzen Sie die z-Achse auf 0 Grad
11. Speichern

Akkordeon-Öffnung animieren

Um das Akkordeon zu öffnen und das Symbol zu drehen:

1. Wählen Sie das übergeordnete Dropdown-Element aus
2. Öffnen Sie das Interaktionspanel
3. Wählen Sie die Interaktion Dropdown öffnet sich
4. Bearbeiten Sie die zeitgesteuerte Animation („Akkordeon öffnet sich“)
5. Aktion hinzufügen: Größe unter Verschiedenes
6. Deaktivieren Sie den Anfangszustand
7. Geben Sie „auto“ für die Höhe ein
8. Wählen Sie das Symbol („Akkordeon-Symbol“)
9. Fügen Sie eine Aktion hinzu (zum gleichen Zeitpunkt): Drehen unter Transformieren
10. Setzen Sie die z-Achse auf 180 Grad
11. Speichern

Akkordeon-Schließung animieren

Um das Schließen zu animieren:

1. Wählen Sie das übergeordnete Dropdown-Element („Akkordeon-Element“) aus
2. Öffnen Sie das Interaktionspanel
3. Wählen Sie die Interaktion Dropdown öffnet sich
4. Wählen Sie die Aktion unter Menü schließt
5. Wählen Sie Animation starten
6. Erstellen Sie eine zeitgesteuerte Animation und benennen Sie sie (z.B. „Akkordeon schließt“)
7. Aktion hinzufügen: Größe unter Verschiedenes
8. Geben Sie einen Höhenwert ein (z.B. 80px)
9. Wählen Sie das Symbol
10. Fügen Sie eine Aktion hinzu (zum gleichen Zeitpunkt): Drehen unter Transformieren
11. Setzen Sie die z-Achse auf 0 Grad
12. Speichern

Zurück zur Webflow-Hilfe