Menu de titres qui se coupent en deux
De très grands liens qui, au survol ou au focus, se coupent en leur milieu et s'écartent pour montrer une ligne cachée.
Réglages
Code
<nav class="uvq14-slc" aria-label="Menu principal"><a href="#"><span class="n" aria-hidden="true">01</span><span class="w"><span class="b">Projets</span><span class="t" aria-hidden="true">Projets</span><span class="m">Douze cas réels</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">Six personnes, un atelier</span></span></a><a href="#"><span class="n" aria-hidden="true">03</span><span class="w"><span class="b">Contact</span><span class="t" aria-hidden="true">Contact</span><span class="m">Réponse sous un jour</span></span></a></nav>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Texte et défilement
Voir tout : Texte et défilementOù l’utiliser
Les grands menus en capitales sont courants sur les sites de studios, et celui-ci ajoute une coupe : chaque mot est dessiné deux fois avec des découpes complémentaires, donc au survol les moitiés haute et basse s'écartent dans des couleurs différentes et une petite légende apparaît dans l'espace. Les liens restent des ancres classiques aux noms lisibles. Il convient aux portfolios et aux menus d'agence.
Écris le premier élément dans le champ de texte et modifie les autres et leurs légendes dans le HTML. La couleur principale peint la moitié haute et la légende, la secondaire la moitié basse. Le focus clavier déclenche la même coupe que le pointeur.