Dette net er en sjov og behagelig måde at vise flere stykker information på i samme mængde plads ved at have hvert afsnit af gitteret glid væk på klik eller svinge og vise ekstra indhold.
I skabelsesprocessen ser vi på den nødvendige markering, nogle styling og gør gitteret lydhør og implementeringen af en ikonets web skrifttype. Vi vil også studere de nødvendige jQuery samt de forskellige muligheder.
Sådan ser det ud, når vi er færdige:
Så som du kan se, ret simpelt! Der er en div med et ID af 'services' og med et klart float klassenavn. Så inde i det er seks forskellige
Dette er så simpelt, som vi vil gå med markeringen, det betyder, at hvis der ikke er nogen JavaScript og ingen CSS, vil det faktisk ikke bryde vores indhold, det vil stadig være synligt (bortset fra ikonerne, men da de er tomme spændinger vi vil ikke se dem alligevel). Så dette er vores backup, ingen stilarter og ingen JavaScript-indhold:
Nu hvor vi er sikre på, at indholdet er sikkert. Vi kan gå videre til vores CSS for at få det til at se godt ud, men vigtigere sætte det op for jQuery-funktionaliteten.
Lad os bryde CSS i tre dele; Det væsentlige, der er nødvendigt for at gøre vores jQuery-arbejde, ikonets skrifttypekode, og så er de endelige stilarter, der gør det godt. Så her er det første afsnit:
#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å lad os gå igennem, hvad der foregår her. Vi målretter først de individuelle boksemballager (.service) og arrangerer dem i gitterformen ved at give dem en væskebredde, en minimumshøjde og flydende dem til venstre (derfor har den samlede wrapper en klarfloatfix). Så vigtigere gør deres overløb skjult (ellers ville vi se det ekstra indhold til enhver tid) og deres position relative. Vi gør så også dette net mere lydhørigt ved at bruge et par medieforespørgsler til nogle forskellige skærmstørrelser og øge bredden af hver celle. Denne kode betyder, at vores gitter vil starte ved et 3 kolonne design ved fuld desktop størrelse, og passere gennem en to kolonne, og derefter endelig en en kolonne mens formindskelse af skærmens størrelse.
Nu da de ydre kasser er på plads, målretter vi indersektionerne, service-ikonet og servicebeskrivelsen. Vi stiller disse absolutte positioneret (altså den mindste højde i den foregående stil) og placerer dem begge øverst til venstre (vi ændrer beskrivelsens position på et øjeblik). Vi gør dem så 100% brede og høje, så de fylder deres overordnede element, og resten er kun til visuel effekt. Endelig målretter vi udelukkende beskrivelses div, og gør venstre værdi 100%. Dette skubber hele kassen ud til højre og ude af syne på grund af overløb gemt på service div. Denne "venstre" positionsværdi er, hvad vi vil målrette og animere med jQuery, og derfor er det vigtigt at definere det nu.
Lad os gå videre til næste trin, her bruger vi @ font-face for at få vores ikon skrifttype og definere de klassenavne, vi allerede har brugt i HTML'en, som de rigtige ikoner. Det første skridt er at finde en online ressource, der kan skabe en ikon skrifttype, der passer til dine behov, der er et par derude, men for dette eksempel har jeg besluttet at bruge Fontastic . På stedet vælger du først de ikoner, du vil bruge, det ændres naturligvis til det projekt, du arbejder på. Men så kan du ændre nogle oplysninger, ligesom klassens navne på ikonerne og skrifttypen som denne:
Så som du kan se, har jeg valgt de klassenavne, vi brugte i HTML'en, så de passer op uden besvær. Tjenesten giver dig derefter en download af en "skrifttyper" mappe og nogle kode. Placer mappen 'skrifttyper' i din css-mappe (eller hvor passer dig). Så tag koden de giver og tilføj den til din css-fil. Her er hvad du har brug for:
@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 genindlæser projektet, vises ikonerne. Nu er alt det der er tilbage, at afslutte styling for at få det til at ligne den endelige demo.
Lad os afslutte hurtigt med de endelige stilarter, der er tilbage. Her er intet vigtigt, kun design for at få det til at lyde som vi vil, så det er alt ret selvforklarende. Her er koden til at centrere nettet og give den den maksimale bredde. Også for at gøre den gode svæveffekt på ikonerne:
@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;}
Vores mål med jQuery er at genbruge det samme kodestykke til hele nettet. Vi skal lytte til et klikhændelse (i serviceboksen), og når det sker, vil vi animere ikonpositionen for at flytte den væk, og bringe beskrivelsen i, vi tilføjer også et klassenavn for at hjælpe med funktionalitet. Indsæt først jQuery på din side, så tilføj vores kode enten i en anden scriptfil eller inde i a