2 Demos: navegación por pestañas (tabs) puro Css con :checked 5.12.13
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
Uno 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:
- Tabs o pestañas puro css para una landing page. Inputs y sus labels separados
- Múltiples labels por cada input y un input para controlarlas a todas
- :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 full ⌘ Descargar 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 full ⌘ Descargar 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.
Kseso
the obCSServer ᛯ 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 Kseso
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 :(
ResponderEliminarmarios jongos der perlente ._.
ResponderEliminar