Esta cuadrícula es una forma divertida y agradable de mostrar varias piezas de información en la misma cantidad de espacio, al hacer que cada sección de la cuadrícula se desplace al hacer clic o al desplazarse, y mostrar contenido adicional.
En el proceso de creación veremos el marcado necesario, un poco de estilo y la respuesta de la grilla, así como la implementación de una fuente web de icono. También estudiaremos el jQuery necesario, así como las diferentes opciones disponibles.
Esto es lo que se verá una vez que hayamos terminado:
¡Como puedes ver, es muy simple! Hay un div con una ID de 'servicios' y con un nombre claro de clase flotante. Entonces dentro de eso hay seis diferentes
Esto es tan simple como lo haremos con el marcado, eso significa que si no hay JavaScript ni CSS, en realidad no romperá nuestro contenido, aún será visible (aparte de los iconos, pero como están vacíos no los veremos de todos modos). Así que esta es nuestra copia de seguridad, sin estilos y sin contenido de JavaScript:
Ahora que estamos seguros de que el contenido es seguro. Podemos pasar a nuestro CSS para que se vea bien, pero lo más importante es configurarlo para la funcionalidad de jQuery.
Vamos a dividir el CSS en tres partes; lo esencial que se necesita para que nuestro jQuery funcione, el código de fuente del icono y luego los estilos finales para que se vea bien. Así que aquí está la primera sección:
#services .service {width: 33%;float: left;padding: 0.5em;min-height: 200px;overflow: hidden;position: relative;border: 1px solid #eee;}@media screen and (max-width: 600px) {#services .service {width: 50%;}}@media screen and (max-width: 320px) {#services .service {width: 100%;}}#services .service .service-icon, #services .service .service-description {position: absolute;width: 100%;height: 100%;top: 0;left: 0;background: #fff;padding: 50px 0;color: #222;}#services .service .service-description {left: 100%;background: #249EC2;color: white;padding: 50px;}#services .service .service-description:hover { cursor: pointer; }
Entonces veamos qué está pasando aquí. Primero nos enfocamos en los envoltorios de cajas individuales (.service) y los arreglamos en la forma de la rejilla, dándoles un ancho fluido, una altura mínima y flotando hacia la izquierda (es por eso que el envoltorio general tiene una solución de flotación clara). Luego, lo que es importante es que oculten su desbordamiento (de lo contrario, veríamos el contenido adicional en todo momento) y su posición relativa. También estamos haciendo que esta cuadrícula sea más receptiva y amigable al usar un par de consultas de medios para algunos tamaños de pantalla diferentes y aumentar el ancho de cada celda. Este código significa que nuestra grilla comenzará en un diseño de 3 columnas con el tamaño de escritorio completo, y pasará a través de una columna doble y, finalmente, una columna al tiempo que reducirá el tamaño de la pantalla.
Ahora que los recuadros exteriores están en su lugar, nos dirigimos a las secciones internas, el .service-icon y .service-description. Hacemos estas posiciones absolutas (de ahí la altura mínima en el estilo anterior) y las posicionamos ambas en la parte superior izquierda (cambiaremos la posición de la descripción en un momento). Luego los hacemos 100% anchos y altos para que llenen su elemento principal, y el resto solo para efectos visuales. Finalmente nos dirigimos puramente a la descripción div, y hacemos que el valor de la izquierda sea 100%. Esto empuja toda la caja hacia la derecha y fuera de la vista debido al desbordamiento oculto en el div .servicio. Este valor de posición 'izquierda' es a lo que apuntaremos y animaremos con jQuery, y es por eso que es importante definirlo ahora.
Pasemos al siguiente paso, aquí usaremos @ font-face para obtener nuestra fuente de icono y definir los nombres de clase que ya hemos usado en el HTML para que aparezcan como iconos correctos. El primer paso es encontrar un recurso en línea que pueda crear una fuente de íconos adaptada a sus necesidades, hay bastantes por ahí pero para este ejemplo he decidido usar Fantástico . En el sitio, primero selecciona los íconos que desea usar, esto obviamente cambia para cualquier proyecto en el que esté trabajando. Pero luego puedes cambiar alguna información, como los nombres de clase de los íconos y el nombre de la fuente como este:
Entonces, como pueden ver, he elegido los nombres de clase que usamos en el HTML para que coincidan sin problemas. El servicio luego le da una descarga de una carpeta 'fonts' y algo de código. Coloque la carpeta 'fonts' en su carpeta css (o donde le convenga). Luego tome el código que le dan y agréguelo a su archivo css. Esto es lo que necesitas:
@font-face {font-family: "slidable-grid";src:url("fonts/slidable-grid.eot");src:url("fonts/slidable-grid.eot?#iefix") format("embedded-opentype"),url("fonts/slidable-grid.woff") format("woff"),url("fonts/slidable-grid.ttf") format("truetype"),url("fonts/slidable-grid.svg#slidable-grid") format("svg");font-weight: normal;font-style: normal;}[class^="icon-"]:before,[class*=" icon-"]:before {font-family: "slidable-grid" !important;font-style: normal !important;font-weight: normal !important;font-variant: normal !important;text-transform: none !important;speak: none;font-size: 4em;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-web:before {content: "a";}.icon-graphic:before {content: "b";}.icon-logo:before {content: "c";}.icon-dev:before {content: "d";}.icon-3d:before {content: "e";}.icon-illustration:before {content: "f";}
Y ahí lo tienes. Si recarga el proyecto, aparecerán los íconos. Ahora todo lo que queda es terminar el diseño para que se vea como la demostración final.
Terminemos rápidamente con los estilos finales que quedan. Aquí no hay nada esencial, solo diseño para que se vea como queremos, por lo que todo se explica por sí mismo. Aquí está el código para centrar la grilla y darle su ancho máximo. También para hacer un buen efecto de desplazamiento sobre los íconos:
@import url(reset.css);* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }.cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ }.cf:after { clear: both; }.cf { *zoom: 1; }body {font-family: 'Exo 2', sans-serif; /* Google Font http://google.com/fonts */text-align: center;color: #999;background: #444;-webkit-font-smoothing: antialiased;}#services {max-width: 850px;margin: 0 auto;}#services .service .service-icon:hover {cursor: pointer;color: #249EC2;}#services .service .service-icon span {display: block;-webkit-transition: all 0.1s linear;-moz-transition: all 0.1s linear;transition: all 0.1s linear;}#services .service .service-icon:hover span {position: relative;bottom: 5px;}
Nuestro objetivo con jQuery es reutilizar el mismo fragmento de código para toda la grilla. Vamos a escuchar un evento de clic (en el cuadro de servicio) y cuando eso suceda, animaremos la posición del icono para moverlo, y agregaremos la descripción, también agregaremos un nombre de clase para ayudar con funcionalidad. Entonces, primero incluya jQuery en su página, luego agregue nuestro código en otro archivo de script o dentro de