Όταν μπαίνεις σε μια ιστοσελίδα, υπάρχουν καποιά βασικά συστατικά που πρέπει να έχει όπως το logo, το favicon, αλλά πάνω απο όλα την ευκολία πλόηγησης. Η κατασκευή του μενού μπορεί να γίναι με “το χέρι” , παρ’όλαυτα υπάρχουν και έτοιμα εργαλεία που αναλαμβάνουν αυτή την κατασκεύη. Παρακάτω σου παραθέτουμε μερικά
Flexnav
ο flexnav, δίνει έμφαση “πρώτα” σε κινητά κάνοντας χρήση media queries και javascript. Μπορεί να δημιουργήσει υποκατηγορίες σε βαθμίδες, με καλή υποστήριξη και προπάντων λειτουργία hover(να γίνεται δηλαδή το ξεδίπλωμα του μενού όταν περνάμε τον δείκτη του ποντικιού από πάνω). Ιδιαίτερη προσοχή αξίζει να δωθεί στο σήμειο κλειδί του, που είναι η χρήση tap-target(που πατάμε δηλαδη) , σε οθόνες αφής , γεγονός που το κάνει ιδιάιτερα εύχρηστο σε κινητά τηλέφωνα!
Trunk.js
Το Trunk.js αποτελεί μια εξαιρετική λύση για να αναδιπλωση της μπάρας του μενού γρήγορα και σε όλες τις συσκευές.
Pushy
Το Pushy είναι ένα responsive εργαλείο το οποίο χρησιμοποιεί CSS για την εφαρμογή των εναλλαγών και των effect του μενού.
SmartMenus
Το smartmenus είναι ένα από τα πιο αναπτυγμένα εργαλεία για μενού ιστοσελίδων και το οποιο ειναι δωρεαν!
Sidr
Είναι ένα από τα καλύτερα jquery plugin για να δημιουργήσεις πλάγια μενού και αποτελεί έναν πολύ εύκολο τρόπο να προσαρμόσεις το μενού σου σε responsive περιβάλλον. Ένα μεγάλο πλεονέκτημα που έχει σε σχέση με τα άλλα είναι ότι μπορεί να φορτώσει το περιεχόμενο του από άλλη ιστοσελίδα μέσω ajax, και ακόμα μέσω λειτουργίας callback.
Drop-Down Navigation
Είναι ένα responsive και φιλικό ως προς τον χρήστη εργαλείο για την δημιουργία menu.
jQuery Navobile
Το Navobile, χρησιμοποιεί CSS3 για την δημιουργία των effect του. Μπορεί να αναγνωρίζει το περιβάλλον (κινητο,ταμπλετ,υπολογιστής) και να προσαρμόζει αυτόματα την γραμμή του μενού.
Responsive Mobile Menu
Παρέχει έναν εύκολο τρόπο να δημιουργούμε φιλικά στους χρήστες αλλά και responsive μενου. Έχει 100% υποστήριξη σε όλες τις μοντέρνες συσκευές και browsers, υποστήριξη πολλαπλών μενού σε μια σελίδα και δεν χρησιμοποιεί CSS media queries, παρά μόνο javascript για τις εναλλαγές του μενού.
SlickNav
Ένα εργαλείο jquery με υποστήριξη πολλων επιπέδων στο μενού(υπομενού), διαλειτουργικότητα σε όλους τους browsers, και καλή υποστήριξη ARIA(Accessible Rich Internet Applications) , που στοχεύει στην καλύτερη οργάνωση του περιεχομένου των ιστοσελίδων για την διευκόλυνση των χρηστών.
Responsive Select Menu
Ουσιαστικά είναι ένα plugin του wordpress, το οποίο μπορεί να μετατρέψει αυτόματα οποιοδήποτε μενού του wordpress 3 σε ένα select box/ dropdown μενού για κινητά τηλέφωνα. Δεν χρειάζεται να προσθέσετε ούτε μια γραμμή κώδικα στον κώδικα php του wordpress, καθώς όλη η παραμετροποίηση γίνεται από το πάνελ διαχείρησης.
Codrops
To codrops είναι ένα responsive plugin του οποίο προσπαθεί με επιτυχία να μειώσει όσο το δυνατό περισσότερο χώρο για τα μενού που έχουν αρκετό περιεχόμενο και πολλά υπομενού. Αυτό επιτυγχάνεται με την απόκρυψη της “γονικής” κατηγορίας και έπειτα την εμφάνιση του υπομενού.
Responsive nav
To responsive nav είναι ένα πολυ μικρό σε μέγεθος plugin (1ΚΒ), και βοηθάει στην εναλλαγή(toggle) του μενού απο μικρή σε μεγάλη οθόνη και αντίστροφα. Χρησιμοποιεί γεγονότα αφής και ένα έξυπνο σύστημα CSS3 που δεν είναι κανονικά εφικτό στην CSS3!
jPanelMenu
Το jpanelmenu είναι και αυτό ένα plugin γραμμένο σε jQuery, που σας βοηθάει να φτιάξετε το δικό σας μενού γρήγορα και εύκολα. Συνεργάζεται άψογα με το jRespond. το οποίο είναι ένας απλός τρόπος να διαχειρίζεσαι την javascript σε responsive sites! Υπάρχει και minified έκδοση του jPanelMenu, ώστε να μειώνονται σημαντικά τα http requests.
Mmenu
Ένα πολύ καλό jQuery plugin, το mmenu, είναι εξειδικευμένο ώστε να εμφανίζει την ιστοσελίδα σας σαν εφαρμογή και υποστηρίζει μεγάλη παραμετροποίηση καθώς και μια πληθώρα επεκτάσεων και πρόσθετων. Το μενού μπορεί να τοποθετηθεί οπουδήποτε μέσα στη σελίδα, και να είναι κάθετο ή οριζόντιο με slide effect στις εναλλαγές του.
slimMenu
Ένα πολύ “ελαφρύ” jQuery plugin είναι και το slimMenu, το οποιο μπορεί να φτιάξει γρήγορα, πολυεπίπεδα και responsive μενού. Είναι μόλις 5ΚΒ (2.5ΚΒ στην minified έκδοσή του), και είναι συμβατό με όλους σχεδόν τους σημερινούς browsers.
Navgoco
Απλό στην χρήση, το Navgoco είναι ένα jQuery plguin που μετατρέπει μια unordered λίστα από links, σε ένα όμορφο κάθετο και πολυεπίπεδο μενού. Το μεγάλο του πλεονέκτημα είναι η ικανότητά του να διατηρεί την τελευταία κατάσταση του μενού με την χρήση cookies, και έτσι μπορείς να αλλάζεις καρτέλες στον browser σας ή να τον ελαχιστοποιείς, χωρίς να χάνεται η κατάσταση του μενού!
Pull Down For Navigation
Το μεγάλο πρόβλημα στην πλοήγηση των ιστοσελίδων είναι η αλλαγή στην εμφάνιση των συστατικών τους, όταν μεταφερόμαστε από μια συσκευή στην άλλη και ιδιαίτερα στα κινήτά τηλέφωνα που η οθόνη γίνεται αρκετά στενή. Στα κίνητα τηλέφωνα και ιδιαίτερα στα αφής, το pull down for navigation κρυβει την γραμμή του μενού η οποία μπορεί να εμφανιστεί πολυ άπλα με ένα pull-down(τραβηγμα προς τα κάτω) του δαχτύλου σας στην οθόνη. Αυτό έχει ως πλεονέκτημα να κρατάει την πλοήγηση στην κορυφή, και στο περιεχόμενο να στοχεύεται πιο εύκολα. Ένα μειονέκτημα που έχει είναι η απουσία περισσότερων επιπέδων μενού.
Progressive and Responsive Navigation
Είναι ένα πολύ ανεπτυγμένο plugin το οποίο μετατρέπει μια unoredered list(κοινή δομή), σε ένα πολύ όμορφο και γρήγορο μενού. Οι τεχνολογίες που χρησιμοποιεί είναι το jQuery, η γλώσσα HTML5, το LESS CSS, και το CSS Reset. Με τη χρήση του css reset απομακρύνονται στην ουσια τα υπόλοιπα στυλ που έχουν εφαρμοστεί στο μενού. Το LESS κάνει τον CSS κώδικα ποιο αποτελεσματικό χρησιμοποιόντας πιο προχωρημένες μεθόδους όπως χρήση μεταβλητών κλπ.
HorizontalNav
Το Horizontal nav είναι ένα jquery plugin που δημιουργεί ένα ορίζόντιο μενού, και με αυτόν τον τρόπο , μπορεί να αξιοποιήσει το μέγιστο πλάτος της σελιδας ώστε να μην συρικνώνεται το μενού. Επίσης παρέχει υποστήριξη και για τους χρήστες του IE7(Internet Explorer 7)
Topdrawer
Στόχος του Topdrawer, είναι να παρουσιάσει πιο ομαλά και προσαρμόσιμα μενού κυρίως σε μικρές συσκευές, χρησιμοποιώντας κυρίως CSS3 αντί για animation μέσω javascript. Τα συστατικά που χρησιμοποιεί είναι το CSS που αποτελεί τον πυρήνα της εμφάνισης του. Το Modernizr αναλαμβάνει την ανίχνευση της ύπαρξης των CSS και HTML στοιχείων σε μια σελίδα και το FastClick(FT Labs) αναλαμβάνει την μείωση του χρόνου αντίδρασης στα γεγονότα αφής μειώνοντας έτσι τον χρόνο απόκρισης του μενού!
Mean Menu
Τα κύρια χαρακτηριστικά του Mean Menu είναι η εμφάνιση/απόκρυψη των υπομενού του, η αυτόματη αναπροσαρμογή του κεντραρίσματος του μενού από landscape σε portait mode, ο έλεγχος του πλάτους της οθόνης στο οποίο ενεργοποιείται η εναλλαγή, η μεγάλη παραμετροποίηση του CSS του, όπως και η ανεξαρτησία του από τα media queries.
