Navbar isla que se expande
Una píldora flotante con el logo que se abre como una isla dinámica y muestra enlaces de menú grandes.
Ajustes
Código
<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">Menú</span><span class="b">Cerrar</span></button></div><ul id="uv-nis-l"><li style="--i:0"><a href="#">Proyectos<span>01</span></a></li><li style="--i:1"><a href="#">Servicios<span>02</span></a></li><li style="--i:2"><a href="#">Estudio<span>03</span></a></li><li style="--i:3"><a href="#">Contacto<span>04</span></a></li></ul></div></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
A los estudios y portfolios les encanta una navegación casi invisible hasta que se necesita. Esta píldora oscura flota arriba con un punto luminoso, el nombre de la marca y un botón Menú; al pulsarlo la píldora crece suave hasta un gran panel redondeado, el botón pasa a Cerrar y cuatro enlaces enormes entran uno tras otro con su número.
Los enlaces se desplazan un poco al pasar el ratón, el botón informa con aria-expanded y Escape cierra la isla devolviendo el foco. Cambia la marca con el control de texto, los colores del panel y del acento con los controles de color y los enlaces en el HTML.