soy Kseso y esto EsCSS

Multicolumnas Css en pestañas: contenido autodistribuido entre tabs

Una sistema de pestañas, tabs o sliders puro Css con el contenido autodistribuido de forma automática entre los sliders sin necesidad de marcado html extra en base a las particularidades de las multicolumnas CSS.

Multicolumnas Css en pestañas: contenido autodistribuido entre tabs

·Por Kseso ✎ 6

O cómo realizar slaiders con multicolumnas Css

Multicolumnas Css en pestañas: contenido autodistribuido

Todas las realizaciones de sliders o sistema de pestañas (tabs) que conozco se basan en la misma idea para alojar en contenido: en todas el contenido está compartimentado. Esto es, el contenido de cada diapositiva está alojada en su propio contenedor, separada del resto.

Este detalle, en la mayoría de los casos, lejos de ser un inconveniente es una ventaja. Pero no siempre será así. Habrá ocasiones que desearías que el contenido a mostrar pudiese fluir líbremente entre cuadros sin tenerte que preocupar tú de distribuirlo de forma equitativa entre una pestaña y otra. Imagina, por ejemplo, que tienes que mostrar una larga relación de enlaces o un extracto de texto lo bastante amplio generado aleatoriamente. ¿Cómo se reparte?.

Lo más sencillo sería una caja contenedora con tamaño acotado y un largo scroll vertical. Pero no quieres scroll, lo tuyo son las pestañas y las quieres.

A la espera de que las regiones Css y el grid template layout puedan ser tenidas en cuenta sólo nos queda una opción Css para logar distribuir un contenido en bloques sin necesidad de marcado html: las multicolumnas Css.

Combinando las multicolumnas con un sistema de tabs, pestañas o sliders podemos lograr que en contenido se autodistribuya entre los distintos cuadros sin tener que hacerlo nosotros.

Además al mezclar ambas evitamos una pequeña molestia que tienen las multicolumnas: hoy por hoy no es posible fijar una altura máxima y lograr que se creen bloques o regiones en las que se muestren para seccionarlas por pantalla o viewport:

column-max-height

Ahora tienes que desplazarte (scroll down) hasta el fondo para leer la primera columna y subir para seguir con la segunda. Y así sucesivamente. Esta propuesta de propiedad column-max-heightlo evitaría. Pero regresemos al tema que nos ocupa.

Antes de ir con las explicaciones, echa un vistazo al funcionamiento de las multicolumnas Css convertidas en pestañas o tabs:

See the Pen Multicolumns Css on slide by Kseso (@Kseso) on CodePen.

Ver Demo a Full

Preparando el terreno de juego

Todo se basa en una caja padre que alojará todo en contenido, tanto la información como el sistema para navegar entre ella. Obligatoriamente tendrá una anchura que nada impide sea "responsive", además de impedir su desborde con overflow: hidden.

No es necesario definir su altura: será función del número de pestañas y del contenido a mostrar.

