.
El cambio de pestañas se produce mediante la interacción del atributo marcado en la etiqueta y la pseudoclase:checked, estrechamente vinculada mediante identificadores en CSS. Es en la elaboración de este método donde tropieza el viejo y famoso freno al progreso. explorador de Internet 8, a partir de la versión 9 todo funciona de la mejor manera.

Sin problemas llegamos a la parte más interesante, diseñar nuestras pestañas usando la magia del CSS. Aquí las cosas son aún más simples, no tiene sentido describir específicamente cada propiedad y parámetro, escribí algunas explicaciones en el código fuente, así que creo que no será difícil descubrir qué va, dónde y por qué, pero si tienes preguntas o encuentra un error, escribe en los comentarios, definitivamente responderé y te ayudaré.

CSS3

/* Contenedor de pestañas básico */ .tabs ( ancho mínimo: 320 px; ancho máximo: 800 px; relleno: 0 px; margen: 0 auto; ) /* Estilos de sección de contenido */ .tabs>sección ( mostrar: ninguno; relleno : 15px; fondo: #fff; borde: 1px sólido #ddd; ) .tabs>sección>p (margen: 0 0 5px; altura de línea: 1,5; color: #383838; /* adjuntar la animación */ -webkit-animation -duración: 1s; duración de la animación: 1s; -webkit-animation-fill-mode: ambos; -webkit-animation-name: fadeIn; propiedades de opacidad */ @-webkit-keyframes fadeIn (de (opacidad: 0;) a ( opacidad: 1; ) ) @keyframes fadeIn ( de ( opacidad: 0; ) a ( opacidad: 1; ) ) /* Ocultar las casillas de verificación * / .tabs>input ( display: none; posición: absoluta; ) /* Estilos de interruptores de pestaña */ .tabs>label ( display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; border: 0px solid #ddd; border-width : 1 px 1 px 1 px; fondo: #f1f1f1; radio de borde: 3px 3px 0 0; ) /* Iconos de fuentes de Font Awesome en formato Unicode */ .tabs>label:before ( font-family: fontawesome; font-weight: normal; margin-right: 10px; ) .tabs>label:before ( contenido: " \f19a"; ) .tabs>label:before ( contenido: "\f17a"; ) .tabs>label:before ( contenido: "\f13b"; ) .tabs>label:before ( contenido: "\f13c"; ) /* Cambia el estilo de los conmutadores de pestañas al pasar el mouse */ .tabs>label:hover ( color: #888; cursor: pointer; ) /* Estilos para la pestaña activa */ .tabs>input:checked+label ( color: # 555; borde -arriba: 1px sólido #009933; borde-abajo: 1px sólido #fff; fondo: #fff ) /* Activando secciones usando la pseudoclase: marcada */ #tab1:checked~#content-tab1, # tab2:checked~# content-tab2, #tab3:checked~#content-tab3, #tab4:checked~#content-tab4 ( display: block; ) /* Eliminar texto de los botones de opción * y dejar íconos en pantallas pequeñas */ @media screen y (max -width: 680px) ( .tabs>label ( font-size: 0; ) .tabs>label:before ( margin: 0; font-size: 18px; ) ) /* Cambiar el relleno de * interruptores para pantallas pequeñas */ @ media screen y (ancho máximo: 400 px) ( .tabs>label ( padding: 15 px; ) )

Puedes diseñar las pestañas () como quieras, todo lo del ejemplo es solo un ejemplo, mi visión momentánea del producto, nada más. Puede encontrar los valores Unicode de los íconos de fuente que necesita en el sitio web del desarrollador. Para hacer esto, simplemente haga clic en el ícono seleccionado y copie el código digital emitido, algo como esto: \f13b.
Tenga en cuenta que cuando reduce el tamaño de la ventana del navegador, las pestañas se ajustan automáticamente al tamaño actual hasta un cierto valor (en el ejemplo 680 px), después de este valor, los títulos de texto de las pestañas desaparecen, dejando iconos. Esto garantiza la máxima compacidad de todo el bloque de pestañas; todo lo que queda es elegir los iconos correctos que coincidan con el significado del contenido presentado dentro de las pestañas.

Vea un ejemplo en vivo de cómo funcionan las pestañas, descargue las fuentes, experimente con los parámetros y cree, cree, cree...

Si está cansado de trabajar con plantillas en inglés y sueña con la oportunidad de utilizar plantillas en ruso, definitivamente estará contento con buenas noticias. Los mismos aparecieron en el mercado de TemplateMonster. soluciones listas para usar, que necesitas. Sí, sí, en el sitio ahora puedes encontrar los mejores. Las plantillas localizadas son exactamente lo que necesita si desea construir su proyecto en línea en un tiempo mínimo. Además de que los textos de las plantillas fueron escritos manualmente, cuentan con todas las herramientas necesarias para crear un sitio web profesional.

Con todo respeto Andrés.

Continuando con el post anterior sobre diseñar elementos de selección, me gustaría contarte cómo hacerlo completamente. pestañas adaptativas sin usando javascript , posicionamiento absoluto y hacks de enlaces.

Para empezar, me gustaría decir que no estoy pidiendo que se abandone JavaScript en favor de CSS únicamente; a continuación se presentará solo una de las formas de implementar pestañas. Hay muchas situaciones en las que este enfoque no le conviene y en las que no puede prescindir de JS, pero no se trata de eso ahora.

Entendamos qué queremos ver como resultado del trabajo y qué requisitos le planteamos:

1. Trabajar sin JavaScript,
2. No hay conexión con el número de pestañas (podemos usar un widget por diferentes paginas con diferente contenido en su interior),
3. Adaptabilidad,
4. Máxima compatibilidad entre navegadores y plataformas,
5. La interfaz de usuario más conveniente y comprensible,
6. No hay restricciones sobre el contenido interno de las pestañas, ya sea texto, contenido multimedia o diseño dentro de la pestaña.

Visualmente debería verse así:

Antes de mostrar tu opción pestañas sin JS, Me gustaría hablar sobre algunas opciones de implementación que encontré en el proceso de resolver este problema.

Opcion uno

La persona que ideó este método claramente quería burlarse de los usuarios, o es uno de los visitantes de Reddit que creó esos controles de volumen tan "prácticos". Este enfoque me pone nervioso.

La esencia del método es la siguiente:

Los enlaces se utilizan como encabezados (los propios botones) de las pestañas, en el atributo href, que contiene la identificación de la pestaña correspondiente: un div o cualquier otro elemento. La pestaña activa se selecciona usando la pseudoclase:objetivo.

Funciona así:

Como habrás notado, tenemos algunos problemas al utilizar este método:

1. Cuando hacemos clic en la pestaña, la página comienza a saltar, ya que el navegador nos envía a donde lleva este enlace. Por supuesto, esto se puede evitar, pero sin JS no hay manera.
2. El título de la pestaña activa no está resaltado; esto se puede hacer, pero es extremadamente problemático.
3. Inicialmente no hay pestañas activas (ya que aún no hemos hecho clic en los enlaces) y tenemos que recurrir a un hack y activar la tercera pestaña seleccionando la primera de esta manera no funcionará;
4. Adaptabilidad muy controvertida: eso sí, las pestañas se reordenan para nueva línea cuando la pantalla se estrecha y el contenido de la pestaña se estrecha con ella, pero no se ve muy bien. Este problema se puede solucionar mediante consultas de medios, pero dado que no vamos a estar atados al número de pestañas, el problema persistirá en algunos tamaños de pantalla.

Llegamos a una conclusión justificada: este método no es adecuado para nosotros ya que no satisface la mayoría de los requisitos. La implementación es terrible y no recomendaría usarla.

Opción dos

Este método creando pestañas sin JavaScript Ya es más práctico, aunque también tiene algunos problemas de aplicación. La esencia del método es la siguiente: los elementos checkbox y label se usan para los títulos de las pestañas, y usando la pseudoclase:checked y otro elemento div, podemos mostrar el contenido solo de la pestaña activa y ocultar todas las demás:

Entrada del contenedor de pestañas: marcado + etiqueta + .tab-item (pantalla: bloque;)

Así es como funciona:

Como habrás notado, en este ejemplo estamos usando posición: absoluta; para colocar los títulos de las pestañas en la parte superior y el contenido de las pestañas en la parte inferior. Esto crea ciertos problemas:

1. Completamente inadaptable. Al cambiar el tamaño de la pantalla, las pestañas caen y el contenido de la pestaña las cubre. Esto se puede solucionar: hacer desplazamiento horizontal de pestañas, esta solución tiene cabida, pero no me gusta mucho.
2. Dado que usamos el posicionamiento absoluto para mostrar el contenido de las pestañas, tendremos que especificar una altura fija de las pestañas; de lo contrario, se superpondrán al contenido que está debajo (como se ve en el ejemplo), lo que significa que no podemos usar este enfoque con un número de pestañas previamente desconocido.

Por supuesto, en algunos casos se puede utilizar este método, por ejemplo, cuando se conoce de antemano el número de pestañas y la cantidad de contenido que contienen. Pero buscamos una solución universal, por lo que este enfoque no es aplicable en nuestro caso.

Solución

La tercera opción, que también es la solución, es una modificación del segundo método. Funciona exactamente igual, pero no usaremos posicionamiento absoluto ni la propiedad flotante para los títulos.

EN este método Usamos el ahora de moda flexbox para colocar pestañas y su contenido. La belleza de flexbox aquí es que podemos designar qué elementos se muestran primero y cuáles al final. Esto se puede hacer usando la propiedad de orden: 1; , que por defecto es cero.

La adaptabilidad de las pestañas también se logra mediante la propiedad flex flex-grow: 1; , que permite que las pestañas se extiendan a lo largo de todo el ancho del contenido, por lo que no tenemos que preocuparnos por mostrar una cantidad diferente de pestañas. También podemos colocar contenido de diferentes tamaños dentro de cada pestaña, esto no afectará la visualización del contenido después de ellas.

Este enfoque funciona en todos los navegadores modernos, incluidos los móviles. De las propiedades que son inusuales para muchos, solo se usa Flexbox, y ha sido ampliamente respaldado durante mucho tiempo. EN Navegadores Firefox, Chrome, Safari y Opera, no encontré ningún problema con el funcionamiento de las pestañas.

Puede comprobar este enfoque en jsfiddle o en sus propios proyectos. Me alegraría ver otras propuestas de soluciones a este problema en los comentarios.