Menü mit geteilten Überschriften
Riesige Links, die sich beim Überfahren oder Fokussieren in der Mitte teilen und auseinandergleiten, um eine versteckte Zeile zu zeigen.
Einstellungen
Code
<nav class="uvq14-slc" aria-label="Hauptmenü"><a href="#"><span class="n" aria-hidden="true">01</span><span class="w"><span class="b">Projekte</span><span class="t" aria-hidden="true">Projekte</span><span class="m">Zwölf echte Fälle</span></span></a><a href="#"><span class="n" aria-hidden="true">02</span><span class="w"><span class="b">Studio</span><span class="t" aria-hidden="true">Studio</span><span class="m">Sechs Leute, eine Werkstatt</span></span></a><a href="#"><span class="n" aria-hidden="true">03</span><span class="w"><span class="b">Kontakt</span><span class="t" aria-hidden="true">Kontakt</span><span class="m">Wir antworten in einem Tag</span></span></a></nav>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 Text & Scroll
Alle ansehen: Text & ScrollWofür du ihn nutzen kannst
Große Menüs in Versalien sind auf Studio-Websites üblich, und dieses fügt einen Schnitt hinzu: Jedes Wort wird zweimal mit sich ergänzenden Clip-Paths gezeichnet, beim Überfahren gleiten obere und untere Hälfte in verschiedenen Farben auseinander und in der Lücke erscheint eine kleine Zeile. Die Links bleiben normale Anker mit lesbaren Namen. Er passt zu Portfolio-Navigation, Agenturmenüs und redaktionellen Übersichten.
Schreib den ersten Eintrag ins Textfeld und passe die übrigen samt Zusatzzeilen im HTML an. Die Hauptfarbe färbt die obere Hälfte und die Zusatzzeile, die Zweitfarbe die untere Hälfte. Tastaturfokus löst denselben Schnitt aus wie der Zeiger.