Πώς να δημιουργήσετε ένα μενού για φορητές συσκευές. Κινητή έκδοση του μενού

Γειά σου! Συνεχίζουμε να αναλύουμε τα πιο ενδιαφέροντα και τα πιο χρήσιμα πρόσθεταγια έναν ιστότοπο WordPress! Σήμερα θα μάθετε πώς να προσθέτετε ένα μενού για κινητά στον ιστότοπό σας. Μπορείτε να προσαρμόσετε ένα μενού που θα εμφανίζεται μόνο στο κινητές συσκευέςΩ. Θα μπορείτε να καθορίσετε το μέγιστο μέγεθος οθόνης στο οποίο θα εμφανίζεται το μενού για κινητά. Μπορείτε να δημιουργήσετε δύο μενού, με το αριστερό και με σωστη πλευραοθόνη, μπορείτε να καθορίσετε ένα ξεχωριστό μενού τοποθεσίας για κάθε μενού. Μπορεί να προσαρμοστεί εμφάνισημενού, χρώματα, μέγεθος, επένδυση κ.λπ.

Μπορείτε να εγκαταστήσετε το πρόσθετο απευθείας από Πίνακες διαχείρισης WordPress. Μεταβείτε στη σελίδα: Προσθήκες – Προσθήκη νέου, πληκτρολογήστε το όνομα της προσθήκης στη φόρμα αναζήτησης, πατήστε Enter, εγκαταστήστε και ενεργοποιήστε την προσθήκη.

Ας δούμε τις ρυθμίσεις:

Γενικές επιλογές.

– Ενεργοποίηση Mobile Menu, μπορείτε να ενεργοποιήσετε ή να απενεργοποιήσετε το μενού για κινητά.

– Ενεργοποιήστε το αριστερό μενού κεφαλίδας, ενεργοποιήστε ή απενεργοποιήστε το αριστερό μενού.

– Ενεργοποίηση δεξιού μενού κεφαλίδας, ενεργοποίηση ή απενεργοποίηση του δεξιού μενού.

– Width Trigger, καθορίστε σε τι μέγιστο μέγεθοςΘα εμφανιστεί το μενού για κινητά.

– Απόκρυψη στοιχείων, απόκρυψη οποιουδήποτε στοιχείου από τον ιστότοπο κατά την εμφάνιση του μενού για κινητά. Μπορείτε να καθορίσετε Κλάση CSSή αναγνωριστικό στοιχείου.

– Προσαρμοσμένο CSS, μπορείτε να καθορίσετε το δικό σας Στυλ CSSγια το μενού.

– Αποθήκευση αλλαγών, αποθήκευση των αλλαγών.

Επιλογές κεφαλίδας.

– Λογότυπο τοποθεσίας, μπορείτε να επιλέξετε τι θα εμφανίζεται στον ιστότοπο για κινητά. Λογότυπο ή Κείμενο.

– Λογότυπο, κάντε κλικ στο πεδίο για να φορτώσετε το λογότυπο.

– Εναλλακτική διεύθυνση URL λογότυπου, μπορείτε να καθορίσετε μια εναλλακτική διεύθυνση URL λογότυπου.

– Header Height, μπορείτε να καθορίσετε το ύψος του μενού.

– Logo Top Margin, μέγεθος εσοχής, από την κορυφή του ιστότοπου μέχρι το λογότυπο.

– Κείμενο κεφαλίδας, μπορείτε να καθορίσετε το κείμενο που θα εμφανίζεται στην κεφαλίδα, εάν επιλέξετε να εμφανίζεται κείμενο στην αρχή.

– Κείμενο κεφαλίδας Μέγεθος γραμματοσειράς, μπορείτε να επιλέξετε το μέγεθος του κειμένου του τίτλου.

– Αποθήκευσε τις αλλαγές.

Επιλογές αριστερού μενού.

– Αριστερό μενού, επιλέξτε το μενού τοποθεσίας για το αριστερό μενού.

– Εικονίδιο μενού, μπορείτε να επιλέξετε ένα εικονίδιο ή μια εικόνα για το μενού.

– Μενού Εικονίδιο Εικόνα, κάντε κλικ στο πεδίο για να φορτώσετε ένα εικονίδιο ή μια εικόνα.

– Left Menu Panel Width, μπορείτε να καθορίσετε το μέγεθος του πλάτους του αριστερού πίνακα μενού.

– Εικονίδιο επάνω περιθώριο, κορυφαίο περιθώριοαπό το εικονίδιο.

– Εικονίδιο Αριστερό περιθώριο, εσοχή στην αριστερή πλευρά στο εικονίδιο.

– Αποθήκευσε τις αλλαγές.

Δεξιά Επιλογές Μενού. Οι ρυθμίσεις εδώ είναι οι ίδιες με το αριστερό μενού. Εδώ είναι οι ρυθμίσεις για το σωστό μενού.

Επιλογές χρώματος.

-Επί κεφαλής Χρώμα του φόντου, μπορείτε να επιλέξετε ένα χρώμα για τον τίτλο του μενού.

– Χρώμα κειμένου κεφαλίδας, μπορείτε να επιλέξετε ένα χρώμα για το κείμενο του τίτλου του μενού.

Επιλογή χρώματοςγια αριστερό και δεξί μενού (ίδιες ρυθμίσεις).

– Χρώμα εικονιδίου αριστερού μενού, χρώμα εικονιδίου.

– Χρώμα φόντου, χρώμα φόντου μενού.

– Χρώμα κειμένου, χρώμα κειμένου μενού.

