Navegación por plantas de ascensor
Cada sección es una planta: pulsa su botón y el ascensor cuenta los pisos en un panel de LED hasta llegar con un destello.
Ajustes
Código
<nav class="uvq12-el" aria-label="Plantas"><div class="ds" aria-live="polite"><span class="dr" aria-hidden="true"></span><b class="fn">0</b><span class="lb"><small>Planta</small><span class="nm">Recepción</span></span></div><ul><li><button type="button" data-f="4"><span class="bt">4</span><span class="tx">Contacto</span></button></li><li><button type="button" data-f="3"><span class="bt">3</span><span class="tx">Equipo</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">Tienda</span></button></li><li><button type="button" data-f="0" aria-current="true"><span class="bt">0</span><span class="tx">Recepción</span></button></li></ul></nav>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Las secciones de una web presentadas como plantas de un edificio, en una botonera de acero cepillado. Al pulsar un botón se enciende su aro, el panel de puntos cuenta planta a planta con una flecha que indica el sentido y un destello suave marca la llegada. Las teclas numéricas también llaman al ascensor. Es una forma divertida de presentar webs de empresa, hoteles, locales o guías por niveles.
El color principal enciende el panel y los aros, y el secundario define el acero. Cambia las plantas en los datos; el tiempo de viaje sigue al control de velocidad, así que puedes hacer el trayecto más rápido.