Tämä ruudukko on hauska ja miellyttävä tapa näyttää useita tietoja samassa tilassa, koska ruudukon jokainen osa liukuu napsauttamalla tai hiirellä ja näyttää ylimääräisen sisällön.
Luomisprosessissa tarkastelemme tarvittavaa merkintää, jotain muotoilua ja verkon reagointia sekä kuvakkeen web-fontin käyttöönottoa. Tutustumme myös tarvittavaan jQueryyn ja erilaisiin käytettävissä oleviin vaihtoehtoihin.
Näin se näyttää, kun olemme päättyneet:
Joten näet, melko yksinkertainen! Divilla on "palvelut" tunnus ja selkeä float-luokan nimi. Sitten sisäpuolella on kuusi erilaista
Tämä on yhtä helppoa kuin mennään merkinnällä, mikä tarkoittaa sitä, että jos JavaScript ei ole ja ei CSS, se ei todellisuudessa riko sisältöä, se on silti näkyvissä (kuvakkeiden lisäksi, mutta ne ovat tyhjiä kattoja me tapamme nähdä niitä joka tapauksessa). Joten tämä on meidän varmuuskopiot, tyylit ja JavaScript-sisältö:
Nyt olemme varmoja, että sisältö on turvallinen. Voimme siirtyä CSS-palveluun, jotta se näyttäisi mukavalta, mutta tärkeämpää on se, että se perustetaan jQuery-toimintoihin.
Let's break CSS kolmeen osaan; tärkeä, joka tarvitaan jQueryn tekemiseen, kuvakkeen fonttikoodiin ja sitten lopullisiin tyyleihin, jotta se näyttäisi mukavalta. Joten tässä on ensimmäinen osa:
#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; }
Joten käy läpi mitä täällä tapahtuu. Ensin kohdistetaan yksittäiset koteloidut kotelot (.service) ja järjestetään ne ruudukon muotoon antamalla niille nesteen leveys, vähimmäiskorkeus ja kelluvat heidät vasemmalle (siksi koko kääreellä on selkeät pisteet). Sitten tärkeästi niiden ylivuoto piilotetaan (muuten näemme ylimääräisen sisällön kaikkina aikoina) ja heidän asemansa suhteellisen. Tämän jälkeen teemme tämän verkon reagoivaksi ystävällisemmäksi käyttäen muutamia mediakyselyjä joidenkin eri näytökoopien kohdalla ja lisäämään kunkin solun leveyttä. Tämä koodi tarkoittaa, että ruudukko alkaa kolonnin suunnittelussa koko työpöydän kokoisena ja kulkee kahden sarakkeen läpi ja lopulta yhden sarakkeen samalla, kun näytön koko pienenee.
Nyt kun ulompi laatikko on paikallaan, kohdistamme sisäosat, palvelukuvake ja .service-kuvaus. Teemme nämä ehdottomasti sijoitetut (siis vähimmäiskorkeus edellisessä tyylissä) ja asemoivat ne molemmissa vasemmassa yläkulmassa (muutamme kuvauksen sijaintia hetkessä). Sitten ne ovat 100% leveitä ja korkeita, joten ne täyttävät vanhemman elementin, ja loput ovat vain visuaalisia vaikutuksia. Lopuksi kohdistamme pelkästään kuvauksen div, ja tehdä vasemman arvon 100%. Tämä työntää koko laatikon oikealle puolelle ja näkymättömyyden takia .service div: n piilossa oleva ylivuoto. Tämä "vasen" sijainti-arvo on se, mitä kohdistamme ja animoimme jQueryn kanssa, ja siksi on tärkeää määritellä se nyt.
Siirry seuraavaan vaiheeseen, tässä käytämme @ font-face -kuvaketta saadaksesi kuvake-fonttimme ja määrittelemään, mitä HTML-nimiä jo käyttämämme luokkien nimet näyttävät oikeina kuvakkeina. Ensimmäinen vaihe on löytää online-resurssi, joka pystyy luomaan tarpeisiisi sopivan kuvakefontin, mutta siellä on melko vähän, mutta tässä esimerkissä olen päättänyt käyttää Fontastic . Sivulla, josta ensin valitset kuvakkeet, joita haluat käyttää, tämä muuttuu luonnollisesti mihin projektiin olet tekemässä. Mutta sitten voit muuttaa joitakin tietoja, kuten kuvakkeiden luokan nimiä ja tämän tyyppistä fonttia:
Joten näet, että olen valinnut luokan nimet, joita käytimme HTML-muodossa, joten ne sopivat yhteen ilman mitään hässäkkää. Palvelu antaa sinulle fontin ja jonkin koodin lataamisen. Aseta kirjasinkokoelma css-kansioosi (tai missä tahansa sopii sinulle). Ota sitten koodi, jonka he antavat ja lisää se css-tiedostoosi. Tässä on mitä tarvitset:
@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";}
Ja siellä sinulla on se. Jos lataat projektin uudelleen, kuvakkeet tulevat näkyviin. Nyt kaikki jäljellä on viimeistellä tyylit, jotta se näyttäisi lopulliselta demoilta.
Lopettakaa lopuksi loput tyylit, jotka ovat jäljellä. Tässä ei ole mitään olennaista, vain muotoilu, jotta se näyttäisi haluavalta, joten kaikki on itsestään selvää. Tässä on koodi, joka keskittää verkon ja antaa sille enimmäisleveyden. Voit myös tehdä mukavan hover-efektin kuvakkeisiin:
@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;}
Tavoitteemme jQueryn kanssa on käyttää samaa koodinpätkä koko verkkoon. Aiomme kuunnella click-tapahtumaa (palvelukentässä), ja silloin, kun näin tapahtuu, animoimme kuvakkeen sijainnin siirtääksesi sen pois ja tuomaan kuvauksen, lisäämme myös luokan nimen auttamaan toiminnallisuutta. Joten ensin sisällytetä sivusi jQuery ja lisää koodi sitten joko toiseen komentotiedostoon tai sisään