← Todos los ejemplos

Gmail: barra de etiquetas plegable

Reduce la barra de etiquetas a una franja de iconos y la expande solo al pasar el cursor.

Código para copiar

/* Collapse the left label rail until you hover it */
.aeN { width: 56px !important; overflow: hidden !important; transition: width .15s; }
.aeN:hover { width: 256px !important; }
.bkK > .nH { margin-left: 56px !important; }

Cómo usar este ejemplo

1. Copia el código con el botón de arriba.
2. Instala JustZix (2 minutos) y abre la extensión en la página de destino.
3. Añade una nueva regla que coincida con esa página.
4. Pega el código en el panel CSS de la regla y guarda — el efecto aparece al instante.