Cómo crear un acordeón de contenido basado en CSS
En el tutorial de hoy vamos a aprender cómo podemos crear un Acordeón de contenido horizontal y vertical utilizando CSS3.. Hay muchos complementos de jQuery que pueden hacer este trabajo por ti, pero ¿qué haces si el visitante tiene Javascript desactivado? Entonces, el acordeón no funcionará correctamente. Si su acordeón está puramente en CSS, entonces funcionará para todos sus visitantes..
Vamos a crear un horizontal y vertical contenido acordeon. Al hacer clic en el texto del título, la diapositiva se abrirá mostrando el contenido completo, y aquí hay una vista previa rápida (capturas de pantalla) cómo se ven.
¿Te gusta lo que ves? Que comience la codificación!
1. Preparando HTML y Contenido
Para empezar vamos a crear el HTML para el acordeón..
La estructura necesita un contenedor. div y luego tener un sección Para cada deslizamiento en el acordeón. En este ejemplo vamos a tener 5 diapositivas. Cada una de las diapositivas tendrá un título y un párrafo para el contenido..
Sobre nosotros
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
Servicios
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
Blog
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
portafolio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
Contacto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
Ahora que tenemos nuestras diapositivas podemos empezar a estilizar el acordeón..
2. Estilo CSS
Primero tenemos que estilizar el contenido. div del acordeón. Esto nos dará una idea de cómo mostrar cada una de las diapositivas y cada uno de los titulares..
/ * Definir cuadro de acordeón * / .accordion ancho: 830px; desbordamiento: oculto; margen: 10px auto; color: # 474747; fondo: # 414141; relleno: 10px;
A continuación vamos a crear los titulares para cada una de las diapositivas..
.sección de acordeón flotar: izquierda; desbordamiento: oculto; color: # 333; cursor: puntero; fondo: # 333; margen: 3px; sección .accordion: hover background: # 444;
Estamos estableciendo que el color de fondo sea gris oscuro en la sección para ser el título donde los visitantes harán clic para mostrar la diapositiva. Estamos usando esta sección tanto para el título como para el contenido, lo que significa que podemos usar menos HTML y reutilizar el título de la diapositiva como el título del contenido..
.sección de acordeón p mostrar: ninguna;
En este momento, todas las diapositivas se cerrarán, por lo que debemos asegurarnos de que el párrafo esté oculto de la vista hasta que la diapositiva esté abierta, por lo que, por ahora, establezca la visualización del párrafo en Ninguno.
.sección de acordeón: después de posición: relativa; tamaño de fuente: 24px; color: # 000; font-weight: negrita; sección de acordeón: nth-child (1): after content: '1'; sección de acordeón: nth-child (2): after content: '2'; sección de acordeón: nth-child (3): after content: '3'; sección de acordeón: nth-child (4): after content: '4'; sección de acordeón: nth-child (5): después de content: '5';
Con las diapositivas cerradas, queremos mostrar un número en la parte inferior del título para indicar en qué diapositiva estamos. Para esto vamos a usar CSS para agregar contenido después del título de la sección, esto se puede hacer usando el :después selector de pseudo-clase.
Ahora que hemos creado el título de la diapositiva, podemos hacer que el evento haga clic para mostrar la diapositiva en el acordeón. Pero hay un problema, CSS no tiene un evento de clic, por lo que el acordeón normalmente se crea mediante el uso de jQuery, por lo que podemos adjuntar un evento de clic al texto del título..
Necesitamos imitar el evento de clic en CSS que se puede hacer usando el :objetivo selector de pseudo-clase.
3. Usando :objetivo Selector de pseudo-clase
:objetivo Nos permite diseñar el identificador del fragmento. A veces usamos una etiqueta de anclaje en la página para señalar un lugar en la página. Al hacer clic en el enlace del carné de identidad en la etiqueta de anclaje se convierte en el objetivo y puede aplicar un estilo utilizando el :objetivo selector.
Para agregar esto al acordeón necesitamos agregar un enlace alrededor del título que apunta a un carné de identidad de la diapositiva.
Sobre nosotros
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam sempre mauris sit amet justo tempor nec nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non sempre mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consecuencia. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque en eu lorem.
.sección de acordeón: objetivo fondo: #FFF; relleno: 10px; sección .accordion: target: hover background: #FFF; sección de acordeón: objetivo h2 ancho: 100%; sección de acordeón: objetivo h2 a color: # 333; relleno: 0; sección .accordion: target p display: block; .accordion section h2 a padding: 8px 10px; bloqueo de pantalla; tamaño de fuente: 16px; fuente-peso: normal; color: #eee; texto-decoración: ninguno;
El código anterior cambiará el tamaño de la diapositiva para ajustarse al resto del acordeón y cambiará el color de fondo a blanco. El párrafo estaba oculto, así que ahora, en el objetivo, debemos mostrar el párrafo.
Ahora, al hacer clic en el título del acordeón, la diapositiva cambiará de estilo para mostrar el contenido de la diapositiva..
4. Acordeón horizontal
El código anterior creará el acordeón general, ahora podemos comenzar a realizar los cambios de CSS para las diferencias entre el acordeón horizontal y vertical. Ambos acordeones tienen la misma funcionalidad pero el estilo del titular sería diferente.
.sección horizontal ancho: 5%; altura: 250px; -moz-transición: ancho de 0.2s fácil de sacar; -webkit-transición: ancho 0.2s de facilidad; -o-transición: ancho 0.2s fácil de sacar; transición: ancho 0.2s facilidad de salida;
Primero configuramos el anchura de la sección del titular al 5% por lo que es una diapositiva cerrada. Como la sección es tanto el título como el contenido de la diapositiva, debemos agregar la animación para mostrar el contenido utilizando la propiedad de transición..
/ * Coloque el número de la diapositiva * /. Sección horizontal: después de top: 140px; izquierda: 15px;
La posición del número en la diapositiva será la misma posición en cada título cerrado, estos se colocan de manera diferente a los títulos verticales.
/ * Encabezado de la diapositiva cerrada * / .horizontal section h2 -webkit-transform: rotate (90deg); -moz-transform: rotate (90deg); -o-transformar: rotar (90deg); transformar: girar (90deg); ancho: 240px; posición: relativa; izquierda: -100px; arriba: 85px; / * En el mouse sobre la diapositiva abierta * / .horizontal: target width: 73%; altura: 230px; .horizontal: target h2 top: 0px; izquierda: 0; -webkit-transform: rotate (0deg); -moz-transform: rotate (0deg); -o-transformar: rotar (0deg); transformar: rotar (0deg);
El código anterior cambiará el tamaño de la diapositiva para ajustarse al resto del acordeón. El título se giró verticalmente para desplazarse hacia abajo, pero ahora, con la diapositiva abierta, necesitamos cambiar el texto para que sea horizontal girando el texto de nuevo a 0 grados.
5. Acordeón vertical
El acordeón vertical funciona de la misma manera que el acordeón horizontal, excepto que necesitamos cambiar el altura en vez de anchura y no necesitamos cambiar la alineación del texto.
.sección vertical ancho: 100%; altura: 40px; -webkit-transición: altura 0.2s fácil de quitar; -moz-transición: altura 0.2s fácil de salir; -o-transición: altura 0.2s fácil de sacar; transición: altura 0.2s fácil de sacar; / * Establecer la altura de la diapositiva * / .vertical: target altura: 250px; ancho: 97%;
Sobre el objetivo evento del acordeón vertical vamos a cambiar el altura del titular para mostrar la diapositiva.
.sección vertical h2 posición: relativa; izquierda: 0; arriba: -15px; / * Establezca la posición del número en la diapositiva * / .vertical section: after top: -60px; izquierda: 810px; sección vertical: objetivo: después de izquierda: -9999px;
Lo anterior cambiará el posición del texto del título en la diapositiva cerrada. Con la diapositiva cerrada tenemos que configurar el posición del número que se encuentra a la derecha del acordeón. Cuando la diapositiva está abierta, necesitamos ocultar este número en el titular cuando se establece el objetivo, por lo que cambiamos la posición izquierda de la pantalla.
Ahora, al hacer clic en el título del acordeón, la diapositiva cambiará de estilo para mostrar el contenido de la diapositiva..
Nota del editor: Esta publicación está escrita por Paul Underwood para Hongkiat.com. Paul es un desarrollador web PHP de Bristol, Reino Unido. Escribe tutoriales sobre desarrollo web: los temas principales incluyen PHP, jQuery, CSS3 y HTML5. También registra fragmentos de código útiles en Paulund.co.uk.