section { background: #fff; width: 45vw; max-width: 600px; min-width: 400px; margin: 3vh auto 0; overflow: hidden; border: 1px solid #aaa; box-shadow: 0 0 2px rgba(0,0,0,.3); }

Como hijo directo de esta caja tendremos al elemento que alojará todo el resto, en la demo un article

article { background: #fff; margin: 1rem 0 0; /* Mágico Css */ width: 600%; columns: 6; column-gap: 0; transition: .7s steps(6); }

Las declaraciones relevantes del Css previo las tienes precedidas por el comentario:

  • Width: 600%; La anchura será el 100% de su padre multiplicado por el número de slaides que deseemos tener.
  • columns: 6; El numero de columnas, 6 en la demo, que como ves coincide con el valor anterior.
  • column-gap: 0; La separación entre columnas. En mi caso opté por un valor de cero. El aire al texto en los laterales se lo asigno a los párrafos.
  • transition: .7s steps(6); Animamos un poco el paso de un bloque a otro. Y en vez de hacerlo lineal lo realizamos a saltitos steps(6)

Como es lógico, el número de columnas será función de la cantidad total de información que contendrán. Muchas para poco contenido dará lugar a poca altura del slider o en caso de incluir elementos indivisibles las últimas se quedarían vacías.

Dentro de este elemento será donde coloquemos todo el contenido y al usar las multicolumnas no será necesario añadir marcado extra para repartirlo en bloques estancos. La información se repartirá de forma dinámica y automática entre las distintas columnas. Y cada columna conformará un "slaider".

Las pestañas o Tabs de navegación

Para construir los 6 elementos para navegar entre columnas recurro a un viejo conocido: inputs y su pseudoclase asociada :checked. No entraré en detalles, pues ya lo hemos visto en el blog en muchas otras demos previas. Así que sólo unos apuntes de los detalles particulares de esta demo.

Sólo muestro un máximo de tres label a la vez. Y la seleccionada siempre en medio. Así que la anchura de cada etiqueta tiene que ser como máximo 1/3 del section que aloja toda la demo.

Para no tener que andar calculando a mano y poder manejarlas en bloque las label están contenidas en un elemento nav:

nav { position: absolute; top: 0; width: 200%; /* ~ nº de tabs * 33´33% */ font-family: sans-serif; height: 10vh; line-height: 10vh;/* altura y centrado vertical */ font-size: 1rem; text-align: center; transition: .5s steps(6); }

En las label el detalle más significativo es su anchura, que, como en la demo son 6, será la total de su padre dividido por su número.

label { width: calc(96% / 6); display: inline-block; color: #999; cursor: pointer; }

Si te fijas en el argumento de la función Css calc() no uso un valor de 100% (de la anchura del nav) sino menor. Es para compensar el espacio de separación entre elementos inline-block. Podría haber elegido cualquier otro método.

Antes de seguir, un detalle que seguro que te estás planteando. El nav está posicionado de forma absoluta y ni en el section ni en el article he dejado espacio en la parte superior para él.

En esta ocasión ese hueco lo hago con ayuda del pseudoelemento section::before

section::before { content: ''; background: #448; display: block; width: 100%; height: 10vh; }

No solo se encarga de hacer hueco para el nav, también pone el color de fondo sobre el que se muestran las etiquetas que actúan como pestañas de selección.

Pero lo más importante no es eso. Si recuerdas, muestro la etiqueta seleccionada en el centro, eso significa que al seleccionar la primera queda un hueco a su izquierda y a la derecha de la última. Pues teniendo este pseudoelemento ahí puedo desplazar todo el nav sin complicarme en los cálculos.

Seleccionar y desplazar

Ya tenemos todo dispuesto. Sólo queda por construir las reglas para que el article se desplace y muestre la columna que corresponde y hacer lo mismo con las labels.

La navegación

#col-1:checked ~ nav {left: 33%} #col-2:checked ~ nav {left: 0%} #col-3:checked ~ nav {left: -33%} #col-4:checked ~ nav {left: -66%} #col-5:checked ~ nav {left: -99%} #col-6:checked ~ nav {left: -133%}

Partimos de una posición inicial con el primer input marcado y el nav posicionado un 33% a la izquierda. El primer label aparece en el centro. Con los distos inputs marcados vamos desplazando el nav otro 33% a su izquierda.

De esta forma la última también queda en el centro con su hueco vacío a su derecha.

Las columnas van y vienen

Del desplazamiento de las columnas para dejar visible sólo la seleccionada se encargan las reglas siguientes:

#col-1:checked ~ article {left: 0%} #col-2:checked ~ article {left: -100%} #col-3:checked ~ article {left: -200%} #col-4:checked ~ article {left: -300%} #col-5:checked ~ article {left: -400%} #col-6:checked ~ article {left: -500%}

El resto son detalles menores y sólo a efectos hornamentales para terminar de pulir la demo. Excepto quizás el detalle para ir a la primera o a la última columna.

Son sólo un par de labels para el primer y último imput añadidos antes de cerrar el section y posicionados de forma absoluta.

<label class='inicio' for='col-1'></label> <label class='final' for='col-6'></label> </section>

Ver Demo a Full

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso