4 maneras de crear impresionantes acordeones solo para CSS
Los acordeones de contenido hacen un patrón de diseño útil. Puede usarlos para muchas cosas diferentes: para menús, listas, imágenes, extractos de artículos, fragmentos de texto e incluso videos
La mayoría de los acordeones por ahí dependen de JavaScript, principalmente en jQuery, pero como el uso de técnicas avanzadas de CSS3 se generalizó, también podemos encontrar buenos ejemplos que solo usa HTML y CSS, que los hacen accesibles en entornos con JavaScript deshabilitado.
Crear acordeones solo para CSS puede ser una tarea difícil, por lo que en esta publicación intentaremos Comprenda los conceptos principales que los desarrolladores utilizan cuando necesitan crear uno..
Al crear pestañas solo para CSS, generalmente hay dos enfoques principales, cada uno de ellos tiene dos casos de uso frecuente. El primer enfoque utiliza elementos de forma oculta, mientras que el segundo hace uso de Pseudo-selectores CSS.
1. El método del botón de radio
El método del botón de radio agrega una entrada de radio oculta y una etiqueta de etiqueta correspondiente a cada pestaña del acordeón. La lógica es simple: cuando el usuario selecciona una pestaña, básicamente verifica el botón de radio que pertenece a esa pestaña, de la misma manera cuando llena un formulario. Cuando hacen clic en la siguiente pestaña del acordeón, seleccionan el siguiente botón de opción, etc..
En este metodo, solo una pestaña puede estar abierta al mismo tiempo. La lógica del HTML se ve algo como esto:
Título del contenido (no use la etiqueta h1 aquí)
Algunos contenidos ...
p>
Necesitas agregue un par de etiquetas de radio por separado para cada pestaña en el acordeon El HTML solo no proporcionará el comportamiento deseado, también debe agregar las reglas CSS adecuadas, veamos cómo puede lograr eso.
Pestañas verticales de altura fija
En esta solución (ver la captura de pantalla a continuación), el desarrollador escondió el botón de radio con la ayuda de pantalla: ninguna; Regla, luego asignó una posición relativa a la etiqueta que contiene el título de cada pestaña y una posición absoluta a la etiqueta correspondiente. etiqueta: despues pseudo-elemento.
Este último sostiene el asa marcada con un signo + verde que abre las pestañas. Las pestañas cerradas también utilizan un mango marcado con verde “-” señales. En el CSS, las pestañas cerradas se seleccionan con la ayuda del elemento + selector de elementos.
También es necesario que el contenido de la pestaña abierta tenga una altura fija. Para hacer esto, seleccione el cuerpo de la pestaña abierta (marcada con la clase de contenido de la pestaña en el código HTML anterior) con la ayuda del selector CSS element1 ~ element2.
La lógica básica del CSS aquí es la siguiente:
entrada [tipo = radio] pantalla: ninguna; etiqueta posición: relativa; bloqueo de pantalla; etiqueta: después de contenido: "+"; posición: absoluta; derecha: 1em; entrada: marcado + etiqueta: después de contenido: "-"; entrada: marcado ~ .tab-content altura: 150px;
Puedes ver el CSS completo aquí en Codepen. El CSS está escrito originalmente en Sass, pero si hace clic en el “Ver compilado” botón, se puede ver el archivo CSS compilado.
Acordeón de imagen con botones de radio
Esta hermosa imagen de acordeón utiliza el mismo método de botón de radio, pero en lugar de etiquetas, el desarrollador aquí utiliza la etiqueta HTML figcaption para lograr el comportamiento del acordeón.
El CSS es algo diferente, principalmente porque en este caso las pestañas no se colocan verticalmente sino horizontalmente. El desarrollador usó el selector de elementos + elementos CSS (que se usó en el caso anterior para seleccionar los conmutadores) para garantizar que los bordes de las imágenes cubiertas permanezcan visibles..
Lee la guía detallada sobre cómo crear este elegante acordeón solo para CSS.
2. El método de la casilla de verificación
El método de casilla de verificación utiliza el tipo de entrada de casilla de verificación en lugar del botón de opción. Cuando el usuario selecciona una pestaña, básicamente marca la casilla correspondiente..
La diferencia en comparación con el método del botón de radio es que es es posible abrir más de una pestaña al mismo tiempo, al igual que es posible marcar más de una casilla de verificación dentro de un formulario.
Por otro lado, las pestañas no se cierran solas cuando el usuario hace clic en otra. La lógica del HTML es la misma que antes, solo en este caso necesita usar la casilla de verificación para el tipo de entrada.
Título del contenido (no use la etiqueta h1 aquí)
Algunos contenidos ...
p>
Casilla de verificación de altura fija acordeón
Si quieres pestañas de contenido de altura fija, la lógica del CSS es prácticamente la misma que en el caso del botón de radio, es solo que el tipo de entrada ha cambiado de radio a casilla de verificación. En este bolígrafo Codepen puedes echar un vistazo al código..
Casilla de control de altura de fluido Acordeón
Cuando se abren más de una pestaña al mismo tiempo, la visualización de las pestañas de altura fija puede afectar negativamente la experiencia del usuario, ya que la altura del acordeón puede aumentar significativamente. Esto se puede mejorar si cambiar la altura fija a la altura del fluido; eso significa que la altura de las pestañas abiertas se expande o encoge de acuerdo con el tamaño del contenido que contienen.
Para ello necesitas modificar la altura fija del contenido de la pestaña a una altura máxima, y utilizar unidades relativas:
entrada: marcado ~ .tab-content max-height: 50em;
Si desea comprender mejor cómo funciona este método, puede echar un vistazo a este Codepen.
3. El: Método objetivo
: target es uno de los pseudo-selectores de CSS3. Con su ayuda, puede vincular un elemento HTML a una etiqueta de anclaje de la siguiente manera:
Título de la pestaña
Contenido de la pestaña
Cuando el usuario haga clic en el título de una pestaña, se abrirá toda la sección gracias a la :objetivo pseudo-selector, y la URL también se cambiará al siguiente formato: www.some-url.com/#tab-1.
La pestaña abierta se puede diseñar en CSS con la ayuda de sección: objetivo … regla. Tenemos un excelente tutorial aquí en hongkiat sobre cómo puede crear acordeones agradables solo para CSS con el :objetivo Método tanto en diseños verticales como horizontales..
El principal defecto de la :objetivo el metodo es que cambia la URL cuando el usuario hace clic en las pestañas. Esto afecta el historial del navegador y el botón de retroceso del navegador no llevará al usuario a la página anterior, sino al estado anterior del acordeón.
4. El: método de desplazamiento
Este último defecto se puede superar si utilizamos el :flotar Pseudo-selector CSS en lugar de :objetivo, pero en este caso, las pestañas no reaccionarán al clic, sino al evento de desplazamiento. El truco aquí es que necesitas o bien ocultar los elementos no cubiertos, o reducir su anchura o altura - Dependiendo del diseño de las pestañas.
El elemento flotante debe hacerse visible, o establecerse en ancho / alto completo para que el acordeón funcione.
Los siguientes 3 acordeones solo para CSS fueron hechos con el método de desplazamiento, haga clic en los enlaces debajo de las capturas de pantalla para ver el código..
Acordeon horizontal de imagen
Acordeón sesgado
Acordeón activado por activación con estado predeterminado
