Contactos

A
  • Ana Ruiz
  • Alberto Gil
B
  • Bea Soto
C
  • Carla Vidal
  • Carlos Mena
D
  • Diego Paz
E
  • Elena Ortiz
G
  • Gabriel Ros
I
  • Irene Sanz
J
  • Javier León
L
  • Laura Peña
  • Lucía Martín
M
  • Mario Gómez
  • Marta Cano
N
  • Nuria Vega
P
  • Pablo Rey
R
  • Raúl Díaz
  • Rosa Gil
S
  • Sara Molina
T
  • Tomás Rivas
V
  • Vera Luna
ABCDEFGHIJKLMNOPQRSTUVWXYZ
HTML + CSSNavegación

Índice alfabético deslizable

Una lista de contactos con barra de la A a la Z: desliza el dedo por las letras y una burbuja muestra el salto.

Ajustes

16px
1x

Código

<div class="uvq12-az"><p class="tt">Contactos</p><div class="bx"><div class="ls" tabindex="0" aria-label="Contactos"><section data-l="A"><h5>A</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">AR</i>Ana Ruiz</li><li><i style="--h:#eab308" aria-hidden="true">AG</i>Alberto Gil</li></ul></section><section data-l="B"><h5>B</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">BS</i>Bea Soto</li></ul></section><section data-l="C"><h5>C</h5><ul><li><i style="--h:#f97316" aria-hidden="true">CV</i>Carla Vidal</li><li><i style="--h:#f97316" aria-hidden="true">CM</i>Carlos Mena</li></ul></section><section data-l="D"><h5>D</h5><ul><li><i style="--h:#f97316" aria-hidden="true">DP</i>Diego Paz</li></ul></section><section data-l="E"><h5>E</h5><ul><li><i style="--h:#eab308" aria-hidden="true">EO</i>Elena Ortiz</li></ul></section><section data-l="G"><h5>G</h5><ul><li><i style="--h:#f97316" aria-hidden="true">GR</i>Gabriel Ros</li></ul></section><section data-l="I"><h5>I</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">IS</i>Irene Sanz</li></ul></section><section data-l="J"><h5>J</h5><ul><li><i style="--h:#f97316" aria-hidden="true">JL</i>Javier León</li></ul></section><section data-l="L"><h5>L</h5><ul><li><i style="--h:#eab308" aria-hidden="true">LP</i>Laura Peña</li><li><i style="--h:#a855f7" aria-hidden="true">LM</i>Lucía Martín</li></ul></section><section data-l="M"><h5>M</h5><ul><li><i style="--h:#f97316" aria-hidden="true">MG</i>Mario Gómez</li><li><i style="--h:#eab308" aria-hidden="true">MC</i>Marta Cano</li></ul></section><section data-l="N"><h5>N</h5><ul><li><i style="--h:#0ea5e9" aria-hidden="true">NV</i>Nuria Vega</li></ul></section><section data-l="P"><h5>P</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">PR</i>Pablo Rey</li></ul></section><section data-l="R"><h5>R</h5><ul><li><i style="--h:#e11d48" aria-hidden="true">RD</i>Raúl Díaz</li><li><i style="--h:#eab308" aria-hidden="true">RG</i>Rosa Gil</li></ul></section><section data-l="S"><h5>S</h5><ul><li><i style="--h:#f97316" aria-hidden="true">SM</i>Sara Molina</li></ul></section><section data-l="T"><h5>T</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">TR</i>Tomás Rivas</li></ul></section><section data-l="V"><h5>V</h5><ul><li><i style="--h:#22c55e" aria-hidden="true">VL</i>Vera Luna</li></ul></section></div><div class="rl" role="slider" tabindex="0" aria-label="Índice" aria-valuemin="0" aria-valuemax="25" aria-valuenow="0" aria-valuetext="A"><span>A</span><span>B</span><span>C</span><span>D</span><span>E</span><span class="no">F</span><span>G</span><span class="no">H</span><span>I</span><span>J</span><span class="no">K</span><span>L</span><span>M</span><span>N</span><span class="no">O</span><span>P</span><span class="no">Q</span><span>R</span><span>S</span><span>T</span><span class="no">U</span><span>V</span><span class="no">W</span><span class="no">X</span><span class="no">Y</span><span class="no">Z</span><b class="bb" aria-hidden="true"><span>A</span></b></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

El índice alfabético de los contactos del móvil: una columna de letras recorre el lateral y, al deslizar el dedo o el ratón por ella, la lista salta a esa letra mientras una burbuja en forma de gota muestra la letra junto al dedo. Las letras sin entradas aparecen atenuadas, las cabeceras se quedan fijas arriba al desplazar y la barra funciona como un control deslizante con el teclado.

El color principal pinta las letras y la burbuja, y el secundario las cabeceras fijas. Ordena tus datos alfabéticamente y las letras vacías se calculan a partir de ellos.