Questa griglia è un modo divertente e gradevole di mostrare più informazioni nella stessa quantità di spazio, facendo scorrere ogni sezione della griglia al clic o al passaggio del mouse e visualizzando contenuti extra.
Nel processo di creazione vedremo il markup necessario, alcuni stili e la reattività della griglia, nonché l'implementazione di un font Web per icone. Studieremo anche il jQuery necessario e le diverse opzioni disponibili.
Ecco come apparirà una volta terminato:
Quindi come puoi vedere, molto semplice! C'è un div con un ID di "servizi" e con un nome di classe float chiaro. Poi dentro ce ne sono sei diversi
Questo è semplice come andremo con il markup, il che significa che se non ci sono JavaScript e nessun CSS in realtà non romperà il nostro contenuto, sarà comunque visibile (a parte le icone, ma dato che sono vuoti non li vedremo comunque). Quindi questo è il nostro backup, nessuno stile e nessun contenuto JavaScript:
Ora siamo sicuri che il contenuto sia sicuro. Possiamo passare al nostro CSS per renderlo bello, ma ancora più importante per la funzionalità jQuery.
Rompiamo il CSS in tre parti; l'essenziale che è necessario per far funzionare il jQuery, il codice del carattere dell'icona e infine gli stili finali per renderlo bello. Quindi, ecco la prima sezione:
#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; }
Quindi esaminiamo cosa sta succedendo qui. Per prima cosa prendiamo di mira i singoli box wrappers (.service) e li sistemiamo nella forma della griglia, dando loro una larghezza fluida, un'altezza minima e facendoli fluttuare verso sinistra (ecco perché il wrapper generale ha una correzione clearfloat). Quindi è importante rendere nascosto il loro overflow (altrimenti vedremmo il contenuto extra in ogni momento) e la relativa posizione relativa. Stiamo anche rendendo questa griglia più reattiva, utilizzando una coppia di media query per schermi di dimensioni diverse e aumentando la larghezza di ogni cella. Questo codice indica che la nostra griglia inizierà con un progetto a 3 colonne a dimensione di desktop completo e passerà attraverso una colonna due e infine una colonna mentre diminuirà la dimensione dello schermo.
Ora che le caselle esterne sono a posto, indirizziamo le sezioni interne, l'icona -servizio e la descrizione -servizio. Facciamo questi posizionamenti assoluti (quindi l'altezza minima nello stile precedente) e li posizioniamo entrambi in alto a sinistra (cambieremo la posizione della descrizione in un momento). Poi li trasformiamo al 100% in larghezza e in altezza in modo che riempiano il loro elemento genitore, e il resto è solo per effetto visivo. Infine miriamo esclusivamente alla descrizione div e facciamo il valore di sinistra al 100%. Questo spinge l'intera casella a destra e fuori dalla vista a causa del trabocco nascosto sul servizio. Div. Questo valore di posizione "a sinistra" è ciò che punteremo e animeremo con jQuery, ed è per questo che è importante definirlo ora.
Passiamo al passaggio successivo, qui useremo @ font-face per ottenere il nostro carattere di icona e definire i nomi di classe che abbiamo già utilizzato nell'HTML per apparire come le icone giuste. Il primo passo è trovare una risorsa online in grado di creare un font di icona adatto alle tue esigenze, ce ne sono parecchi là fuori ma per questo esempio ho deciso di utilizzare Fontastic . Sul sito scegli prima le icone che vuoi usare, questo ovviamente cambia per qualunque progetto tu stia lavorando. Ma poi puoi cambiare alcune informazioni, come i nomi delle classi delle icone e il nome del font come questo:
Quindi, come puoi vedere, ho scelto i nomi di classe che abbiamo usato nell'HTML in modo che corrispondano senza problemi. Il servizio ti dà quindi il download di una cartella "font" e del codice. Posiziona la cartella 'fonts' nella tua cartella css (o dove preferisci). Quindi prendi il codice che danno e aggiungilo al tuo file css. Ecco di cosa hai bisogno:
@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";}
E il gioco è fatto. Se ricarichi il progetto, appariranno le icone. Ora non resta che terminare lo styling per far sembrare la demo finale.
Finiamo velocemente con gli stili finali che rimangono. Qui non c'è nulla di essenziale, solo il design per far sembrare che vogliamo, quindi è tutto abbastanza auto-esplicativo. Ecco il codice per centrare la griglia e dargli la larghezza massima. Anche per rendere il bel effetto di passaggio del mouse sulle icone:
@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;}
Il nostro obiettivo con jQuery è riutilizzare lo stesso snippet di codice per l'intera griglia. Ascolteremo un evento click (nella casella di servizio), quindi quando ciò accadrà, animeremo la posizione dell'icona per spostarla, e inseriremo la descrizione, aggiungeremo anche un nome di classe per aiutare con funzionalità. Quindi, prima includi jQuery nella tua pagina, quindi aggiungi il nostro codice in un altro file di script o all'interno di un file