Dieses Raster ist eine unterhaltsame und ansprechende Methode, um mehrere Informationen auf demselben Platz zu zeigen, indem jeder Bereich des Rasters beim Klicken oder Hover wegrutscht und zusätzlichen Inhalt anzeigt.
Bei der Erstellung werden wir auf die notwendige Markup, einige Styling und machen das Grid responsive sowie die Umsetzung einer Symbol Web Schriftart. Wir werden auch die benötigte jQuery sowie die verschiedenen verfügbaren Optionen untersuchen.
So wird es aussehen, wenn wir fertig sind:
So wie Sie sehen können, ziemlich einfach! Es gibt ein Div mit der ID 'Services' und einem eindeutigen Float-Klassennamen. Dann sind darin sechs verschiedene
Das ist so einfach, wie wir es mit dem Markup machen, das heißt, wenn es kein JavaScript und kein CSS gibt, wird es unseren Inhalt nicht brechen, aber es wird immer noch sichtbar sein (abgesehen von den Icons, aber als leere Bereiche) Wir werden sie sowieso nicht sehen). Dies ist unser Backup, keine Stile und kein JavaScript-Inhalt:
Jetzt sind wir sicher, dass der Inhalt sicher ist. Wir können zu unserem CSS übergehen, um es schön aussehen zu lassen, aber noch wichtiger, es für die jQuery-Funktionalität einzurichten.
Lass uns das CSS in drei Teile aufteilen; das Wesentliche, das benötigt wird, um unsere jQuery funktionieren zu lassen, der Icon-Font-Code und dann die endgültigen Styles, damit es gut aussieht. Also hier ist der erste Abschnitt:
#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; }
Lasst uns also durchgehen, was hier vor sich geht. Wir zielen zuerst auf die einzelnen Box-Wrapper (.service) und ordnen sie in die Gitterform ein, indem wir ihnen eine flüssige Breite, eine minimale Höhe und die Möglichkeit geben, sie nach links zu schweben (deshalb hat der gesamte Wrapper eine Clearfloat-Fixierung). Dann ist es wichtig, dass der Überlauf versteckt ist (sonst würden wir den zusätzlichen Inhalt jederzeit sehen) und ihre relative Position. Wir machen dieses Raster auch reaktionsfreudiger, indem wir einige Medienabfragen für verschiedene Bildschirmgrößen verwenden und die Breite jeder Zelle erhöhen. Dieser Code bedeutet, dass unser Raster mit einem 3-Spalten-Design bei voller Desktop-Größe beginnt und durch eine zwei Spalten und schließlich eine Spalte mit abnehmender Bildschirmgröße geht.
Jetzt, da die äußeren Boxen vorhanden sind, zielen wir auf die inneren Abschnitte, das Service-Symbol und die Service-Beschreibung. Wir machen diese absolut positioniert (daher die minimale Höhe im vorherigen Stil) und positionieren sie beide oben links (wir werden die Position der Beschreibung in einem Moment ändern). Wir machen sie dann 100% breit und hoch, damit sie ihr Elternelement ausfüllen, und der Rest ist nur für den visuellen Effekt. Schließlich zielen wir nur auf die Beschreibung div und machen den linken Wert 100%. Dies schiebt die gesamte Box nach rechts und außer Sicht wegen des Überlaufs versteckt auf dem .service div. Dieser "linke" Positionswert wird mit jQuery ausgerichtet und animiert. Daher ist es wichtig, ihn jetzt zu definieren.
Lassen Sie uns zum nächsten Schritt übergehen, hier verwenden wir @ font-face, um unsere Symbolschrift zu erhalten und die Klassennamen zu definieren, die wir bereits im HTML verwendet haben, um als die richtigen Symbole zu erscheinen. Der erste Schritt besteht darin, eine Online-Ressource zu finden, die eine für Ihre Bedürfnisse geeignete Symbolschriftart erstellen kann. Es gibt eine ganze Menge da draußen, aber für dieses Beispiel habe ich mich entschieden zu verwenden Fontastisch . Auf der Website wählen Sie zuerst die Symbole aus, die Sie verwenden möchten. Dies ändert sich offensichtlich bei jedem Projekt, an dem Sie gerade arbeiten. Aber dann können Sie einige Informationen wie die Klassennamen der Symbole und den Schriftnamen wie folgt ändern:
Wie Sie sehen können, habe ich die Klassennamen ausgewählt, die wir im HTML-Code verwendet haben, sodass sie problemlos zusammenpassen. Der Dienst bietet Ihnen dann einen Download eines 'Fonts'-Ordners und etwas Code. Legen Sie den Ordner "Fonts" in Ihren CSS-Ordner (oder wo immer Sie möchten). Nehmen Sie dann den Code, den sie geben, und fügen Sie ihn Ihrer CSS-Datei hinzu. Folgendes brauchen Sie:
@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";}
Und da hast du es. Wenn Sie das Projekt erneut laden, werden die Symbole angezeigt. Jetzt ist nur noch das Styling fertig, damit es wie die finale Demo aussieht.
Lass uns mit den letzten verbleibenden Stilen schnell fertig werden. Hier ist nichts Wesentliches, nur Design, um es so aussehen zu lassen, wie wir es wollen, also ist es alles ziemlich selbsterklärend. Hier ist der Code, um das Gitter zu zentrieren und ihm seine maximale Breite zu geben. Auch um den schönen Hover-Effekt auf die Icons zu machen:
@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;}
Unser Ziel bei der jQuery ist es, den gleichen Codeschnipsel für das gesamte Grid wiederzuverwenden. Wir werden auf ein Klickereignis warten (auf der Service-Box). Wenn das passiert, animieren wir die Icon-Position, um sie wegzubewegen und bringen die Beschreibung mit. Wir werden auch einen Klassennamen hinzufügen, um damit zu helfen Funktionalität. Fügen Sie zuerst jQuery auf Ihrer Seite hinzu und fügen Sie dann unseren Code entweder in einer anderen Skriptdatei oder in einem