RecepciónPlanta baja, abierta de 8 a 20 h.
HTML + CSSNavegación

Menú de puerta giratoria

Una puerta giratoria vista desde arriba: empújala y gira con inercia hasta dejar una sección frente a la entrada.

Ajustes

16px
1x

Código

<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="Edificio"><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%">Recepción</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%">Oficinas</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%">Terraza</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%">Auditorio</button></div></div><div class="in"><div class="pn" role="tabpanel" id="uvq12-rv-p0" aria-labelledby="uvq12-rv-t0"><b>Recepción</b><span>Planta baja, abierta de 8 a 20 h.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p1" aria-labelledby="uvq12-rv-t1" hidden><b>Oficinas</b><span>Puestos flexibles en las plantas 1 a 6.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p2" aria-labelledby="uvq12-rv-t2" hidden><b>Terraza</b><span>Vistas al río y café al aire libre.</span></div><div class="pn" role="tabpanel" id="uvq12-rv-p3" aria-labelledby="uvq12-rv-t3" hidden><b>Auditorio</b><span>Doscientas butacas para charlas y estrenos.</span></div></div></div>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Navegación

Ver todos: Navegación

Dónde usarlo

Un menú dibujado como una puerta giratoria vista desde arriba, con muros curvos, hojas de cristal y un felpudo en la entrada. Cada cuarto guarda una sección, y la que queda frente a la entrada es la activa. Empuja la puerta con el dedo o el ratón y sigue girando con inercia antes de encajar, o usa la rueda, las flechas o pulsa cualquier nombre.

El color principal tiñe las hojas de cristal y la etiqueta activa, y el secundario los muros. Cuatro secciones encajan con las cuatro hojas; escribe una descripción breve de cada una para que el panel de al lado la explique.