Menü als Drehtür
Eine Drehtür von oben: Schieb sie an, und sie dreht mit Schwung weiter, bis ein Bereich vor dem Eingang steht.
Einstellungen
Code
<div class="uvq12-rv"><div class="dr"><svg viewBox="0 0 200 200" aria-hidden="true"><circle class="fl" cx="100" cy="100" r="80"/><path class="wl" d="M60 169.3A80 80 0 0 1 60 30.7M140 30.7A80 80 0 0 1 140 169.3"/><rect class="mt" x="66" y="186" width="68" height="9" rx="3"/><g class="ro"><path d="M100 100L155.2 44.8M100 100L44.8 44.8M100 100L44.8 155.2M100 100L155.2 155.2"/><circle cx="100" cy="100" r="7"/></g></svg><div role="tablist" aria-label="Gebäude"><button type="button" role="tab" id="uvq12-rv-t0" aria-selected="true" aria-controls="uvq12-rv-p0" tabindex="0" style="left:50.00%;top:73.00%">Empfang</button><button type="button" role="tab" id="uvq12-rv-t1" aria-selected="false" aria-controls="uvq12-rv-p1" tabindex="-1" style="left:27.00%;top:50.00%">Büros</button><button type="button" role="tab" id="uvq12-rv-t2" aria-selected="false" aria-controls="uvq12-rv-p2" tabindex="-1" style="left:50.00%;top:27.00%">Terrasse</button><button type="button" role="tab" id="uvq12-rv-t3" aria-selected="false" aria-controls="uvq12-rv-p3" tabindex="-1" style="left:73.00%;top:50.00%">Saal</button></div></div><div class="in"><div class="pn" role="tabpanel" id="uvq12-rv-p0" aria-labelledby="uvq12-rv-t0"><b>Empfang</b><span>Erdgeschoss, geöffnet von 8 bis 20 Uhr.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p1" aria-labelledby="uvq12-rv-t1" hidden><b>Büros</b><span>Flexible Arbeitsplätze in den Etagen 1 bis 6.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p2" aria-labelledby="uvq12-rv-t2" hidden><b>Terrasse</b><span>Blick auf den Fluss und Kaffee im Freien.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p3" aria-labelledby="uvq12-rv-t3" hidden><b>Saal</b><span>Zweihundert Plätze für Vorträge und Premieren.</span></div></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 Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Ein Menü als Drehtür von oben, mit gebogenen Wänden, Glasflügeln und einer Matte am Eingang. Jedes Viertel enthält einen Bereich, und der Bereich, der am Ende vor dem Eingang steht, ist aktiv. Schieb die Tür mit Finger oder Maus an, sie dreht mit Schwung weiter und rastet dann ein; Mausrad, Pfeiltasten oder ein Klick auf einen Namen gehen auch.
Die Hauptfarbe tönt die Glasflügel und das aktive Label, die Zweitfarbe die Wände. Vier Bereiche passen zu den vier Flügeln; schreib für jeden eine kurze Beschreibung, die das Feld neben der Tür anzeigt.