¿Quién tiene dos pulgares y le encanta empujar los límites de CSS? Este chico. Saltemos a un proyecto que hace precisamente eso. Es bastante experimental y no pasará la policía semántica, pero te enseñará muchísimo sobre tácticas avanzadas de CSS y será muy divertido.
Lo que vamos a construir es un control deslizante de acordeón horizontal CSS puro. Podrás insertar tantas diapositivas como desees, cada una con contenido único y cada una accesible a través de un evento de clic, todas sin un toque de JavaScript. ¿Imposible dices? ¡Nunca!
Lo que estamos construyendo
El producto final de los esfuerzos de hoy será un menú de acordeón horizontal deslizante, animado y seleccionable. Queremos algunas barras estrechas que, al hacer clic, se expandan para mostrar contenido oculto.
Manifestación: Haga clic aquí para lanzar.
CSS pulsable
Como usted bien sabe, CSS no admite eventos de clics, así que ¿cómo diablos vamos a hacer que esto se mueva de una diapositiva a otra? Podríamos tomar el camino fácil y usar un vuelo estacionario, pero ¿dónde está la diversión en eso? En su lugar, intentemos algo un poco más difícil y secuestramos un conjunto de botones de radio.
Con los botones de opción, tenemos todo lo que necesitamos: un grupo de elementos en los que se puede hacer clic, donde solo se puede seleccionar uno y ese elemento es fácil de identificar y diseñar. ¡Perfecto! ¿Semántico? ¿No exactamente? Si desea hacer esto de una manera que resista en una revisión por pares, use JavaScript. Hoy simplemente estamos presionando CSS hasta que podamos ver si podemos aprender algo en el camino.
Paso 1: Marco HTML
Construir un nuevo proyecto de diseño web es como construir una casa. El primer paso es obtener un marco básico pero sólido en el que puedas construir el resto. Para lograr esto, pondremos un HTML inicial.
Lo primero que necesitamos es una lista desordenada dentro de un elemento de formulario. Esto parece un poco extraño en este punto, pero tendrá más sentido en un minuto.
Aquí cada elemento de la lista representa una diapositiva. Si desea cinco diapositivas, debe tener cinco elementos de lista. Nuestro proyecto de prueba utilizará tres diapositivas. Entonces, ¿por qué el elemento de forma? Atacemos eso a continuación.
Dentro de cada elemento de la lista, vamos a colocar tres elementos: una entrada, una etiqueta y div. Las entradas serán botones de radio, que se adjuntan a las etiquetas. Juntos, estos dos elementos conformarán nuestros controles de acordeón. El div mantendrá el contenido que queremos dentro de cada diapositiva.
Como mencioné anteriormente, aquí usamos botones de radio porque brindan toda la funcionalidad que necesitamos para lograr esta pequeña hazaña. El problema, por supuesto, es que parecen botones de radio. Podemos arreglar esto aunque con la magia de CSS.
Paso 2: Anular los estilos de formulario
Nuestro próximo reto es hacer que los botones de radio sean bonitos. Así es como se verá nuestro HTML sin ningún estilo:
Como puede ver, entre las viñetas de la lista y los botones de radio, tenemos nuestro trabajo hecho para nosotros. Lo primero es lo primero, sin embargo, antes de que hagamos otra cosa, arrojemos el reinicio de un hombre perezoso:
Esto asegura que nuestros márgenes y relleno funcionarán en varios navegadores y que cualquier relleno no interferirá con nuestras dimensiones explícitamente establecidas. Border-box hace esto manipulando el modelo de caja CSS estándar para que sea un poco más fácil de usar.
Borrar la lista de estilos
A continuación, vamos a abordar algo fácil. Esos puntos pueden eliminarse con un bloque de estilo simple con el que estoy seguro de que está familiarizado.
Ocultar los botones de radio
Ahora es el momento de apuntar a los botones de radio y sacarlos de la pantalla. Para hacer esto, simplemente estableceremos su posición en absoluta y luego los colocaremos lejos.
Tenga en cuenta que mi selector aquí es super genérico. Si está colocando este objeto en cualquier proyecto, asegúrese de no apuntar a todas las entradas como lo he hecho aquí. Tire la cosa completa en un div con una clase y apunte solo las entradas asociadas con esa clase.
Estilo de la etiqueta
Ahora nuestro botón de radio está oculto, pero ¿por qué diablos decidimos hacer eso? ¿Cómo vamos a controlar el acordeón? La respuesta, por supuesto, es que la etiqueta de un botón de radio sirve como un punto de clic alternativo y se puede diseñar más libremente. Esto significa que, incluso con el botón de opción desactivado, nuestra funcionalidad aún estará presente en las etiquetas, todo lo que tenemos que hacer es hacerlos presentables.
Aquí dividí mi código en tres partes para que podamos recorrerlo fácilmente. El primer fragmento rige el factor de forma de la etiqueta: su altura, ancho, margen, desbordamiento, etc. Básicamente, hemos convertido las etiquetas en rectángulos grandes que se colocarán uno al lado del otro.
El siguiente es el trozo de estilos que gobierna el aspecto de las etiquetas. Hemos establecido el fondo en gris, hemos alineado al centro el texto (los pequeños números) y hemos establecido el tamaño de la fuente.
Finalmente, configuramos algunas transiciones para que los cambios que vamos a hacer más adelante sean animados.
Paso 3: Más etiqueta de estilo
Con ese último trozo de estilo, hemos transformado completamente nuestros aburridos botones de radio en algo que se parece mucho más a lo que estamos buscando lograr.
Sin embargo, no me gusta que no haya una definición entre las tres pestañas, así que ayudémoslo con un poco más de estilo.
Aquí hemos oscurecido la segunda pestaña para que se destaque entre la primera y la tercera, agregue otra transición y establezca los estilos de desplazamiento para oscurecer aún más las pestañas cuando el usuario las agrupa. Esto hará que nuestras pestañas se vean mucho mejor:
Etapa 4: Diapositiva HTML
Ahora que tenemos nuestras pestañas en la forma que queremos, retrocedamos y terminemos nuestro HTML. Este contenido se hubiera interpuesto en el camino si lo hubiéramos insertado antes, pero ahora debería permanecer oculto.