Δημιουργία ευφυέστερου μενού πλοήγησης με αυτό το πρόσθετο jQuery
Κάθε σύγχρονος χώρος χρειάζεται ένα ανταποκρινόμενη διάταξη και ένα χρησιμοποιήσιμη πλοήγηση. Αυτό είναι δεδομένο.
Αλλά, μενού χάμπουργκερ μπορούν να πάνε μόνο μέχρι τώρα και αυτοί αλλάξει ριζικά τη χρηστικότητα για διάφορα μεγέθη οθόνης. Ο καλύτερος τρόπος για να το χειριστείτε είναι με κρύβοντας προοδευτικά συνδέσμους με ένα plugin όπως OkayNav.
Αυτό το δωρεάν jQuery plugin προσθέτει ένα πολύ απλό χαρακτηριστικό μενού σε οποιαδήποτε σελίδα και αυτόχαμηλά κρύβει στοιχεία πλοήγησης, με βάση διαφορετικά παράθυρα προβολής. Με αυτόν τον τρόπο οι χρήστες smartphone έχουν το μενού απλών χάμπουργκερ, αλλά οι χρήστες tablet μπορούν να δουν και μερικούς συνδέσμους.
Εξ ορισμού, βασίζεται σε ένα στοιχείο και ένα μακρά, μη ταξινομημένη λίστα. Μέχρι στιγμής, δεν νομίζω ότι αυτό το plugin υποστηρίζει πολλά επίπεδα dropdowns, αλλά αν γνωρίζετε ένα κομμάτι jQuery θα μπορούσατε να το προσθέσετε μόνοι σας.
Το OkayNav είναι εξαιρετικά απλό και είναι για απλούστερους ιστότοπους που έχουν μόνο μια χούφτα συνδέσμους πλοήγησης. Αυτοί οι σύνδεσμοι αργά κρύψτε πίσω από ένα μενού εκτός οθόνης μόλις χτυπήσουν ένα συγκεκριμένο παράθυρο προβολής και περισσότερες συνδέσεις κρύβονται τόσο μικρότερο γίνεται το πρόγραμμα περιήγησης.
Θα πρέπει να τυλίξτε τη λίστα σας σε ένα στοιχείο πλοήγησης και να του δώσετε ένα συγκεκριμένο αναγνωριστικό. Τότε μπορείς στοχεύει ολόκληρο το πλοίο με το okayNav () λειτουργία όπως αυτή:
var var = $ ('# nav-main') okayNav (); Σημειώστε ότι αυτό είναι μόνο το απλούστερη ρύθμιση χωρίς προσαρμοσμένες λειτουργίες. Μπορείτε να εργαστείτε με πάνω από δώδεκα προσαρμοσμένες επιλογές ενσωματωμένο σε αυτήν τη βιβλιοθήκη για τον έλεγχο του στυλ των εικονιδίων, της κινούμενης εικόνας του μενού, της υποστήριξης του δακτύλου και των λειτουργιών επανάκλησης.
Και, μπορείτε να καλέσετε ακόμη και το μενού ανοίξτε / κλείστε κατά βούληση μεταφέροντας συγκεκριμένες τιμές στη λειτουργία. Ακολουθεί ένα απλό παράδειγμα ανοίξτε την πλοήγηση:
navigation.okayNav ('openInvisibleNav'); Όλοι αυτοί οι κωδικοί είναι καλά τεκμηριωμένοι στο GitHub repo το οποίο περιλαμβάνει επίσης λήψη του σεναρίου. Εάν προτιμάτε τη διαδρομή CDN, μπορείτε επίσης να χρησιμοποιήσετε το Σύνδεσμος RawGit για να προσθέσετε αυτό το σενάριο απευθείας από το GitHub.
OkayNav είναι μεγάλη για μικρότερες τοποθεσίες που επωφελούνται από την προοδευτική τεχνική πλοήγησης. Αλλά, αν δεν είστε σίγουροι για το πώς λειτουργεί αυτό, δείτε αυτό το demo στο CodePen που δείχνει τι μπορεί να κάνει αυτό το μικρό plugin.
