Probablemente ya haya encontrado un acordeón en un sitio web. Existen en muchas formas, pero su uso sigue siendo el mismo.
Puedes crear un acordeón CSS y hacer uso de los beneficios, en este artículo exploraremos precisamente eso.
Los acordeones son una excelente manera de mostrar información en una determinada sección con un encabezado y ahorrar espacio. Por lo general, estos acordeones se colapsarán de alguna manera, por lo que se puede abrir otro.
Primero entendamos qué es un acordeón y luego pasemos a algunos Menús de acordeón CSS.
¿Qué es un acordeón CSS?
Un acordeón CSS es un elemento de diseño web que le permite alternar información cuando se hace clic. Generalmente visto en las páginas de preguntas frecuentes, un acordeón tiende a tener un título y un ícono y usa una transición para mostrar su contenido cuando se hace clic.
El principal beneficio de un acordeón desde el punto de vista de la experiencia del usuario es que proporciona una manera fácil de ahorrar espacio y evitar enlaces innecesarios a otras páginas. Permite presentar la información principal (títulos) y mostrar únicamente el contenido que el usuario solicita al hacer click sobre ellos.
Se puede hacer un acordeón en CSS puro y proporcionar excelentes resultados. Sin embargo, no es raro ver acordeones más avanzados que también usan JavaScript. Especialmente si necesitan compartir el estado del acordeón con la aplicación web de alguna manera.
18 asombrosos ejemplos de CSS de acordeón
Pasemos a algunos ejemplos y veamos cómo se ve un acordeón CSS real, como dije antes, vienen en diferentes formas y tamaños, algunos son CSS puro y otros requieren un poco de JavaScript.
Tenemos dos menús de acordeón CSS que muestran diferentes características.
A menudo, algunos menús de acordeón solo permiten abrir un elemento a la vez, pero este ejemplo permite que uno u otro lo pruebe usted mismo.
Solo requiere el uso de CSS, este es bastante avanzado para no necesitar JavaScript, ya que incluso tiene un botón para cerrar todo. Lo hace mediante el uso de casillas de verificación HTML, algo muy inteligente.
2. Ejemplo de acordeón de tres dimensiones
Este es uno de los ejemplos de acordeones más hermosos que hemos encontrado y está hecho solo en CSS puro.
Creado originalmente por Ahmad Emraneste acordeón muestra un diseño más elaborado prestando atención a los detalles y creando una apariencia tridimensional.
Este menú de acordeón CSS aparece cuando abres una sección.
Cuando abre un elemento, el otro se cerrará, lo que significa que solo se puede abrir uno a la vez.
El encabezado es una gran característica porque le permite usar varios en una página y tenerlos titulados.
4. Acordeón HTML y CSS
Este es un acordeón simple pero hermoso que utiliza una animación sutil para el texto cuando el elemento se activa.
Es un gran ejemplo de un acordeón que puede usar para la sección de preguntas frecuentes de su página.
Permite múltiples elementos abiertos, utiliza una animación de diapositivas e incluye iconos de flecha en cada elemento que también se animan cuando el elemento se abre o se cierra.
Este usa JavaScript para lograr su efecto.
Con este ejemplo de CSS de acordeón, tenemos una interfaz de usuario de diseño moderno y limpio que tiene una animación fluida.
También tiene una animación más avanzada entre cada elemento cuando se abren y cierran.
Un simple Acordeón solo CSS menú usando una transición rápida para alternar los submenús.
Solo se puede abrir un elemento a la vez y automáticamente cierra cualquier otro elemento si estuviera abierto.
Al hacer clic en el elemento nuevamente, también se cerrará un elemento activo si está abierto.
Un menú de acordeón CSS simple pero efectivo.
La animación que utiliza para deslizarse entre los elementos es fluida y solo se puede abrir uno a la vez.
Podrías cambiar fácilmente este diseño con diferentes colores y sombras.
8. Deslizador de imagen de acordeón
Otro hermoso ejemplo de un control deslizante de imagen de acordeón horizontal.
Este muestra cada imagen de manera uniforme, pero una vez que pasa el mouse sobre ellas, muestran una versión más grande de la imagen.
Cada imagen tiene un título y se puede hacer clic, e incluso hay una descripción.
9. Acordeón de imagen horizontal
No todos los menús de acordeón CSS tienen que contener texto o información.
Este gran ejemplo nos muestra cómo se puede usar el acordeón para exhibir creativamente imágenes que podrían contener más elementos.
Este ejemplo también usa filtros CSS, que se aplican a las imágenes.
10 Acordeón CSS con iconos
Un ejemplo moderno y minimalista de Accordion CSS que tiene íconos.
El cuerpo de los artículos de acordeón está acolchado en cada lado, lo que le da un aspecto atractivo.
Solo construido con HTML y CSS, sin JavaScript. También tiene una animación suave entre elementos.
Los menús de acordeón CSS se usan ampliamente para las páginas de preguntas frecuentes, son una manera fácil de mostrar mucha información sin que el lugar se vea abarrotado.
Cada elemento se puede abrir o cerrar cómodamente de forma independiente.
Este ejemplo de acordeón está hecho en CSS puro, no se requiere JavaScript. Puedes adaptar fácilmente los estilos y colores a tu marca.
Un hermoso ejemplo de un menú de acordeón CSS simple.
Utiliza una animación de acercamiento y alejamiento para cada elemento.
Cada elemento también se puede abrir o cerrar de forma independiente.
13 Acordeón CSS puro simple
Un ejemplo fresco de un menú de acordeón CSS simple.
Solo se puede abrir un elemento a la vez, hay un bonito ícono más a la derecha que se puede cambiar por algo más relevante.
CSS puro, no se requiere JavaScript para este.
14 Acordeón CSS puro con contenido
Un menú de ejemplo de acordeón CSS más avanzado que ofrece algunas funciones excelentes.
El principal punto de venta con este es que es CSS puro pero le permite tener múltiples acordeones internos dentro del principal, intente expandir el texto en cada elemento principal.
No se requiere JavaScript para que todo esto funcione.
A acordeón CSS puro menú que tiene algunas características interesantes.
Cuando abre o cierra un elemento, cada elemento pasará a su posición de apertura o cierre.
Este ejemplo de Accordion CSS está muy bien diseñado con números y funciona bien como preguntas frecuentes, como puede ver.
Un menú de acordeón CSS suavemente animado que tiene un efecto de desplazamiento sobre los encabezados de cada elemento.
Cada elemento se puede configurar a una altura fija y se puede activar el desplazamiento cuando el contenido se desborda.
En general, un gran ejemplo y construido con CSS puro.
Un elegante ejemplo de Accordion CSS donde cada elemento se puede abrir o cerrar de forma independiente.
Viene con íconos en el lado derecho, que podrían cambiarse fácilmente por algo más apropiado.
Tiene flechas de apertura y cierre para indicar qué elemento está abierto. Y una suave animación deslizante.
hemos visto horizontales Menús de acordeón CSS con imágenes, pero ¿qué pasa con el texto? Bueno, este ejemplo es solo eso.
Aquí tenemos un hermoso ejemplo simple, desliza hacia la izquierda y hacia la derecha para abrir o cerrar elementos de acordeón.
Bueno para mucho texto y para mantener la información en una posición horizontal en la página web.
Sabemos que los menús de acordeón son excelentes para las páginas de preguntas frecuentes.
Este ejemplo es sorprendente y muestra cómo se puede usar un menú de acordeón dentro de una sección específica en una página web, esto no tiene que estar en una sola página, podría estar ubicado en una página de destino.
El menú de acordeón en sí tiene algunos efectos de desplazamiento sutiles agradables y se abren rápidamente sin ninguna animación.
20 Imagen Deslizante CSS Acordeón
Una forma diferente de mostrar imágenes que podrían contener más información, tendría que agregarla usted mismo.
Sin embargo, el diseño aquí es muy interesante y la animación entre cada elemento es fluida y atractiva.
CSS puro, sin JavaScript también.
Los menús de acordeón son útiles porque ayudan a mantener un diseño limpio y moderno. Ayudan a despejar el espacio en un sitio web ocultando texto o información.
Algo así como una página de preguntas frecuentes, no todos los usuarios querrán ver todo el texto de una sola vez, es posible que solo necesiten ver preguntas específicas, y pueden elegir cuáles abrir, es por eso que un menú de acordeón es perfecto. para este tipo de caso de uso.
En general, ayudan a mejorar la experiencia del usuario y son convenientes para mostrar mucha información a la vez.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
