4 τρόποι για τη δημιουργία φοβερό CSS μόνο Accordions
Τα ακορντεόν περιεχομένου κάνουν ένα χρήσιμο σχέδιο. Μπορείτε να τα χρησιμοποιήσετε για πολλά διαφορετικά πράγματα: για μενού, λίστες, εικόνες, αποσπάσματα από το άρθρο, αποσπάσματα κειμένου και ακόμη και βίντεο
Τα περισσότερα ακορντεόν εκεί επικαλούνται JavaScript, κυρίως στο jQuery, αλλά καθώς η χρήση προηγμένων τεχνικών CSS3 έγινε ευρέως διαδεδομένη, μπορούμε επίσης να βρούμε ωραία παραδείγματα χρησιμοποιήστε μόνο HTML και CSS, που τους καθιστούν προσβάσιμο σε περιβάλλοντα με απενεργοποιημένη JavaScript.
Η δημιουργία μόνο ακορντεόν CSS μπορεί να είναι ένα δύσκολο έργο, έτσι σε αυτή τη θέση θα προσπαθήσουμε κατανοήστε τις βασικές έννοιες που χρησιμοποιούν οι προγραμματιστές όταν πρέπει να δημιουργήσουν ένα.
Κατά τη δημιουργία καρτών μόνο για CSS υπάρχουν συνήθως δύο κύριες προσεγγίσεις, καθένα από τα οποία έχει δύο συχνές περιπτώσεις χρήσης. Χρησιμοποιείται η πρώτη προσέγγιση κρυμμένα στοιχεία μορφής, ενώ το δεύτερο χρησιμοποιεί Pseudo-επιλογείς CSS.
1. Η μέθοδος του ραδιοφώνου
Η μέθοδος του ραδιοφωνικού κουμπιού προσθέτει μια κρυφή είσοδο ραδιοφώνου και μια αντίστοιχη ετικέτα ετικέτας σε κάθε καρτέλα της ακορντεόν. Η λογική είναι απλή: όταν ο χρήστης επιλέγει μια καρτέλα, ουσιαστικά ελέγχει το κουμπί επιλογής που ανήκει σε αυτήν την καρτέλα, με τον ίδιο τρόπο όταν συμπληρώνει μια φόρμα. Όταν κάνουν κλικ στην επόμενη καρτέλα στο ακορντεόν, επιλέγουν το επόμενο κουμπί επιλογής κ.λπ..
Σε αυτή τη μέθοδο, μόνο μία καρτέλα μπορεί να είναι ανοιχτή Την ίδια στιγμή. Η λογική της HTML φαίνεται κάπως έτσι:
Τίτλος περιεχομένου (μην χρησιμοποιείτε την ετικέτα h1 εδώ)
Κάποιο περιεχόμενο ...
p>
Πρέπει να το κάνετε προσθέστε ένα ξεχωριστό ζεύγος ραδιοεπισήμανσης για κάθε καρτέλα στο ακορντεόν. Το HTML μόνο δεν θα δώσει την επιθυμητή συμπεριφορά, πρέπει να προσθέσετε και τους κατάλληλους κανόνες CSS, ας δούμε πώς μπορείτε να το ολοκληρώσετε.
Κατακόρυφες καρτέλες σταθερού ύψους
Σε αυτήν τη λύση (δείτε το παρακάτω στιγμιότυπο οθόνης), ο προγραμματιστής έκρυψε το κουμπί επιλογής με τη βοήθεια του οθόνη: καμία · τότε έδωσε μια σχετική θέση στην ετικέτα ετικέτας που περιέχει τον τίτλο κάθε καρτέλας και μια απόλυτη θέση στην αντίστοιχη ετικέτα: μετά ψευδο-στοιχείο.
Ο τελευταίος κρατά τη λαβή που σημειώνεται με ένα πράσινο σημάδι + που ανοίγει τις καρτέλες. Οι κλειστές γλωττίδες χρησιμοποιούν επίσης χειρολαβή με πράσινο χρώμα “-” σημάδια. Στο CSS οι κλειστές καρτέλες επιλέγονται με τη βοήθεια του επιλογέα στοιχείου + στοιχείου.
Πρέπει επίσης να δώσετε στο περιεχόμενο της ανοιχτής καρτέλας σταθερό ύψος. Για να το κάνετε αυτό, επιλέξτε το σώμα της ανοιχτής καρτέλας (που έχει επισημανθεί με την κλάση περιεχομένου καρτελών στην παραπάνω HTML) με τη βοήθεια του επιλογέα στοιχείου1 ~ element2 CSS.
Η βασική λογική του CSS εδώ είναι η εξής:
είσοδος [type = ραδιόφωνο] εμφάνιση: κανένας; ετικέτα θέση: σχετική? εμφάνιση: μπλοκ? ετικέτα: μετά από περιεχόμενο: "+"; θέση: απόλυτη; δεξιά: 1em; είσοδος: επιλεγμένο + ετικέτα: μετά από περιεχόμενο: "-"; είσοδος: ελέγχεται ~ .tab-content height: 150px;
Μπορείτε να ρίξετε μια ματιά στο πλήρες CSS εδώ στο Codepen. Το CSS είναι αρχικά γραμμένο στο Sass, αλλά αν κάνετε κλικ στο “Προβολή της σύνταξης” , μπορείτε να δείτε το αρχείο CSS που έχει συνταχθεί.
Σύγκριση εικόνας με κουμπιά ραδιοφώνου
Αυτό το όμορφο ακορντεόν της εικόνας χρησιμοποιεί την ίδια μέθοδο ραδιοφώνου, αλλά αντί για ετικέτες, ο προγραμματιστής εδώ χρησιμοποίησε την ετικέτα HTML για να ολοκληρώσει τη συμπεριφορά του ακορντεόν.
Το CSS είναι κάπως διαφορετικό, κυρίως επειδή στην προκειμένη περίπτωση οι καρτέλες δεν τοποθετούνται κάθετα αλλά οριζόντια. Ο προγραμματιστής χρησιμοποίησε τον επιλογέα CSS στοιχείου + στοιχείου (ο οποίος χρησιμοποιήθηκε στην προηγούμενη περίπτωση για να επιλέξει τις εναλλαγές) για να διασφαλίσει ότι οι άκρες των καλυμμένων εικόνων παραμένουν ορατές.
Διαβάστε τον λεπτομερή οδηγό σχετικά με τον τρόπο δημιουργίας αυτού του κομψού ακορντεόν CSS.
2. Η μέθοδος του κουτιού ελέγχου
Η μέθοδος του πλαισίου ελέγχου χρησιμοποιεί τον τύπο εισαγωγής πλαισίου ελέγχου αντί για το κουμπί επιλογής. Όταν ο χρήστης επιλέξει μια καρτέλα, ουσιαστικά ελέγχει το αντίστοιχο πλαίσιο ελέγχου.
Η διαφορά σε σύγκριση με τη μέθοδο του ραδιοφωνικού κουμπιού είναι ότι είναι είναι δυνατό να ανοίξετε ταυτόχρονα περισσότερες από μία καρτέλες, όπως ακριβώς είναι δυνατό να ελέγξετε περισσότερα από ένα πλαίσια ελέγχου μέσα σε μια φόρμα.
Από την άλλη πλευρά, οι καρτέλες δεν θα κλείσουν μόνοι τους όταν ο χρήστης κάνει κλικ σε άλλο. Η λογική της HTML είναι η ίδια με πριν, μόνο στην περίπτωση αυτή πρέπει να χρησιμοποιήσετε το πλαίσιο ελέγχου για τον τύπο εισόδου.
Τίτλος περιεχομένου (μην χρησιμοποιείτε την ετικέτα h1 εδώ)
Κάποιο περιεχόμενο ...
p>
Επίτοιχο κορνίζα σταθερού ύψους
Αν θέλετε καρτέλες περιεχομένου σταθερού ύψους, η λογική του CSS είναι σχεδόν η ίδια όπως στην περίπτωση κουμπιού ραδιοφώνου, είναι μόνο ο τύπος εισόδου έχει αλλάξει από το ραδιόφωνο στο πλαίσιο ελέγχου. Σε αυτό το στυλό Codepen μπορείτε να ρίξετε μια ματιά στον κώδικα.
Ανώτατο πλαίσιο ελέγχου ύψους υγρού
Όταν περισσότερες από μία καρτέλες είναι ανοιχτές ταυτόχρονα, η εμφάνιση σταθερών διαδρομών ύψους μπορεί να επηρεάσει αρνητικά την εμπειρία χρήστη καθώς το ύψος της ακορντεόν μπορεί να αυξηθεί σημαντικά. Αυτό μπορεί να βελτιωθεί αν εσύ αλλάξτε το σταθερό ύψος σε ύψος ρευστού. αυτό σημαίνει ότι το ύψος των ανοικτών γλωττίδων επεκτείνεται ή συρρικνώνεται ανάλογα με το μέγεθος του περιεχομένου που διατηρούν.
Για να το κάνετε αυτό, πρέπει να το κάνετε τροποποιήστε το σταθερό ύψος του περιεχομένου της καρτέλας σε μέγιστο ύψος, και χρησιμοποιούν σχετικές μονάδες:
είσοδος: ελέγχεται ~ .tab-content max-height: 50em;
Εάν θέλετε να καταλάβετε καλύτερα πώς λειτουργεί αυτή η μέθοδος, μπορείτε να ρίξετε μια ματιά σε αυτό το Codepen.
3. Η μέθοδος στόχου
: ο στόχος είναι ένας από τους ψευδο-επιλογείς του CSS3. Με τη βοήθειά του μπορείτε να συνδέσετε ένα στοιχείο HTML σε μια ετικέτα αγκύρωσης με τον ακόλουθο τρόπο:
Τίτλος της καρτέλας
Περιεχόμενο της καρτέλας
Όταν ο χρήστης κάνει κλικ στον τίτλο μιας καρτέλας, ολόκληρη η ενότητα θα ανοίξει χάρη στο :στόχος ψευδο-επιλογέα και η διεύθυνση URL θα αλλάξει και στην ακόλουθη μορφή: www.some-url.com/#tab-1.
Η ανοιχτή καρτέλα μπορεί να σχεδιαστεί στο CSS με τη βοήθεια του ενότητα: στόχος ... κανόνας. Έχουμε ένα σπουδαίο φροντιστήριο εδώ στο hongkiat για το πώς μπορείτε να δημιουργήσετε ωραία ακορντεόν CSS μόνο με το :στόχος μεθόδου σε κάθετες και οριζόντιες διατάξεις.
Το κύριο μειονέκτημα του :στόχος η μέθοδος είναι αυτή αλλάζει τη διεύθυνση URL όταν ο χρήστης κάνει κλικ στις καρτέλες. Αυτό επηρεάζει το ιστορικό του προγράμματος περιήγησης και το κουμπί επιστροφής του προγράμματος περιήγησης δεν θα μεταφέρει τον χρήστη στην προηγούμενη σελίδα, αλλά στην προηγούμενη κατάσταση του ακορντεόν.
4. Η μέθοδος: hover
Αυτό το τελευταίο μειονέκτημα μπορεί να ξεπεραστεί εάν χρησιμοποιήσουμε το :φτερουγίζω Pseudo-επιλογέα CSS αντί για :στόχος, αλλά σε αυτήν την περίπτωση οι καρτέλες δεν θα αντιδράσουν στο κλικ, αλλά στο συμβάν του hover. Το κόλπο εδώ είναι ότι πρέπει να το κάνετε είτε να αποκρύψετε τα μη αναφερόμενα στοιχεία, ή μειώστε το πλάτος ή το ύψος τους - ανάλογα με τη διάταξη των καρτελών
Το κινούμενο στοιχείο πρέπει να γίνει ορατό ή να ρυθμιστεί σε πλήρες πλάτος / ύψος για να γίνει η εργασία του ακορντεόν.
Οι ακόλουθες 3 ακορντεόν CSS μόνο έγιναν με τη μέθοδο: hover, κάντε κλικ στους συνδέσμους κάτω από τα στιγμιότυπα οθόνης για να ρίξετε μια ματιά στον κώδικα.
Οριζόντια ακορίνωση εικόνας
Κομψή Ακορντεόν
Δέσμευση με ενεργοποιημένη κίνηση με την προεπιλεγμένη κατάσταση
