Þetta rist er skemmtileg og skemmtileg leið til að sýna margvíslegar upplýsingar í sömu magni, með því að hafa hvern hluta ristarinnar renna í smelli eða sveima og birta auka efni.
Í sköpunarferlinu munum við líta á nauðsynlegan markup, nokkrar stílmyndir og gera ristin móttækilegur eins og heilbrigður eins og framkvæmd táknmyndar leturs leturs. Við munum einnig læra jQuery sem þarf og einnig mismunandi valkosti.
Þetta er hvernig það mun líta út þegar við höfum lokið:
Svo sem þú getur séð, frekar einfalt! Það er div með kennitölu "þjónustu" og með skýrt flotaflokksheiti. Þá inni í því eru sex mismunandi
Þetta er eins einfalt og við munum fara með merkinguna, það þýðir að ef það er ekkert JavaScript og ekkert CSS það muni ekki brjóta efnið okkar, þá mun það enn vera sýnilegt (fyrir utan táknin, en eins og þau eru tómt Við munum ekki sjá þá samt). Svo þetta er varabúnaður okkar, engin stíll og ekkert JavaScript efni:
Nú þegar við erum viss um að efnið sé öruggt. Við getum farið á CSS okkar til að gera það lítið gott, en meira máli skiptir það upp fyrir jQuery virkni.
Skulum brjóta CSS í þremur hlutum; nauðsynlegt er að gera jQuery vinnu okkar, táknið leturgerð, og þá endanlegir stíll til að gera það lítið gott. Svo hér er fyrsta kafli:
#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; }
Svo skulum fara í gegnum hvað er að gerast hér. Við erum fyrst að miða á einstaka kassa umbúðir (.service) og raða þeim í ristarmyndina, með því að gefa þeim vökvabreidd, lágmarkshæð og fljótandi þá til vinstri (þess vegna er heildarhúðin með klárafleti). Þá er mikilvægt að gera flæðið falið (annars viljum við sjá auka efni á öllum tímum) og stöðu ættingja þeirra. Við gerum þá líka þetta rist svolítið móttækilegt með því að nota nokkrar fjölmiðlafyrirspurnir fyrir nokkrar mismunandi skjástærðina og auka breidd hvers hólks. Þessi kóði þýðir að netkerfið okkar hefst í 3 dálkahönnun á fullri skrifborðsstærð og fara í gegnum tvær dálkir og síðan loks einn dálki meðan minnkandi skjástærð er.
Nú þegar ytri kassarnir eru til staðar, miðar við innra hluta, þjónustuliðið og þjónustulýsingu. Við gerum þessar algerar staðsetningar (þess vegna lágmarkshæð í fyrri stíl) og settu þau bæði efst til vinstri (við munum breyta stöðu vörunnar í smá stund). Við gerum þá 100% breitt og hátt þannig að þeir fylgi foreldrahlutanum sínum, og restin er eingöngu fyrir sjónræn áhrif. Að lokum miðum við eingöngu lýsingardeildinni og gerir vinstri gildi 100%. Þetta ýtir allt í reitinn til hægri og út af sjónarhóli vegna flæðisins sem er falið á þjónustufyrirtækinu. Þessi "vinstri" stöðuverði er það sem við munum miða á og hreyfa við jQuery, og þess vegna er mikilvægt að skilgreina það núna.
Við skulum fara áfram í næsta skref, hér munum við nota @ letur-andlit til að fá leturgerðina okkar og skilgreina þau heiti sem við höfum þegar notað í HTML til að birtast sem rétt tákn. Fyrsta skrefið er að finna á netinu auðlind sem getur búið til leturgerð sem passar við þarfir þínar, það eru nokkrir þarna úti en fyrir þetta dæmi hef ég ákveðið að nota Fontastic . Á síðunni velurðu fyrst táknin sem þú vilt nota, þetta breytist augljóslega fyrir hvaða verkefni þú ert að vinna að. En þá er hægt að breyta einhverjum upplýsingum, eins og flokkaheiti táknanna og letriðið eins og þetta:
Svo sem þú sérð að ég hef valið kennslubréfin sem við notuðum í HTML, þá munu þeir passa upp án þess að þræta. Þjónustan gefur þér síðan niður á möppu 'leturgerð' og einhverja kóða. Settu möppuna 'leturgerðir' í möppuna þína (eða hvar sem hentar þér). Taktu þá kóðann sem þeir gefa og bætdu þeim við css skrá. Hér er það sem þú þarft:
@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 þarna hefurðu það. Ef þú endurheimtir verkefnið birtast táknin. Nú er allt sem eftir er að klára stíl þannig að það lítur út eins og endanleg kynning.
Við skulum klára fljótlega með endanlegri stíll sem eftir er. Hér er ekkert nauðsynlegt, aðeins hönnun til að gera það líta út eins og við viljum, svo það er allt laglegur sjálfskýringar. Hér er kóðinn til að miðja ristina og gefa það hámarksbreidd. Einnig til að gera gott sveimaáhrif á táknin:
@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;}
Markmið okkar með jQuery er að endurnýta sama kóðann af kóða fyrir allt ristið. Við erum að fara að hlusta á smellahátíð (á þjónustuborðinu) og þegar það gerist munum við laga táknið til að færa það í burtu, og koma með lýsingu í, við munum einnig bæta við kennitölu til að hjálpa virkni. Svo fyrst eru jQuery á síðunni þinni, þá skaltu bæta við kóðanum okkar annað hvort í annarri handritaskrá eða inni í