Dette rutenettet er en morsom og behagelig måte å vise flere deler av informasjon på i samme mengde plass, ved å ha hver del av rutenettet vekk på klikk eller svever, og vise ekstra innhold.
I etableringsprosessen ser vi på den nødvendige oppstarten, noe styling og gjør gridet lydhørt, samt implementeringen av en ikonets webfont. Vi vil også studere jQuery som trengs, samt de forskjellige tilgjengelige alternativene.
Slik ser det ut når vi er ferdige:
Så som du kan se, ganske enkelt! Det er en div med en ID for "tjenester" og med et klart float klassenavn. Så inne i det er seks forskjellige
Dette er så enkelt som vi vil gå med markeringen, det betyr at hvis det ikke er noe JavaScript og ikke noe CSS, vil det ikke faktisk ødelegge innholdet vårt, det vil fortsatt være synlig (bortsett fra ikonene, men da de er tomme spenner vi vil ikke se dem uansett). Så dette er vår backup, ingen stiler og ingen JavaScript-innhold:
Nå som vi er sikre på at innholdet er trygt. Vi kan gå videre til vårt CSS for å få det til å se fint ut, men enda viktigere sett opp for jQuery-funksjonaliteten.
La oss bryte CSS i tre deler; Det essensielle som trengs for å gjøre vårt jQuery-arbeid, ikonet skrifttypekoden, og så de siste stilene for å gjøre det ser bra ut. Så her er den første delen:
#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; }
Så la oss gå gjennom hva som foregår her. Vi målretter først de individuelle boksinnpakningene (.service) og ordner dem inn i gitterformen, ved å gi dem en væskebredde, en minimumshøyde og flyter dem til venstre (derfor har den samlede innpakningen en klarfeltfiksering). Så viktigere gjør overløpet deres skjult (ellers ville vi se det ekstra innholdet til enhver tid) og deres forholdsmessige forhold. Vi gjør da også dette nettverket mer responsivt, vennlig ved å bruke et par medieforespørsler for noen forskjellige skjermstørrelser, og øke bredden på hver celle. Denne koden betyr at vårt rutenett vil starte ved en 3-kolonnedesign ved full skrivebordsstørrelse, og passere gjennom en to kolonne, og til slutt en en kolonne mens du reduserer skjermstørrelsen.
Nå som de ytre boksene er på plass, målretter vi innvendige seksjoner, service-ikonet og servicebeskrivelsen. Vi gjør disse absolutt plassert (dermed minimumshøyde i forrige stil) og plasserer dem begge øverst til venstre (vi endrer beskrivelsens posisjon i et øyeblikk). Vi gjør dem så 100% brede og høye, slik at de fyller foreldreelementet, og resten er kun for visuell effekt. Endelig målretter vi rent beskrivelses div, og gjør venstreverdien 100%. Dette skyver hele boksen av til høyre og ut av synet på grunn av overløpet som er skjult på .service div. Denne "venstre" posisjonen er hva vi skal målrette mot og animere med jQuery, og derfor er det viktig å definere det nå.
La oss gå videre til neste trinn, her bruker vi @ font-face for å få vår ikon font og definere klassenavnene som vi allerede har brukt i HTML-en som skal vises som de riktige ikonene. Det første trinnet er å finne en online ressurs som kan skape et ikon skrift som passer til dine behov, det er ganske mange der ute, men for dette eksempelet har jeg bestemt meg for å bruke Fontastic . På nettstedet velger du først ikonene du vil bruke, dette endres åpenbart for hvilket prosjekt du jobber med. Men da kan du endre litt info, som klassenavnene til ikonene og skrifttypenavnet slik:
Så som du kan se, har jeg valgt klassenavnene som vi brukte i HTML, slik at de vil samsvare uten problemer. Tjenesten gir deg en nedlasting av en "fonts" -mappe og en kode. Legg mappen "skrifter" i css-mappen din (eller hvor som helst som passer deg). Deretter tar du koden de gir og legger den til din css-fil. Her er hva du trenger:
@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";}
Og der har du det. Hvis du oppdaterer prosjektet, vises ikonene. Nå er alt som er igjen, å fullføre styling slik at det ser ut som den endelige demoen.
La oss fullføre raskt med de siste stilene som er igjen. Her er ingenting viktig, bare design for å gjøre det ser ut som vi vil, så det er alt ganske selvforklarende. Her er koden for å sentrere nettet og gi den maksimal bredde. Også for å gjøre den hyggelige hover-effekten på ikonene:
@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;}
Vårt mål med jQuery er å bruke samme kodestykke for hele nettverket. Vi skal lytte etter et klikk-arrangement (i serviceboksen), og når det skjer, vil vi animere ikonposisjonen for å flytte den bort, og ta med beskrivelsen, vi vil også legge til et klassenavn for å hjelpe med funksjonalitet. Så ta med jQuery på siden din, og legg deretter til koden enten i en annen skriptfil, eller inne i en