Γραμματοσειρά πλοήγησης βασισμένα σε καρτέλες 50+ με καθαρό CSS
Ένα από τα πιο ζωτικά καθήκοντα ενός σχεδιαστή εμπειρίας χρήστη είναι να βεβαιωθείτε ότι το η πλοήγηση του ιστότοπου είναι απλή και φιλική προς το χρήστη. Και ποιος άλλος τρόπος για να γίνει αυτό δυνατό παρά μέσω καρτών πλοήγησης.
Καλά σχεδιασμένες καρτέλες πλοήγησης όχι μόνο βοηθούν τους χρήστες να γνωρίζουν πού να πάνε, αλλά είναι σημαντικό να οδηγούν την κυκλοφορία στις εσωτερικές σελίδες του ιστοτόπου ή του blog σας.
Έτσι, για τους φίλους του web designer μου, εδώ είναι μια μακρά λίστα με ωραία και καθαρά CSS καρτέλα πλοήγησης σενάρια. Κάθε επιλογή έχει ένα live demo μαζί με την πηγή λήψης. Συνεχίστε λοιπόν και ρίξτε μια ματιά στον εαυτό σας.
bootstrap-tabs-x - Μια πρόσθετη καρτέλα plugin που είναι ενσωματωμένη στην κορυφή των καρτελών Bootstrap. Μπορεί ευθυγραμμίστε τις καρτέλες, περιστρέψτε τους τίτλους, φορτώστε περιεχόμενο μέσω του AJAX, και πολλά άλλα χαρακτηριστικά. [Διαδήλωση]
Καθαρές καρτέλες CSS με δείκτη - Μια σύγχρονη αλλά απλή βιβλιοθήκη καρτελών που χτίστηκε χωρίς JavaScript. Αυτό σημαίνει ότι είναι γρήγορα και όμορφα καθώς και - όσο όμορφα βλέπετε στις δημοφιλέστερες ιστοσελίδες. [Διαδήλωση]
Ραβδωτό ύφασμα - Το Tabby σάς επιτρέπει να δημιουργείτε καρτέλες απλής εναλλαγής, οι οποίες μπορούν να εμφανίζουν οποιοδήποτε περιεχόμενο, συμπεριλαμβανομένων των βίντεο. Προσφέρει διάφορα προηγμένες επιλογές και υποστηρίζει την NPM και την Bower πολύ. [Διαδήλωση]
Αισθητική πλοήγηση με καρτέλες - Μια σύγχρονη, εύχρηστη πλοήγηση με καρτέλες υποστηριζόμενη από το JS και το CSS, το οποίο είναι χτισμένο με κινητό - πρώτα κατά νου και υποστηρίζει οριζόντια και κάθετα στυλ θέσης. [Διαδήλωση]
Toggler - Το Toggler είναι ένα καθαρό plugin JavaScript για τη δημιουργία δυνατοτήτων που μπορούν να συνδεθούν μεταξύ τους ακορντεόν και καρτέλες. Επίσης, μπορείτε να εμφανίσετε / αποκρύψετε μόνο οποιοδήποτε στοιχείο στη σελίδα. [Διαδήλωση]
Καθαρές καρτέλες CSS - ΕΝΑ απλό απόσπασμα καρτελών που δημιουργήθηκε χρησιμοποιώντας CSS και JS. Παρόλο που ο κώδικας παραδείγματος δείχνει απλές καρτέλες μπορείτε ακόμα να ομορφύνετε τις καρτέλες αλλάζοντας το στυλ τους χρησιμοποιώντας το CSS. [Διαδήλωση]
Tabsy CSS - Μια βιβλιοθήκη μόνο για το CSS για τη δημιουργία απλών στοιχείων εναλλαγής, όπως καρτέλες. Αυτή η βιβλιοθήκη, αντίθετα με λίγες από τις παραπάνω, δεν χρειάζεται εξαρτήσεις - ούτε καν κώδικα JS. [Διαδήλωση]
Tabbis.js - Το Tabbis είναι ένα απλό αλλά προηγμένο πρόσθετο. Χρησιμοποιώντας τις προηγμένες επιλογές διαμόρφωσης, μπορείτε να δημιουργήσετε ενωμένες καρτέλες και να ορίσετε τις επανάκλησεις πολύ. [Διαδήλωση]
Απαντήσεις Pure CSS Tabs [Διαδήλωση]
CSS Tabs [Διαδήλωση]
Καρτέλες που χρησιμοποιούν Pitaya - Οι καρτέλες που χρησιμοποιούν το Pitaya σάς βοηθούν να δημιουργήσετε κινούμενες καρτέλες μετάβασης εύκολα. Ωστόσο, πρέπει να συμπεριλάβετε την Pitaya, η οποία είναι η ίδια η βιβλιοθήκη και αυξάνει το χρόνο φόρτωσης. [Διαδήλωση]
jTabs - Το jTabs είναι μια βιβλιοθήκη καρτελών που έχει κατασκευαστεί χρησιμοποιώντας καθαρό JavaScript. Αυτό σημαίνει ότι είναι χτισμένο με δεν υπάρχουν εξωτερικές εξαρτήσεις όπως το jQuery και υποστηρίζει και λίγες επιλογές διαμόρφωσης. [Διαδήλωση]
Ανταπόκριτες καρτέλες Flexbox [Διαδήλωση]
Tabs Accordion [Διαδήλωση]
tabs.js - Το tabs.js είναι μια καθαρή βιβλιοθήκη καρτελών JavaScript εμπνευσμένη από το Accordion / Tabs των Bourbon Ανταλλακτικών. Είναι ανταποκρίνεται έτσι Οι καρτέλες αλλάζουν σε ακορντεόν σε μικρές οθόνες. [Διαδήλωση]
WellTabber - Το WellTabber είναι ένα άλλο απλό πρόσθετο JavaScript όπως το Tabby. Όπως και το τελευταίο, αυτό υποστηρίζει διάφορες επιλογές για τη διαμόρφωση των καρτελών. Επίσης, μπορείτε να εμφανίσετε βέλη πλοήγησης. [Διαδήλωση]
Διασύνδεση με καρτέλα 3D Cube [Διαδήλωση]
Μονάδα καρτελών για ES6 [Διαδήλωση]
Μεταβλητά ύψη με καρτέλες CSS [Διαδήλωση]
Καρτέλες Σχεδιασμού Υλικού - Ένα υλικό σχεδιασμό εμπνευσμένο αποσπάσματα καρτελών που χτίστηκε με τη χρήση του JavaScript Vanilla. είναι εύκολο στη χρήση και προσαρμόσιμο επίσης. Ωστόσο, δεν περιλαμβάνει προχωρημένες επιλογές. [Διαδήλωση]
Κινούμενες καρτέλες CSS - Οι κινούμενες καρτέλες CSS είναι ένα σύστημα καρτελών μόνο CSS που σας επιτρέπει να δημιουργείτε απλές, φωτεινές καρτέλες. Σε αντίθεση με το Tabby ή το WellTabber, αυτό δεν προσφέρει καμία προηγμένη διαμόρφωση. [Διαδήλωση]
pureTabs [Διαδήλωση]
Καρτέλες με δυνατότητα προσπέλασης της βανίλιας JavaScript [Διαδήλωση]
Scifi-κινούμενες καρτέλες [Διαδήλωση]
Pure CSS Bootstrap προσαρμοστικές καρτέλες - Ένα σύστημα καρτέλας εμπνευσμένο από Bootstrap που δημιουργήθηκε χρησιμοποιώντας μόνο CSS και χωρίς JavaScript. Τι μοναδικό χαρακτηριστικό που φέρνει είναι οι καρτέλες υπερσύνδεσης στην οθόνη μετακινούνται σε αναπτυσσόμενη λίστα. [Διαδήλωση]
Αναδιπλούμενη μπάρα καρτελών - Ένα widget καρτελών που βασίζεται σε καθαρό CSS3 και χωρίς JavaScript, όπως διάφορα πρόσθετα σε αυτήν τη λίστα. Αυτό που την καθιστά ενδιαφέρουσα είναι οι καρτέλες της όμορφη αναδιπλούμενη μετάβαση. [Διαδήλωση]
Awesome CSS Animated Tabs [Διαδήλωση]
JavaScript Tabifier - Μια πρόσθετη καρτέλα plugin που χτίστηκε μόνο με JavaScript. Σας επιτρέπει να ορίσετε μια προεπιλεγμένη καρτέλα, αλλάξτε την καρτέλα δυναμικά, και προσθέστε λειτουργίες επανάκλησης συμβάντων onLoad και onClick. [Διαδήλωση]
Καρτέλες Σκελετού [Διαδήλωση]
Tabtastic - Το Tabtastic είναι ένα εύκολο plugin για την εφαρμογή καρτελών χρησιμοποιώντας CSS και JS. Το χρησιμοποιεί σημασιολογική σήμανση, είναι προσβάσιμη για αναγνώστες οθόνης, και υποστηρίζει ένθετες καρτέλες σε μια σελίδα. [Διαδήλωση]
Καρτέλες φακέλων CSS3 & jQuery - Αυτό το εύκολο σεμινάριο (με downloadable code) μοιράζεται περίπου δημιουργώντας καρτέλες φακέλου χρησιμοποιώντας CSS3 και jQuery. Μου θυμίζει τις καρτέλες που εμφανίζονται σε προγράμματα περιήγησης όπως το Google Chrome. [Διαδήλωση]
Περιεχόμενο με καρτέλες [Διαδήλωση]
Καρτέλες πλοήγησης ίσου πλάτους - Ένα απόσπασμα κώδικα, παρουσιάζοντας τη χρήση απλού CSS για να δημιουργήσετε καρτέλες πλοήγησης ίσου πλάτους. Μπορείς προσαρμόστε την εμφάνιση, αλλά δεν προσφέρει προχωρημένες επιλογές εκτός πλαισίου. [Διαδήλωση]
Περιεχόμενο με καρτέλες με jQuery & CSS [Διαδήλωση]
Οδηγός εκκίνησης του Twitter - Ο Βοηθητικός Οδηγός Bootstrap του Twitter είναι ένα πρόσθετο για την κατασκευή οδηγών μιας δομής. Παρατήρησα ότι θα μπορούσατε να δημιουργήσετε μόνο καρτέλες με την απόκρυψη ή την αφαίρεση του επόμενου και των προηγούμενων κουμπιών. [Διαδήλωση]
Καθαρές καρτέλες CSS [Διαδήλωση]
Ανταπόκριτες καρτέλες CSS [Διαδήλωση]
Απλά μια άλλη καρτέλες CSS - Μια όμορφα-δημιουργημένη δομή καρτέλα που χτίστηκε με ακριβώς CSS, το οποίο λειτουργεί σε σύγχρονα προγράμματα περιήγησης. Ωστόσο, σε αντίθεση με λίγα ισχυρά plugins που δόθηκαν παραπάνω, δεν έχει προηγμένες επιλογές. [Διαδήλωση]
Ανταπόκριση Ακορντεόν στις καρτέλες - Ανταπόκριση στο Accordion to Tabs, όπως υποδηλώνει το όνομα, λειτουργεί ως ακορντεόν ή καρτέλες με βάση το πλάτος της οθόνης. Το δείχνει καρτέλες αν είναι δυνατόν άλλο ακορντεόν εάν το μέγεθος είναι μικρό. [Διαδήλωση]
CardTabs - Το CardTabs είναι ένα εξαιρετικά ελαφριά καρτέλα με βάση το jQuery, που έρχεται με πολλαπλά θέματα. Μπορείτε επίσης να δημιουργήσετε νέα θέματα και να ορίσετε δυναμικά την ενεργή καρτέλα. [Διαδήλωση]
Aria Tabs [Διαδήλωση]
Ελάχιστες & Sexy Tabs - Ένα όμορφο, νέο απόσπασμα καρτελών που είναι διατίθεται σε δύο σχέδια χρωμάτων - ελαφριά και σκούρα. Είναι χτισμένο χρησιμοποιώντας το jQuery, οπότε δεν είναι τόσο ελαφρύ όσο κάποια άλλα πρόσθετα που αναφέρονται παραπάνω. [Διαδήλωση]
Tabbed Widget [Διαδήλωση]
Προσαρμοστικές καρτέλες - Οι προσαρμοζόμενες καρτέλες είναι ένα απλό, όμορφο απόσπασμα καρτελών. Εκτός από το μοντέρνο σχεδιασμό, δεν διαθέτει περισσότερα χαρακτηριστικά όπως αυτά που διατίθενται σε μερικά προηγμένα πρόσθετα που δίνονται παραπάνω. [Διαδήλωση]
Καρτέλα στυλ δέντρου [Διαδήλωση]
Tabulous.js [Διαδήλωση]
jQuery Tabs - Το jQuery Tabs είναι ένα απλό plugin για τη δημιουργία καρτελών. Όπως υποδηλώνει το όνομά του, είναι που κατασκευάστηκε με τη χρήση του jQuery, σε αντίθεση με ορισμένα από τα προαναφερθέντα πρόσθετα που είναι χτισμένα με καθαρό CSS ή JavaScript. [Διαδήλωση]
jQuery rTabs [Διαδήλωση]
Σημείωση του συντάκτη: Αυτή η δημοσίευση δημοσιεύθηκε αρχικά τον Ιούνιο του 2008 και ενημερώθηκε τον Απρίλιο του 2018 με βάση νέο περιεχόμενο.
