Dropdown mit Kaskade
Das Menü öffnet sich von oben mit einer Skalierung, die Optionen erscheinen nacheinander.
Einstellungen
Code
<div class="uv-fdd"><button class="tg">Kategorie <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><button style="--i:0">Alle</button><button style="--i:1">Design</button><button style="--i:2">Code</button><button style="--i:3">Fotos</button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Wofür du ihn nutzen kannst
Ein Dropdown für Fälle, in denen genau eine Auswahl reicht. Zum Beispiel die Kategorieauswahl in einem Katalog für Onlinekurse: Alle, Design, Entwicklung, Fotografie. Das gestaffelte Einblenden lässt eine schlichte Liste durchdacht wirken, und der Pfeil dreht sich, damit klar ist, dass das Menü offen ist. Praktisch, wenn du ein animiertes Dropdown-Menü in HTML und CSS brauchst.
Halte die Liste kurz, höchstens sechs oder sieben Einträge, sonst zieht sich die Kaskade. Für längere Listen ist das Dropdown mit Suchfeld besser. Und wenn deine Nutzer es eilig haben, dreh das Tempo hoch.