Navigation par étages d'ascenseur
Chaque section est un étage : appuie sur son bouton et l'ascenseur compte les étages sur un afficheur LED jusqu'à l'arrivée.
Réglages
Code
<nav class="uvq12-el" aria-label="Étages"><div class="ds" aria-live="polite"><span class="dr" aria-hidden="true"></span><b class="fn">0</b><span class="lb"><small>Étage</small><span class="nm">Accueil</span></span></div><ul><li><button type="button" data-f="4"><span class="bt">4</span><span class="tx">Contact</span></button></li><li><button type="button" data-f="3"><span class="bt">3</span><span class="tx">Équipe</span></button></li><li><button type="button" data-f="2"><span class="bt">2</span><span class="tx">Blog</span></button></li><li><button type="button" data-f="1"><span class="bt">1</span><span class="tx">Boutique</span></button></li><li><button type="button" data-f="0" aria-current="true"><span class="bt">0</span><span class="tx">Accueil</span></button></li></ul></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 sections d'un site présentées comme les étages d'un immeuble, sur un panneau d'ascenseur en acier brossé. Un appui allume l'anneau du bouton, l'afficheur à points compte étage par étage avec une flèche pour le sens, et un léger éclair marque l'arrivée. Les touches numériques appellent aussi l'ascenseur. Une idée ludique pour les sites d'entreprise, hôtels, lieux et guides à plusieurs niveaux.
La couleur principale allume l'afficheur et les anneaux, la secondaire règle l'acier. Renomme les étages dans les données ; la durée du trajet suit le réglage de vitesse.