– Χρώμα αιώρησης φόντου, χρώμα φόντου κατά την αιώρηση.

Πολλοί άνθρωποι προσπαθούν ήδη να προσαρμόσουν τον ιστότοπό τους για κινητές συσκευές. Χρησιμοποιούν τις νέες δυνατότητες του CSS3 τόσο σε απλούς ιστότοπους όσο και σε πολύ πιο σύνθετους. Ορισμένες δυσκολίες προκύπτουν στη διαδικασία, και μία από τις πιο σημαντικές είναι η συμπεριφορά του μενού του ιστότοπου όταν προβάλλεται σε μικρές οθόνες. Αυτό το πρόβλημα, όπως αποδείχθηκε, επιλύεται με διάφορους τρόπους. Για μένα είναι το ίδιο αυτή η εργασίαέχει γίνει πρόσφατα ιδιαίτερα επίκαιρο, γι' αυτό παρακολουθώ υλικά στο Διαδίκτυο σχετικά με προσαρμοστικός σχεδιασμός. Και πρόσφατα συνάντησα καλή ανάλυσηυπάρχοντα προσαρμοστικά μοτίβα πλοήγησης.

Δεδομένου ότι έχω σχέση με το προσαρμοστικό πρότυπο HTML5 ανοιχτού κώδικα Simpliste, το αποφάσισα όλες τις υπάρχουσες επιλογές πλοήγησηςδοκιμάστε το στην πράξη. Εκτός όμως από τη λήψη δική σας εμπειρία, μπόρεσα να δημιουργήσω αρκετά οπτικά παραδείγματα που είναι διαθέσιμα για χρήση από οποιονδήποτε, καθώς και να ετοιμάσω μια περιγραφή της διαδικασίας, με την οποία σας προσκαλώ να εξοικειωθείτε.

Το ίδιο το άρθρο, που με ενδιέφερε και με ώθησε στη δράση, ονομάζεται Responsive Navigation Patterns. Θα βασιστώ σε αυτό και τα παραδείγματα θα είναι οι σελίδες του προτύπου Simpliste με την υλοποίηση μοτίβων και πλήρης περιγραφήπώς να πετύχετε το ίδιο αποτέλεσμα.

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

1. Πλοηγηθείτε στην κορυφή ή αφήστε τα πάντα ως έχουν

Ο πιο προφανής και πιο συνηθισμένος τρόπος. Απλώς πρέπει να βεβαιωθείτε ότι όλα ταιριάζουν στο πλάτος της οθόνης και δεν προεξέχουν. ΣΕ Δομή HTMLτίποτα δεν αλλάζει, αλλά οι σύνδεσμοι μενού ενδέχεται να λάβουν ελαφρώς αλλαγμένα στυλ, είναι δυνατά διάφορα είδη παραλλαγών με την εμφάνιση των συνδέσμων, τα οποία μπορούν να απλοποιηθούν, να κεντραριστούν, να αντικατασταθούν με εικονίδια ή να μιμηθούν την εμφάνιση διεπαφών φορητών συσκευών.

Αυτή η προσέγγιση χρησιμοποιείται σε θέματα Simpliste.

Πλεονεκτήματα

Το πιο εύκολο να επιτευχθεί. Δεν χρειάζεται να χρησιμοποιήσετε Javascript (και καμία εξάρτηση από αυτό), δεν απαιτούνται φανταχτεροί ελιγμοί CSS.

Ελαττώματα

Το πρόβλημα μπορεί να ξεκινήσει όταν ο αριθμός των στοιχείων μενού είναι πολύ μεγάλος. Πρώτον, το ύψος του μπλοκ πλοήγησης μπορεί να γίνει τέτοιο ώστε να καλύπτει πλήρως το περιεχόμενο του ιστότοπου στην πρώτη σελίδα και ο χρήστης θα πρέπει να κάνει «κύλιση» προς τα κάτω στον ιστότοπο για να φτάσει στις πληροφορίες που χρειάζεται. Και έτσι σε κάθε σελίδα του ιστότοπου. Δεύτερον, τίθεται το θέμα των πολυεπίπεδων μενού. Αν απλώς παρατάσσονται το ένα κάτω από το άλλο, τότε επιστρέφουμε στο πρόβλημα του ύψους του μπλοκ πλοήγησης. Τρίτον, εάν δεν έχουν προβλεφθεί όλα εκ των προτέρων, τότε η προσθήκη νέων στοιχείων μενού μπορεί να προκαλέσει δυσάρεστες «μετακομίσεις» και μεταφορές.

2. Σύνδεσμος στο υποσέλιδο, στην πλοήγηση

Επίδειξη με πλήρη περιγραφή.

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

Πλεονεκτήματα

Ο μόνος σύνδεσμος που απομένει είναι στην κεφαλίδα, η οποία καταλαμβάνει πολύ λίγο χώρο. Καμία εξάρτηση από σενάρια.

Ελαττώματα

Θα πρέπει να προσθέσετε επιπλέον κώδικα CSS για να μετακινήσετε το μενού από το υποσέλιδο προς τα πάνω επιτραπέζιους υπολογιστές(χρησιμοποιώντας position:absolute ή position:fixed) ή αποκρύψτε το μενού στην κεφαλίδα σε κινητές συσκευές εάν αντιγράφει το μενού του υποσέλιδου. Επιπλέον, η αίσθηση ενός απότομου «άλματος» κατά την πλοήγηση σε έναν τέτοιο σύνδεσμο μπορεί να αιφνιδιάσει τον χρήστη.