Πώς να δημιουργήσετε το σύμβολο περιεχομένου με βάση το CSS
Στο σημερινό σεμινάριο θα μάθουμε πώς μπορούμε να δημιουργήσουμε ένα οριζόντιο και κάθετο ακορντεόν με τη χρήση του CSS3. Υπάρχουν πολλά plug-ins του jQuery που μπορούν να κάνουν αυτή τη δουλειά για εσάς, αλλά τι κάνετε αν ο επισκέπτης έχει απενεργοποιημένη τη Javascript, τότε το ακορντεόν δεν θα λειτουργήσει σωστά. Αν το ακορντεόν σας είναι καθαρά σε CSS τότε θα λειτουργήσει για όλους τους επισκέπτες σας.
Θα δημιουργήσουμε ένα οριζόντιος και κατακόρυφος αρμονία περιεχομένου. Κάνοντας κλικ στο κείμενο με τίτλο, θα ανοίξει η παρουσίαση του πλήρους περιεχομένου και θα δείτε μια γρήγορη προεπισκόπηση (screenshots) πώς μοιάζουν.
Να σου αρέσει ό, τι βλέπεις? Αφήστε την κωδικοποίηση να ξεκινήσει!
1. Προετοιμασία HTML και περιεχομένου
Αρχικά θα δημιουργήσουμε το HTML για το ακορντεόν.
Η δομή χρειάζεται ένα δοχείο div και στη συνέχεια να έχει ένα Ενότητα για κάθε διαφάνεια στην ακορντεόν. Σε αυτό το παράδειγμα θα έχουμε 5 διαφάνειες. Κάθε μία από τις διαφάνειες θα έχει έναν τίτλο και μια παράγραφο για το περιεχόμενο.
Σχετικά με εμάς
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat congue dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
Υπηρεσίες
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat congue dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
Blog
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat αμφισβητεί το dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
Χαρτοφυλάκιο
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat αμφισβητεί το dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
Επικοινωνία
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat congue dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
Τώρα έχουμε τις διαφάνειες μας, μπορούμε να αρχίσουμε να στυλάρουμε το ακορντεόν.
2. CSS Styling
Πρώτα πρέπει να στυλίσουμε το περιεχόμενο div του ακορντεόν. Αυτό θα μας δώσει μια ιδέα για τον τρόπο εμφάνισης καθεμιάς από τις διαφάνειες και κάθε έναν από τους τίτλους.
/ * Καθορισμός κουτιού ακορντεόν * / .accordion width: 830px; υπερχείλιση: κρυφή; περιθώριο: 10px αυτόματα? χρώμα: # 474747; φόντο: # 414141; padding: 10px;
Στη συνέχεια θα δημιουργήσουμε τους τίτλους για κάθε μία από τις διαφάνειες.
.τμήμα ακορντεόν float: left? υπερχείλιση: κρυφή; χρώμα: # 333; δρομέας: δείκτης; φόντο: # 333; περιθώριο: 3px; . τμήμα κορδόνι: hover background: # 444;
Ρυθμίζουμε το χρώμα φόντου για να είναι σκούρο γκρι στην ενότητα που θα είναι ο τίτλος όπου οι επισκέπτες θα κάνουν κλικ για να εμφανίσουν τη διαφάνεια. Χρησιμοποιούμε αυτή την ενότητα τόσο για τον τίτλο όσο και για το περιεχόμενο, πράγμα που σημαίνει ότι μπορούμε να χρησιμοποιήσουμε λιγότερη HTML και να επαναχρησιμοποιήσουμε τον τίτλο της διαφάνειας ως τίτλο του περιεχομένου.
.τομέας ακορντεόν p εμφάνιση: κανένας;
Αυτή τη στιγμή όλες οι διαφάνειες θα κλείσουν, οπότε πρέπει να σιγουρευτούμε ότι η παράγραφος είναι κρυμμένη από την προβολή μέχρι να ανοίξει η διαφάνεια, οπότε για τώρα ορίσατε την εμφάνιση της παραγράφου σε καμία.
.τμήμα ακορντεόν: μετά από θέση: σχετική? γραμματοσειρά-μέγεθος: 24px; χρώμα: # 000; γραμματοσειρά-βάρος: έντονα. .ορισμός: nth-child (1): μετά από περιεχόμενο: '1'; .ορισμός: nth-child (2): μετά από περιεχόμενο: '2'; . Τομέας συμφώνου: nth-παιδί (3): μετά από περιεχόμενο: '3'; .οκτορία: nth-παιδί (4): μετά από περιεχόμενο: '4'; .ορισμός: nth-child (5): μετά από περιεχόμενο: '5';
Με τις διαφάνειες κλειστές θέλουμε να εμφανίσουμε έναν αριθμό στο κάτω μέρος της επικεφαλίδας για να πούμε ποιο αριθμό διαφανειών είμαστε. Γι 'αυτό θα χρησιμοποιήσουμε το CSS για να προσθέσουμε περιεχόμενο μετά την επικεφαλίδα του τμήματος, αυτό μπορεί να γίνει χρησιμοποιώντας το :μετά επιλογέας ψευδο-κατηγορίας.
Τώρα έχουμε δημιουργήσει την επικεφαλίδα της διαφάνειας που μπορούμε να κάνουμε το συμβάν κλικ για την εμφάνιση της διαφάνειας στο ακορντεόν. Αλλά υπάρχει ένα πρόβλημα, το CSS δεν έχει ένα συμβάν κλικ, γι 'αυτό και το ακορντεόν δημιουργείται κανονικά με τη χρήση του jQuery ώστε να μπορέσουμε να επισυνάψουμε ένα συμβάν κλικ στο κείμενο του τίτλου.
Πρέπει να μιμηθούμε το συμβάν κλικ στο CSS το οποίο μπορεί να γίνει χρησιμοποιώντας το :στόχος επιλογέας ψευδο-κατηγορίας.
3. Χρήση :στόχος ψευδοκλασσικός επιλογέας
:στόχος μας επιτρέπει να στυλίσουμε τον αναγνωριστικό θραύσης. Μερικές φορές χρησιμοποιούμε μια ετικέτα αγκύρωσης επί της σελίδας για να δείξετε μια θέση στη σελίδα. Κάνοντας κλικ στο σύνδεσμο ταυτότητα στην ετικέτα άγκυρας γίνεται ο στόχος και μπορείτε να το στυλ με τη χρήση του :στόχος εκλέκτορας.
Για να προσθέσετε αυτό στο ακορντεόν πρέπει να προσθέσετε έναν σύνδεσμο γύρω από τον τίτλο που δείχνει σε ένα ταυτότητα της ολίσθησης.
Σχετικά με εμάς
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Suspendisse id lobortis massa. Nunc viverra velit leo, κάθισαν amet elementum mi. Η φούσκα μπορεί να φτάσει σε μια ματιά. Το Curabitur facilisis rhoncus eros eget placerat. Ο αμιγής μάρτυρας κάθισε απλά και μόνο προσωρινά. Ο ετικέτας placerat αμφισβητεί το dolor vitae adipiscing. Ακόμη, Etiam mattis dignissim gravida. Αλήθεια δεν είναι ακριβώς πριν, δεν είναι ημ. Η συνύπαρξη της ενδιάμεσης μάζας, η πορνεία, Τα μακεδονικά κείμενα, τα οποία δεν μπορούν να διαδοθούν. Βελτίωση της ποιότητας του προϊόντος. Phasellus eu erat enim. Επικεφαλής στη μαγεία της μαζικής κυβέρνησης στην ελευθερία της ελευθερίας.
.τομέας ακορντεόν: στόχος φόντο: #FFF; padding: 10px; .ορισμός: στόχος: τοποθετήστε το δείκτη του ποντικιού background: #FFF; . τμήμα κορδόνι: στόχος h2 πλάτος: 100%; . τμήμα κορδόνι: στόχος h2 α χρώμα: # 333; padding: 0; . τμήμα κορδόνι: στόχος p εμφάνιση: μπλοκ? . τμήμα κορδονιών h2 a padding: 8px 10px; εμφάνιση: μπλοκ? μέγεθος γραμματοσειράς: 16px; γραμματοσειρά-βάρος: κανονική. χρώμα: #eee; κείμενο-διακόσμηση: κανένα?
Ο παραπάνω κώδικας θα αλλάξει το μέγεθος της διαφάνειας ώστε να ταιριάζει με το υπόλοιπο της ακορντεόν και θα αλλάζει το χρώμα φόντου σε λευκό. Η παράγραφος ήταν κρυμμένη έτσι ώστε τώρα στο στόχο πρέπει να εμφανιστεί η παράγραφος.
Τώρα, όταν κάνετε κλικ στον τίτλο της ακορντεόν, η διαφάνεια θα αλλάξει στυλ για να εμφανιστεί το περιεχόμενο της διαφάνειας.
4. Οριζόντια ακορδία
Ο παραπάνω κώδικας θα δημιουργήσει το γενικό ακορντεόν τώρα μπορούμε να αρχίσουμε να κάνουμε τις αλλαγές CSS για τις διαφορές μεταξύ της οριζόντιας και της κάθετης ακορντεόν. Και οι δύο αυτές ακορντεόν έχουν την ίδια λειτουργικότητα, αλλά η αρχική στυλ θα ήταν διαφορετική.
.οριζόντια τομή πλάτος: 5%; ύψος: 250px; -μωβ-μετάβαση: πλάτος 0.2s ευκολία-out? -περιοχή ιστού: πλάτος 0,2 δευτερόλεπτα. -o-μετάβαση: πλάτος 0.2s ευκολία-out? μετάβαση: πλάτος 0.2s ease-out?
Αρχικά ορίσαμε το πλάτος του τίτλου σε 5%, επομένως είναι μια κλειστή διαφάνεια. Δεδομένου ότι η ενότητα είναι τόσο η επικεφαλίδα όσο και το περιεχόμενο της διαφάνειας, πρέπει να προσθέσουμε την κινούμενη εικόνα για την εμφάνιση του περιεχομένου, χρησιμοποιώντας την ιδιότητα μετάβασης.
/ * Τοποθετήστε τον αριθμό της διαφάνειας * / .horizontal section: μετά από top: 140px; αριστερά: 15px;
Η θέση του αριθμού στο διαφάνεια θα είναι η ίδια θέση σε κάθε κλειστή επικεφαλίδα που είναι τοποθετημένες διαφορετικά από τους κάθετους τίτλους.
/ * Επικεφαλίδα της κλειστής διαφάνειας / .οριζόντια τομή h2 -webkit-transform: περιστρέψτε (90deg); -moz-transform: περιστρέψτε (90deg); -o-μετασχηματισμός: περιστροφή (90deg); μετασχηματισμός: περιστροφή (90deg); πλάτος: 240px; θέση: σχετική. αριστερά: -100px; κορυφή: 85px; / * Με το ποντίκι πάνω από ανοιχτό slide * / .horizontal: target width: 73%; ύψος: 230px; . οριζόντια: στόχος h2 top: 0px; αριστερά: 0; -webkit-transform: περιστρέψτε (0deg); -moz-μετασχηματισμός: περιστροφή (0deg); -o-μετασχηματισμός: περιστροφή (0deg); μετασχηματισμός: περιστροφή (0deg);
Ο παραπάνω κώδικας θα αλλάξει το μέγεθος της διαφάνειας ώστε να ταιριάζει με το υπόλοιπο της ακορντεόν. Η επικεφαλίδα περιστράφηκε κατακόρυφα για να τρέξει προς τα κάτω τον τίτλο, αλλά τώρα με την ανοιχτή ολίσθηση πρέπει να αλλάξουμε το κείμενο πίσω ώστε να είναι οριζόντια με περιστροφή του κειμένου πίσω σε 0 μοίρες.
5. Κατακόρυφο ακορντεόν
Το κάθετο ακορντεόν λειτουργεί με τον ίδιο τρόπο όπως και το οριζόντιο ακορντεόν, εκτός από το ότι πρέπει να το αλλάξουμε ύψος αντί για το πλάτος και δεν χρειάζεται να αλλάξουμε την ευθυγράμμιση του κειμένου.
.κατακόρυφο τμήμα πλάτος: 100%; ύψος: 40px; -webkit-transition: ύψος 0.2s ease-out? -Μοζ-μετάβαση: ύψος 0,2 δευτερόλεπτα ease-out? -ο-μετάβαση: ύψος 0,2 δευτερόλεπτα ease-out? μετάβαση: ύψος 0.2s ease-out? / * Ρύθμιση ύψους της διαφάνειας * / .vertical: target height: 250px; πλάτος: 97%.
Στο στόχος περίπτωση του κάθετου ακορντεόν που πρόκειται να αλλάξουμε ύψος της επικεφαλίδας για την εμφάνιση της διαφάνειας.
.κατακόρυφο τμήμα h2 θέση: σχετική; αριστερά: 0; κορυφή: -15px; / * Ρυθμίστε τη θέση του αριθμού στο slide * / .vertical section: μετά το top: -60px; αριστερά: 810px; .περιορισμένη ενότητα: στόχος: μετά από αριστερά: -9999px;
Τα παραπάνω θα αλλάξουν το θέση του επικεφαλικού κειμένου στην κλειστή διαφάνεια. Με την κλειστή διαφάνεια πρέπει να ρυθμίσουμε το θέση του αριθμού που βρίσκεται στα δεξιά του ακορντεόν. Όταν η διαφάνεια είναι ανοικτή, πρέπει να αποκρύψουμε αυτόν τον αριθμό στην επικεφαλίδα όταν ο στόχος έχει ρυθμιστεί, ώστε να αλλάξουμε την αριστερή θέση από την οθόνη.
Τώρα, όταν κάνετε κλικ στον τίτλο της ακορντεόν, η διαφάνεια θα αλλάξει στυλ για να εμφανιστεί το περιεχόμενο της διαφάνειας.
Σημείωση του συντάκτη: Αυτή η ανάρτηση είναι γραμμένη από Paul Underwood για το Hongkiat.com. Ο Paul είναι προγραμματιστής PHP Web από το Bristol, Ηνωμένο Βασίλειο. Γράφει μαθήματα σχετικά με την Ανάπτυξη Ιστού: κύρια θέματα είναι η PHP, jQuery, CSS3 και HTML5. Καταγράφει επίσης χρήσιμα αποσπάσματα κώδικα στο Paulund.co.uk.
