Barre de navigation en îlot
Une pilule flottante avec le logo qui s'ouvre comme un îlot dynamique et révèle de grands liens.
Réglages
Code
<nav class="uv-nis" aria-label="Principal"><div class="is"><div class="hd"><span class="lg"><i></i>Estudio Nube</span><button type="button" aria-expanded="false" aria-controls="uv-nis-l"><span class="a">Menu</span><span class="b">Fermer</span></button></div><ul id="uv-nis-l"><li style="--i:0"><a href="#">Projets<span>01</span></a></li><li style="--i:1"><a href="#">Services<span>02</span></a></li><li style="--i:2"><a href="#">Studio<span>03</span></a></li><li style="--i:3"><a href="#">Contact<span>04</span></a></li></ul></div></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 Navigation
Voir tout : NavigationOù l’utiliser
Les studios et portfolios adorent une navigation presque invisible jusqu'au moment où l'on en a besoin. Cette pilule sombre flotte en haut avec un point lumineux, le nom de la marque et un bouton Menu ; un appui la fait grandir en un grand panneau arrondi, le bouton devient Fermer et quatre liens géants arrivent l'un après l'autre avec leur numéro.
Les liens se décalent au survol, le bouton indique aria-expanded et Échap ferme l'îlot en rendant le focus. Change la marque avec le champ de texte, les couleurs du panneau et de l'accent avec les réglages, et les liens dans le HTML.