Menu en porte tambour
Une porte tambour vue du dessus : pousse-la et elle tourne avec élan jusqu'à placer une section face à l'entrée.
Réglages
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="Bâtiment"><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%">Accueil</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%">Bureaux</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%">Auditorium</button></div></div><div class="in"><div class="pn" role="tabpanel" id="uvq12-rv-p0" aria-labelledby="uvq12-rv-t0"><b>Accueil</b><span>Rez-de-chaussée, ouvert de 8 h à 20 h.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p1" aria-labelledby="uvq12-rv-t1" hidden><b>Bureaux</b><span>Postes flexibles aux étages 1 à 6.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p2" aria-labelledby="uvq12-rv-t2" hidden><b>Terrasse</b><span>Vue sur le fleuve et café en plein air.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p3" aria-labelledby="uvq12-rv-t3" hidden><b>Auditorium</b><span>Deux cents fauteuils pour conférences et avant-premières.</span></div></div></div>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
Un menu dessiné comme une porte tambour vue du dessus, avec murs courbes, vantaux de verre et tapis à l'entrée. Chaque quart contient une section, et celle qui finit face à l'entrée devient active. Pousse la porte du doigt ou à la souris et elle continue de tourner avec élan avant de se caler, ou utilise la molette, les flèches ou un clic sur un nom.
La couleur principale teinte les vantaux de verre et l'étiquette active, la secondaire les murs. Quatre sections vont avec les quatre vantaux ; écris une courte description pour chacune afin que le panneau voisin l'explique.