Desbordamiento de pestañas: ¿qué hacer cuando me quedo sin espacio para pestañas anuales?

Podrías tener una pestaña '...' y usar JavaScript (yay jQuery) para "desplazarte" hacia la derecha cuando hagas clic y reveles las otras pestañas. Entonces podría tener una flecha a la izquierda para volver a las pestañas más nuevas. (TY @ChrisF por la inspiración)

Para el registro, me gusta la respuesta de @ ChrisF, pero solo por diversión, así es como lo maneja Google Spreadsheets.

Probablemente agregaría una barra sobre la lista y pondría un menú desplegable para seleccionar el año en el lado izquierdo de la barra. Entonces también tendría espacio para agregar otras opciones de filtrado a través del menú desplegable, es decir, si alguna sería útil.

Las pestañas pueden no ser la metáfora correcta para usar en la paginación. Si desea evitar recargar la página para llegar a años que no caben en el espacio dado, una lista horizontal de desplazamiento puede funcionar mejor.

Consulte la lista de productos en la parte superior de página Mac de Apple .

Su lista de años nunca crecerá ridículamente enorme, por lo que no necesita preocuparse por los problemas típicos de paginación de ocultar páginas no inmediatas, etc.

"‹ ... 148 149 150 151 152 ... ›"

Probablemente sea mejor encontrar una manera de enumerar todos los años y ocluir los que no son relevantes de inmediato.

Si los años no son tantos, puede colocar los años 'más viejos' en un menú desplegable al final.

Puedes hacer como Firefox. Hay un desplazamiento para pestañas ocultas. para que pueda cargar pestañas más que el espacio que tiene. O puede hacer como Chrome, hacer que las pestañas sean más pequeñas agregando más pestañas (esta solución no funcionará para su caso, porque al hacer las pestañas más pequeñas, las etiquetas desaparecen). Creo que tener un área de desplazamiento para pestañas es la mejor solución. de esta manera el usuario no tiene límite. Puede agregar una lista desplegable para que el usuario pueda cambiar de página rápidamente.

Como tiene un conjunto acotado para sus pestañas (usted mencionó "20 años") podría usar "pestañas verticales", algo así como la mayoría de los programas de blog tienen "categorías" o "archivos" en una barra lateral. Luego, si es necesario, puede colocar los elementos más importantes/de alto tráfico en un formato fácil de usar en la parte superior de arriba, donde están sus pestañas actuales.

Por ejemplo, mi sitio web (una plantilla lista para usar) tiene una lista de "Archivos" que se ejecuta en el lado izquierdo.

http://www.aaronlerch.com/blog/

(Tenga en cuenta que no estoy tratando de mejorar mi sitio, fue lo primero que se me ocurrió porque sabía lo que estaba buscando :))

Al igual que otros aquí, sugeriría alejarse de las pestañas también.

Pero si está atascado con ellos, puede meter más pestañas en la fila y reducirlas. (Estoy pensando en las pestañas de Chrome). Cuando son demasiado estrechas para que quepan sus etiquetas, trunca las etiquetas. En su caso, desearía truncar el comienzo de los años:

El | ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

Ciertamente no es óptimo, pero podría aplacar al cliente hasta que acepte deshacerse de las pestañas.

Tal vez las pestañas no son la mejor manera de mostrarlas. Pero si no desea romper la navegación clásica, debe colocar 2 flechas, unas apuntan a la izquierda y la otra a la derecha.

También puede mostrar las pestañas que cree que se usarán con más frecuencia (o hasta los últimos 10 años). Al final, tenga una pestaña que diga "Más viejo" y que muestre una lista de los años anteriores restantes al hacer clic, usando JavaScript. Es posible que este enfoque no funcione tan bien si finalmente tiene tantos años más antiguos para mostrar que la lista es realmente larga. Esto tampoco tiene en cuenta lo que haría para los usuarios sin JS habilitado.

Todas esas pestañas también lo convierten en un diseño muy ocupado y ruidoso. También creo que las pestañas son más adecuadas para agrupar diferentes conjuntos de datos, no variaciones de los mismos.

Sugeriría algo como un menú desplegable con botones anteriores/siguientes a cada lado. O una lista en una barra lateral o algo así.

¿Espera que sus usuarios naveguen a través de los años, solo por curiosidad, o les gustaría revisar los premios de un año en particular? En el último caso, un campo de texto sería incluso más rápido.

La pestaña siguiente, la pestaña anterior, la página de pestañas siguiente, la página de pestañas anterior, los botones son necesarios, pero no suficientes.
- Desplazarse a una pestaña remota sería realmente molesto.

Intente usar pestañas jerárquicas: pestaña de década con pestañas de año dentro.
Además, permita que el usuario salte directamente a la pestaña deseada, ingresando el año.