Τα 5 Καλύτερα jQuery/CSS menu που θα δούμε το 2015

Τα μενού πλοήγησης ή όπως τα έχουμε όλοι γνωστά με την αγγλική τους ορολογία navigation menus κατέχουν ένα πολύ σημαντικό ρόλο σε έναν ιστότοπο, είτε αυτός είναι μικρός ή μεγάλος. Το μενού πλοήγησής είναι μια σύντομη απεικόνιση του περιεχομένου που έχει ένας ιστότοπος και θα βοηθήσει με κάθε τρόπο νέους ή παλιούς επισκέπτες να βρουν με τον γρηγορότερο τρόπο αυτό που αναζητούν.

Είναι ήδη της μόδας, στις ιστοσελίδες με μεγάλο περιεχόμενο να χρησιμοποιούν drop down menu και tabs διότι βοηθούν στην καλύτερη και ευκολότερη πλοήγηση με αρκετά ευκολότερο τρόπο στην κατασκευή του από τους developers.

Πέρα από τα κλασικά μενού όμως με την μπάρα από την μία πλευρά της σελίδας ως την άλλη ή την sticky bar που σε ακολουθεί στην σελίδα και είναι αρκετά εξυπηρετική θα πρέπει να κοιτάξουμε παρακάτω και να δώσουμε ένα ακόμη καλύτερο και ομορφότερο χαρακτήρα στην σελίδα μας.

Παρακάτω θα σας δείξουμε 5 από τα ομορφότερα jQuery ή CSS Menu που θα μπορούσε να χρησιμοποιήσει οποιοσδήποτε στην ιστοσελίδα σας χωρίς πολύ κόπο.

 

1. Animated Content Menu with jQuery

 

Ένα μαλακό και smooth κινούμενο menu που αρχικά δημιουργήθηκε από την Tympanous.net για ένα project τους για ένα εστιατόριο. Τα στοιχεία του μενού πέρα ότι είναι κινούμενα και ξεφεύγουν από την κλασική τους λειτουργία του link , με το πάτημα τους εμφανίζεται μια περιοχή με περισσότερες πληροφορίες.

Η βασική ιδέα ήταν να παρουσιαστεί το μενού του εστιατορίου με τις διάφορες κατηγορίες που εμφανίζεται. Όταν εμφανίζεται ένα παράθυρο περιεχομένου, τα στοιχεία μενού θα εξαφανιστούν και θα μπορούμε να δούμε μόνο τις πληροφορίες. Αν κάνουμε κλικ στο κουμπί κλείσιμο για να κλείσετε το παράθυρο, τα στοιχεία του μενού θα εμφανίζεται και πάλι.

Demo | Documentation

 

2. jQuery Closing Door Menu

 

Το εφέ αυτό είναι εμπνευσμένο από την EnjoyAiia. Είναι ένα μενού που μοιάζει με πόρτα που κλείνει, όπου οι 2 πλευρές του μενού ενώνονται  μαζί offscreen για να δημιουργήσουν το τελικό μενού.

Στο demo μπορείτε να δείτε 4 παραλλαγές, 2 κάθετες και 2 οριζόντιες μενού, το καθένα με 2 διαφορετικά animation: κανονικό και με αναπήδηση.

Demo | Documentation

 

3. Perspective Page View Navigation

 

Σε αυτό το μενού χρησιμοποιείται εφέ προοπτικής για την προβολή του μενού πλοήγησης, όπου η ίδια η σελίδα σπρώχνει μακριά σε 3D για να αποκαλύψει ένα μενού ή άλλα αντικείμενα.

Αυτή η ιδέα πλοήγησης έχει χρησιμοποιηθεί σε εφαρμογές για κινητά κυρίως και διαθέτει αρκετά εφέ για την δημιουργία της προοπτικής.

Demo | Documentation

  

4. CSS Menu from side

 

Αρχική ιδέα του James Truhlar. Καθαρά γραμμένο σε CSS με όλες τις τελευταίες προσθήκες της CSS3 σε animation και transition . Το μενού χρησιμοποιεί μια έξυπνη τεχνική όπου το μενού βρίσκεται αρχικά offcanvas και έπειτα εμφανίζεται full screen με την νέα τεχνική των overlay μενού.

Ενεργοποιείται και απενεργοποιείται με το hover πάνω στα αντίστοιχα σημεία ενεργοποίησης. Δεν έχει ούτε μια γραμμή javascript, καμία εικόνα και είναι πάρα πολύ ελαφρύ.

Demo | Documentation

  

5. Circular Navigation with CSS Transforms

 

Εξαιρετικά πρωτότυπο μενού, βασισμένο και αυτό σε παλιότερες εφαρμογές κινητών (και όχι μόνο). Βασισμένο στο αρχικό tutorial της Sara Soueidan καθώς θα βρείτε αρκετές παραλλαγές με λίγο search στο web.

H Ιδέα είναι ένα απλό κουμπί που γύρω του περιστρέφονται τα menu item σαν πίτα. Αρκετό CSS και λίγο javascript για την λειτουργία του και θα χρειαστεί λίγο η εμπειρία σε svg.

Το αποτέλεσμα είναι αρκετά εντυπωσιακό.

Demo | Documentation | CodePen

 

 

 

ΕΣΠΑ