soy Kseso y esto EsCSS

2 Demos: navegación por pestañas (tabs) puro Css con :checked

Dos demos de navegación por pestañas o tabs en puro Css utilizando la pseudoclase :checked. Flexibles y fáciles de modificar.

2 Demos: navegación por pestañas (tabs) puro Css con :checked

Por Kseso ✎ 2

navegación por pestañas (tabs) pure Css con :checkedUno de los post del blog que más consultas ha suscitado para adaptarlo a las necesidades particulares de unos cuantos usuarios es la demo, con extensa explicación de los códigos, "Sistema de pestañas (tabs) Css"

La dificultad de adaptación creo que radica en que está basado en el uso de :target para mostrar el contenido seleccionado. Por las limitaciones inherentes a sus propias características y por el propio marcado de esa demo no es muy intuitivo realizar según qué cambios.

Por todo lo anterior siempre tuve en mente hacer alguna otra demos sobre este tipo de realizaciones de navegación por pestañas o tabs que supliera las carencias.

Así que llegó en momento de hacerlo. A continuación tienes dos sistemas de navegación por pestañas (tabs) realizadas en puro Css. Esta vez utilizando inputs y la pseudoclase checked para realizar el cambio.

Por si te perdiste en su día, estos artículos te ayudarán a comprender el funcionamiento de los distintos selectores Css que empleo y la desestructuración que encontrarás en los inputs y sus labels:

  1. Tabs o pestañas puro css para una landing page. Inputs y sus labels separados
  2. Múltiples labels por cada input y un input para controlarlas a todas
  3. :target y :checked

Pestañas a la derecha y en vertical

En esta primera demo las pestañas están colocadas en vertical a la derecha de las tabs.

See the Pen just another Css tabs (:checked) by Kseso (@Kseso) on CodePen

Ver demo a fullDescargar códigos (8Kb)

Pestañas arriba en horizontal

La segunda demo es una variación de la anterior en la que las pestañas se encuentran en la parte superior y en línea

See the Pen II just another Css tabs (:checked) by Kseso (@Kseso) on CodePen

Ver demo a fullDescargar códigos (8Kb)

En cualquiera de estas dos demos, para cambiar el contenido que quieras mostrar inicialmente al cargar la demo, sólo tienes que cambiar el código checked='checked' de un imput a otro.

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

Comentarios: 2

  1. A mi esta pseudoclase me parece genial, y se le da muy poca "bola", porque realmente es espectacular poder hacer cosas como estás sin usar javascript. Lo malo es que su compatibilidad en algunos navegadores móviles es nula y no funciona :(

    ResponderEliminar
  2. marios jongos der perlente ._.

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap