Dit raster is een leuke en aangename manier om meerdere stukjes informatie in dezelfde hoeveelheid ruimte weer te geven, door elk deel van het raster weg te laten glijden bij klikken of zweven en extra inhoud weer te geven.
Tijdens het creatieproces zullen we kijken naar de noodzakelijke markup, wat styling en het responsive maken van het grid, evenals de implementatie van een pictogram weblettertype. We bestuderen ook de benodigde jQuery en de verschillende beschikbare opties.
Zo ziet het eruit als we klaar zijn:
Dus zoals je kunt zien, vrij eenvoudig! Er is een div met een ID van 'services' en met een duidelijke float-klassenaam. Binnen dat zijn er zes anders
Dit is net zo eenvoudig als met de markup, dat betekent dat als er geen JavaScript en geen CSS is, deze niet echt onze inhoud zal breken, maar deze blijft zichtbaar (behalve de pictogrammen, maar omdat ze leeg zijn we zullen ze sowieso niet zien). Dit is dus onze back-up, geen stijlen en geen JavaScript-inhoud:
Nu we zeker weten dat de inhoud veilig is. We kunnen doorgaan met onze CSS om het er leuk uit te laten zien, maar nog belangrijker om het in te stellen voor de jQuery-functionaliteit.
Laten we de CSS in drie delen splitsen; het essentiële dat nodig is om ons jQuery te laten werken, de lettertypecode van het pictogram en vervolgens de definitieve stijlen om het er leuk uit te laten zien. Dus hier is het eerste gedeelte:
#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; }
Dus laten we gaan door wat hier gebeurt. We richten ons eerst op de individuele box wrappers (.service) en rangschikken deze in de vorm van het raster, door ze een vloeiende breedte, een minimale hoogte en zwevend links te geven (vandaar dat de overall-wrapper een clearfloat-fix heeft). Dan belangrijker maken hun overloop verborgen (anders zouden we te allen tijde de extra inhoud zien) en hun relatieve positie. We maken dit raster dan ook responsiever vriendelijker door een paar mediaquery's te gebruiken voor een aantal verschillende schermformaten en de breedte van elke cel te vergroten. Deze code betekent dat ons raster zal beginnen bij een ontwerp met 3 kolommen op de volledige desktopgrootte, een twee kolommen passeert en uiteindelijk een kolom met afnemende schermgrootte.
Nu de buitenste vakken op hun plaats zitten, richten we ons op de binnenste secties, het .service-pictogram en de .service-beschrijving. We maken deze absoluut gepositioneerd (vandaar de minimumhoogte in de vorige stijl) en plaatsen ze beide linksboven (we veranderen de positie van de beschrijving in een ogenblik). We maken ze vervolgens 100% breed en hoog, zodat ze hun bovenliggende element vullen, en de rest is alleen voor visueel effect. Uiteindelijk richten we ons puur op de beschrijving div, en maken we de linkse waarde 100%. Dit duwt de hele doos naar rechts en uit het zicht vanwege de overflow die verborgen is op de .service div. Deze 'linker' positiewaarde is wat we zullen targeten en animeren met de jQuery, en daarom is het belangrijk om het nu te definiëren.
Laten we doorgaan naar de volgende stap, hier gebruiken we @ font-face om ons pictogramlettertype te krijgen en de klassenamen te definiëren die we al in de HTML hebben gebruikt om als de juiste pictogrammen te verschijnen. De eerste stap is het vinden van een online bron die een pictogramlettertype kan maken dat geschikt is voor uw behoeften, er zijn er nogal wat maar voor dit voorbeeld heb ik besloten om te gebruiken Fontastic . Op de site kiest u eerst de pictogrammen die u wilt gebruiken, dit verandert uiteraard voor elk project waaraan u werkt. Maar dan kun je wat info veranderen, zoals de klassennamen van de pictogrammen en de naam van het lettertype als volgt:
Zoals u kunt zien, heb ik de klassenamen gekozen die we in de HTML hebben gebruikt, zodat ze zonder gedoe overeenkomen. De service geeft je vervolgens een download van een 'fonts'-map en wat code. Plaats de map 'fonts' in uw css-map (of waar u maar wilt). Neem vervolgens de code die ze geven en voeg deze toe aan je CSS-bestand. Dit is wat je nodig hebt:
@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";}
En daar heb je het. Als u het project opnieuw laadt, verschijnen de pictogrammen. Het enige dat overblijft is om de styling te voltooien zodat het lijkt op de definitieve demo.
Laten we snel eindigen met de definitieve stijlen die nog over zijn. Hier is niets wezenlijks, alleen ontwerp om het te laten lijken op wat we willen, dus het is allemaal behoorlijk duidelijk. Hier is de code om het raster te centreren en het de maximale breedte te geven. Ook om het mooie hover-effect op de pictogrammen te maken:
@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;}
Ons doel met jQuery is om hetzelfde codefragment voor het hele raster opnieuw te gebruiken. We gaan luisteren naar een klikgebeurtenis (in de servicebox). Wanneer dat gebeurt, animeren we de positie van het pictogram om het weg te verplaatsen en brengen we de beschrijving binnen. We voegen ook een klassenaam toe om te helpen met functionaliteit. Dus voeg eerst jQuery toe aan uw pagina en voeg onze code toe in een ander scriptbestand of in een