Αυτό το πλέγμα είναι ένας διασκεδαστικός και ευχάριστος τρόπος να εμφανιστούν πολλαπλά κομμάτια πληροφοριών στο ίδιο διάστημα, κάνοντας κάθε τμήμα του πλέγματος να απομακρύνεται με το πάτημα ενός κουμπιού ή να αιωρείται και να εμφανίζει επιπλέον περιεχόμενο.
Στη διαδικασία δημιουργίας θα δούμε την απαραίτητη σήμανση, κάποια σχεδίαση και απόκριση στο πλέγμα καθώς και την υλοποίηση μιας εικονικής γραμματοσειράς. Θα εξετάσουμε επίσης το jQuery που απαιτείται καθώς και τις διάφορες διαθέσιμες επιλογές.
Αυτό θα είναι όπως θα φανεί μόλις τελειώσουμε:
Όπως μπορείτε να δείτε, πολύ απλό! Υπάρχει ένα div με ένα ID των «υπηρεσιών» και με ένα σαφές όνομα class float. Στη συνέχεια μέσα από αυτό είναι έξι διαφορετικά
Αυτό είναι τόσο απλό όσο θα πάμε με τη σήμανση, αυτό σημαίνει ότι εάν δεν υπάρχει JavaScript και CSS δεν θα σπάσει το περιεχόμενό μας, θα είναι ακόμα ορατό (εκτός από τα εικονίδια, αλλά επειδή είναι κενά διαστήματα δεν τα βλέπουμε ούτως ή άλλως). Επομένως, αυτό είναι το αντίγραφο ασφαλείας μας, χωρίς στυλ και χωρίς περιεχόμενο JavaScript:
Τώρα που είμαστε βέβαιοι ότι το περιεχόμενο είναι ασφαλές. Μπορούμε να προχωρήσουμε στο CSS μας για να το φανεί ωραίο, αλλά πιο σημαντικό να το ρυθμίσουμε για τη λειτουργικότητα του jQuery.
Ας σπάσουμε το CSS σε τρία μέρη. το ουσιαστικό που χρειάζεται για να κάνουμε το jQuery έργο μας, τον κώδικα γραμματοσειράς εικονιδίου, και στη συνέχεια τα τελικά στυλ για να φανεί ωραίο. Έτσι, εδώ είναι το πρώτο τμήμα:
#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; }
Ας δούμε λοιπόν τι συμβαίνει εδώ. Αρχικά στοχεύουμε τα ατομικά περιτυλίγματα κιβωτίων (.service) και τα τοποθετούμε στο σχήμα του πλέγματος, δίνοντάς τους ένα πλάτος ρευστού, ένα ελάχιστο ύψος και τους επιπλέει αριστερά (γι 'αυτό το συνολικό περιτύλιγμα έχει μια καθαρή επίστρωση). Στη συνέχεια, κάνοντας σημαντικό το γεγονός ότι η υπερχείλιση είναι κρυμμένη (διαφορετικά θα δούμε το επιπλέον περιεχόμενο ανά πάσα στιγμή) και τη σχετική θέση τους. Στη συνέχεια, κάνουμε το δίκτυο αυτό πιο φιλικό προς το χρήστη, χρησιμοποιώντας ερωτήματα μέσων ζευγαρώματος για μερικά διαφορετικά μεγέθη οθόνης και αυξάνοντας το πλάτος κάθε κελιού. Αυτός ο κώδικας σημαίνει ότι το πλέγμα μας θα ξεκινά από ένα σχέδιο σε 3 στήλες σε πλήρες μέγεθος επιφάνειας εργασίας και θα περάσει από δύο στήλες και τελικά από μία στήλη μειώνοντας παράλληλα το μέγεθος της οθόνης.
Τώρα που τα εξωτερικά κουτιά είναι στη θέση τους, στοχεύουμε τα εσωτερικά τμήματα, το εικονίδιο υπηρεσίας και την περιγραφή υπηρεσίας. Κάνουμε αυτά τα απόλυτα τοποθετημένα (εξ ου και το ελάχιστο ύψος στο προηγούμενο στυλ) και τα τοποθετούμε και τα δύο στην επάνω αριστερή πλευρά (θα αλλάξουμε τη θέση της περιγραφής σε μια στιγμή). Τους κάνουμε 100% πλάτος και ύψος για να γεμίσουν το γονικό τους στοιχείο, και το υπόλοιπο είναι μόνο για οπτικό εφέ. Τέλος, στοχεύουμε καθαρά στην περιγραφή div και κάνουμε την αριστερή τιμή 100%. Αυτό ωθεί ολόκληρο το κιβώτιο στα δεξιά και εκτός οράσεως λόγω της υπερχείλισης που είναι κρυμμένη στο .service div. Αυτή η τιμή "αριστερά" θέσης είναι αυτό που θα στοχεύσουμε και θα προωθήσουμε με το jQuery, γι 'αυτό είναι σημαντικό να το ορίσουμε τώρα.
Ας προχωρήσουμε στο επόμενο βήμα, εδώ θα χρησιμοποιήσουμε το @ font-face για να λάβουμε τη γραμματοσειρά του εικονιδίου μας και θα ορίσουμε τα ονόματα κλάσεων που έχουμε ήδη χρησιμοποιήσει στο HTML για να εμφανιστούν ως τα σωστά εικονίδια. Το πρώτο βήμα είναι να βρείτε έναν ηλεκτρονικό πόρο που μπορεί να δημιουργήσει μια εικονική γραμματοσειρά κατάλληλη για τις ανάγκες σας, υπάρχουν αρκετοί εκεί έξω, αλλά για αυτό το παράδειγμα έχω αποφασίσει να χρησιμοποιήσω Φανταστικό . Στην τοποθεσία που επιλέγετε πρώτα τα εικονίδια που θέλετε να χρησιμοποιήσετε, αυτό προφανώς αλλάζει για οποιοδήποτε έργο εργάζεστε. Αλλά στη συνέχεια μπορείτε να αλλάξετε κάποιες πληροφορίες, όπως τα ονόματα τάξεων των εικονιδίων και το όνομα γραμματοσειράς όπως αυτό:
Έτσι, όπως μπορείτε να δείτε, έχω επιλέξει τα ονόματα των τάξεων που χρησιμοποιήσαμε στο HTML, ώστε να ταιριάζουν χωρίς να έχουν ταλαιπωρία. Η υπηρεσία σας δίνει τη δυνατότητα λήψης ενός φακέλου "γραμματοσειρών" και κάποιου κωδικού. Τοποθετήστε το φάκελο "γραμματοσειρές" στον φάκελο css (ή όποτε σας βολεύει). Στη συνέχεια, πάρτε τον κώδικα που δίνουν και προσθέστε το στο αρχείο css. Εδώ είναι αυτό που χρειάζεστε:
@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";}
Και εκεί το έχετε. Αν επαναφορτώσετε το έργο, θα εμφανιστούν τα εικονίδια. Τώρα το μόνο που έχει απομείνει είναι να τελειώσει το στυλ για να φανεί σαν το τελικό demo.
Ας τελειώσουμε γρήγορα με τα τελικά στυλ που μένουν. Δεν υπάρχει τίποτα απαραίτητο, μόνο σχεδιασμός για να φανεί όπως θέλουμε, οπότε όλα είναι αρκετά αυτονόητα. Εδώ είναι ο κώδικας για να κεντράρετε το πλέγμα και να του δώσετε το μέγιστο πλάτος του. Επίσης, για να κάνετε το ωραίο φαινόμενο επίδρασης στα εικονίδια:
@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;}
Ο στόχος μας με το jQuery είναι να επαναχρησιμοποιούμε το ίδιο απόσπασμα κώδικα για ολόκληρο το πλέγμα. Θα ακούσουμε ένα συμβάν κλικ (στο κουτί υπηρεσίας) και όταν συμβαίνει αυτό, θα ζωντανέψουμε τη θέση του εικονιδίου για να το μετακινήσουμε μακριά και θα φέρουμε την περιγραφή, προσθέτουμε επίσης ένα όνομα κλάσης για βοήθεια με λειτουργικότητα. Έτσι, πρώτα να συμπεριλάβετε το jQuery στη σελίδα σας και, στη συνέχεια, να προσθέσετε τον κώδικα είτε σε ένα άλλο αρχείο δέσμης ενεργειών είτε μέσα σε ένα