Tienes 3 avisos nuevos.
HTML + CSSNavegación

Menú de teclas mecánicas

Las secciones son teclas de un teclado mecánico beige: se hunden al pulsarlas, la activa queda naranja y responden del 1 al 4.

Ajustes

16px
1x

Código

<div class="uvq12-kc"><div class="ks" role="tablist" aria-label="Atajos"><button type="button" role="tab" id="uvq12-kc-t0" aria-selected="true" aria-controls="uvq12-kc-p0" tabindex="0" aria-keyshortcuts="1"><span class="cap"><b>1</b><span>Inicio</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t1" aria-selected="false" aria-controls="uvq12-kc-p1" tabindex="-1" aria-keyshortcuts="2"><span class="cap"><b>2</b><span>Proyectos</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t2" aria-selected="false" aria-controls="uvq12-kc-p2" tabindex="-1" aria-keyshortcuts="3"><span class="cap"><b>3</b><span>Notas</span><i class="led" aria-hidden="true"></i></span></button><button type="button" role="tab" id="uvq12-kc-t3" aria-selected="false" aria-controls="uvq12-kc-p3" tabindex="-1" aria-keyshortcuts="4"><span class="cap"><b>4</b><span>Ajustes</span><i class="led" aria-hidden="true"></i></span></button></div><div class="sc"><div class="pn" role="tabpanel" id="uvq12-kc-p0" aria-labelledby="uvq12-kc-t0">Tienes 3 avisos nuevos.</div><div class="pn" role="tabpanel" id="uvq12-kc-p1" aria-labelledby="uvq12-kc-t1" hidden>12 proyectos activos.</div><div class="pn" role="tabpanel" id="uvq12-kc-p2" aria-labelledby="uvq12-kc-t2" hidden>Última nota hace 5 min.</div><div class="pn" role="tabpanel" id="uvq12-kc-p3" aria-labelledby="uvq12-kc-t3" hidden>Tema, idioma y atajos.</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ú hecho con teclas mecánicas beige de superficie cóncava, número en la esquina y un pequeño LED. Las teclas bajan al pulsarlas, la sección activa queda en naranja con el LED encendido y una línea verde de terminal escribe debajo lo que contiene. Pulsar del 1 al 4 en el teclado hunde la tecla correspondiente, algo divertido para herramientas de desarrollo, paneles y portfolios.

El color principal pinta la tecla activa y el secundario la carcasa del teclado. Usa una palabra corta por tecla, hasta cinco teclas por fila, y deja los atajos a la vista.