Detta rutnät är ett roligt och behagligt sätt att visa flera bitar av information i samma mängd utrymme, genom att ha varje del av rutnätet bort på klick eller svängning och visa extra innehåll.
I skapandet kommer vi att titta på den nödvändiga markeringen, någon styling och göra nätverket lyhörd, liksom genomförandet av en ikonets webbfont. Vi ska också studera jQuery som behövs samt de olika alternativen som finns tillgängliga.
Så här kommer det se ut när vi är färdiga:
Så som du kan se, ganska enkelt! Det finns en div med ett ID för "tjänster" och med ett klart float klassnamn. Därefter är inuti sex olika
Det här är så enkelt som vi kommer att gå med markeringen, det betyder att om det inte finns något JavaScript och ingen CSS det inte kommer att bryta innehållet, kommer det fortfarande att vara synligt (bortsett från ikonerna, men eftersom de är tomma spänner vi brukar inte se dem ändå). Så det här är vår säkerhetskopia, inga stilar och inget JavaScript-innehåll:
Nu när vi är säkra på innehållet är säkert. Vi kan gå vidare till vår CSS så att det ser bra ut, men det är viktigare att sätta upp det för jQuery-funktionaliteten.
Låt oss bryta CSS i tre delar; Det väsentliga som behövs för att göra vårt jQuery-arbete, ikonens teckensnittskod, och sedan är de sista stilar som gör det snyggt. Så här är det första avsnittet:
#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å låt oss gå igenom det som händer här. Vi inriktar oss först och främst på de enskilda lådomslagen (.service) och ordnar dem i rutformen, genom att ge dem en vätskebredd, en minsta höjd och flyter dem till vänster (det är därför den övergripande omslaget har en clearfloatfix). Då är det viktigt att deras överflöde döljs (annars skulle vi se det extra innehållet hela tiden) och deras förhållande. Vi gör då också det här nätverket mer responsivt vänligt genom att använda ett par mediefrågor för vissa olika skärmstorlekar och öka bredden på varje cell. Den här koden betyder att vårt rutnät startar i en 3-kolonndesign med full skrivbordsstorlek, och passerar genom en två kolumner, och äntligen en kolumn samtidigt som skärminstorleken minskas.
Nu när ytterlådorna är på plats, riktar vi oss till de inre sektionerna, tjänsten -service och -service. Vi gör dessa absolut placerade (därmed minsta höjden i föregående stil) och placera dem båda längst upp till vänster (vi ändrar beskrivningens position på ett ögonblick). Vi gör dem sedan 100% breda och höga, så de fyller deras moderelement, och resten är endast för visuell effekt. Slutligen målar vi rent beskrivnings div och gör vänstervärdet 100%. Detta trycker hela rutan av till höger och ur synet på grund av överflödet dolt på service div. Detta "vänster" positionsvärde är vad vi ska rikta in och animera med jQuery, och det är därför det är viktigt att definiera det nu.
Låt oss gå vidare till nästa steg, här använder vi @ font-face för att få vår ikon font och definiera de klassnamn som vi redan har använt i HTML som ska visas som rätt ikoner. Det första steget är att hitta en online-resurs som kan skapa ett ikon typsnitt som passar dina behov, det finns en hel del där ute men för det här exemplet har jag bestämt mig för att använda Fontastic . På sidan väljer du först de ikoner du vill använda, detta förändras självklart för vilket projekt du arbetar med. Men då kan du ändra lite info, som klassnamnen på ikonerna och typsnittet så här:
Såsom du kan se har jag valt de klassnamn som vi använde i HTML så att de kommer att matcha upp utan krångel. Tjänsten ger dig sedan en nedladdning av en "fonts" -mapp och någon kod. Placera mappen "skrifter" i din css-mapp (eller vart du passar dig). Ta sedan koden de ger och lägg till den i din css-fil. Här är vad du behöver:
@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";}
Och där har du det. Om du laddar om projektet visas ikonerna. Nu är allt som är kvar att slutföra styling så att det ser ut som den sista demoen.
Låt oss avsluta snabbt med de sista stilar som finns kvar. Här är inget viktigt, bara design för att få det att se ut som vi vill, så det är allt ganska självförklarande. Här är koden för att centrera nätet och ge den maximal bredd. Också för att göra den trevliga svängningseffekten på ikonerna:
@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 är att återanvända samma kodstycke för hela nätet. Vi kommer att lyssna på ett klickhändelse (i servicefältet) då när det händer ska vi animera ikonpositionen för att flytta bort den och ta med beskrivningen, vi lägger också till ett klassnamn för att hjälpa till med funktionalitet. Så först inkludera jQuery på din sida, lägg sedan till vår kod antingen i en annan skriptfil eller inuti a