Συρόμενο πλαϊνό μενού για έκδοση για κινητά. Προσαρμοστική πλοήγηση: πού να τοποθετήσετε το μενού σε smartphone

/* μενού */ .nav ( περιθώριο: 20 εικονοστοιχεία 0; ) .nav ul ( περιθώριο: 0, συμπλήρωση: 0; ) .nav li ( περιθώριο: 0 5 εικονοστοιχεία 10 εικονοστοιχεία 0, συμπλήρωση: 0, στυλ λίστας: κανένα, εμφάνιση: inline-block; *display:inline; /* ie7 */ .nav a ( padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%; ) .nav a:hover ( color : #000; ) .nav .current a ( φόντο: #999; χρώμα: #fff; ακτίνα περιγράμματος: 3 εικονοστοιχεία; )

Οι ενότητες .nav a:hover και .nav .current a είναι υπεύθυνες για την αλλαγή του χρώματος των συνδέσμων και του φόντου των ενεργών/τρέχοντων στοιχείων μενού, αντίστοιχα. Δεν έγινα πολύ έξυπνος σε αυτό το παράδειγμα, έκανα τα πάντα στο πνεύμα του μινιμαλισμού, όταν περνάτε το δείκτη του ποντικιού πάνω από το σύνδεσμο, το χρώμα αλλάζει, το κείμενο γίνεται μαύρο χρώμα: #000; και για τα ενεργά στοιχεία που προστέθηκαν φόντο φόντο: #999; , άλλαξε το χρώμα της γραμματοσειράς σε λευκό χρώμα: #fff; και ελαφρώς στρογγυλεμένες τις άκρες ακτίνα περιγράμματος: 3 εικονοστοιχεία; στο κουμπί που προκύπτει. Μπορείτε να φανταστείτε και να πειραματιστείτε ως προς αυτό, όσο θέλετε.

Όπως ανέφερα παραπάνω, μπορούμε να αλλάξουμε τη στοίχιση των στοιχείων πλοήγησης χρησιμοποιώντας την ιδιότητα text-align, για αυτό προσθέτουμε μερικές γραμμές στον κώδικα CSS:

/* δεξί μενού */ .nav.right ul (στοίχιση κειμένου: δεξιά; ) /* κεντρικό μενού */ .nav.center ul (στοίχιση κειμένου: κέντρο; )

Το πιο ενδιαφέρον ξεκινά. Το μενού μας για αυτό το στάδιοέχει λαστιχένια μορφή (το πλάτος ορίζεται ως ποσοστό) και δεν είναι ακόμη καθόλου προσαρμοστικό. Ξεκινήστε να αλλάζετε το μέγεθος της οθόνης και θα δείτε ότι το μενού είναι παρατεταγμένο σε ένα χαοτικό συνονθύλευμα κουμπιών.

Θα διορθώσουμε την κατάσταση με τη βοήθεια ερωτημάτων μέσων. Στο σημείο εφαρμογής του ερωτήματος πολυμέσων στα 600 εικονοστοιχεία, ορίστε σχετική τοποθέτησηθέση: σχετική; για το στοιχείο πλοήγησης, ώστε στη συνέχεια να τοποθετήσουμε τη λίστα μενού

κορυφή σε απόλυτη θέση θέση: απόλυτη; . Χρησιμοποιώντας την ιδιότητα display: none, θα αποκρύψουμε όλα τα στοιχεία μενού li, αφήνοντας μόνο τους ενεργούς συνδέσμους με την τρέχουσα κλάση, ορίζοντας την ιδιότητα display: block σε αυτά
Όταν τοποθετείτε το δείκτη του ποντικιού πάνω από μια ομαδοποιημένη γραμμή πλοήγησης, όλα τα στοιχεία μενού πρέπει να εμφανίζονται ως αναπτυσσόμενη λίστα, για αυτό ορίζουμε τον κανόνα.nav ul:hover li με τον κωδικό λειτουργίας>εμφάνιση: μπλοκ . Για ενεργά/τρέχοντα στοιχεία, προσθέστε ένα εικονίδιο για να τα επισημάνετε από τα υπόλοιπα.
Εάν πρέπει να μετακινήσετε το μενού προς τα δεξιά ή στο κέντρο του, χρησιμοποιήστε τις ιδιότητες θέσης αριστερά και δεξιά για τη λίστα ul του μενού μας.


Οθόνη @media και (μέγιστο πλάτος : 600 εικονοστοιχεία ) ( .nav ( θέση : σχετική ; ελάχ. ύψος : 40 εικονοστοιχεία ; ) .nav ul ( πλάτος : 180 εικονοστοιχεία ; πλήρωση : 5 εικονοστοιχεία ; θέση : απόλυτη , επάνω : 0 , αριστερά : 0 ; περίγραμμα : συμπαγές 1px #aaa ; φόντο : #FAFAFA url (images/icon-menu.png ) χωρίς επανάληψη 10 εικονοστοιχεία 11 εικονοστοιχεία ; ακτίνα περιγράμματος : 5 εικονοστοιχεία ; πλαίσιο-σκιά : 0 1 εικονοστοιχεία 2 εικονοστοιχεία rgba (0 , 0, . 3) ; ) .nav li ( εμφάνιση : κανένα ; /* απόκρυψη όλων πόντοι */ περιθώριο : 0 ; ) .nav .current ( display : block ; /* εμφανίζει μόνο τα ενεργά τη στιγμή στοιχεία */ ) .nav a ( οθόνη : μπλοκ ; padding : 5px 5px 5px 32px ; text-align : left ; ) .nav .current a ( φόντο : κανένα ; χρώμα : #666 ; ) /* όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα στοιχεία μενού * / .nav ul: hover ( φόντο-εικόνα : καμία ; ) .nav ul: hover li ( οθόνη : block ; margin : 0 0 5px ; ) .nav ul: hover .current ( background : url (εικόνες/εικόνων-έλεγχος. png ) χωρίς επανάληψη 10 px 7 px ; ) /* προσαρμοστικό μενούδεξιά */ .nav .δεξιά ul (αριστερά : αυτόματο ; δεξιά : 0 ; ) /* αποκριτικό μενού κεντραρισμένο */ .nav .center ul (αριστερά : 50% ; περιθώριο-αριστερά: -90 εικονοστοιχεία ; ) )

Οθόνη @media και (μέγιστο πλάτος: 600 εικονοστοιχεία) ( .nav ( θέση: σχετική, ελάχ. ύψος: 40 εικονοστοιχεία; ) .nav ul ( πλάτος: 180 εικονοστοιχεία, συμπλήρωση: 5 εικονοστοιχεία 0, θέση: απόλυτη, επάνω: 0, αριστερά: 0 ; περίγραμμα: συμπαγές 1px #aaa; φόντο: #FAFAFA url(images/icon-menu.png) χωρίς επανάληψη 10 εικονοστοιχεία 11 εικονοστοιχεία, ακτίνα περιγράμματος: 5 εικονοστοιχεία, σκιά πλαισίου: 0 1 εικονοστοιχεία 2 εικονοστοιχεία rgba(0,0,0,. 3); ) .nav li ( εμφάνιση: κανένα; /* απόκρυψη όλων

• πόντοι */ περιθώριο: 0; ) .nav .current ( εμφάνιση: μπλοκ; /* εμφανίζει μόνο την τρέχουσα ενεργή
• στοιχεία */ ) .nav a ( εμφάνιση: μπλοκ; συμπλήρωση: 5 εικονοστοιχεία 5 εικονοστοιχεία 5 εικονοστοιχεία 32 εικονοστοιχεία, στοίχιση κειμένου: αριστερά; ) .nav .current a ( φόντο: κανένα; χρώμα: #666; ) /* όταν τοποθετείτε το δείκτη του ποντικιού πάνω από τα στοιχεία μενού * / .nav ul:hover ( φόντο-εικόνα: καμία; ) .nav ul:hover li ( εμφάνιση: μπλοκ; περιθώριο: 0 0 5 εικονοστοιχεία; ) .nav ul:hover .current ( φόντο: url(εικόνες/εικονίδιο-έλεγχος. png) χωρίς επανάληψη 10 εικονοστοιχεία 7 εικονοστοιχεία; ) /* με απόκριση δεξί μενού */ .nav.right ul ( αριστερά: αυτόματη; δεξιά: 0; ) /* κεντρικό μενού με απόκριση */ .nav.center ul ( αριστερά: 50%; περιθώριο -αριστερά: -90 εικονοστοιχεία; ) )

  Σε αυτό, ίσως, τα πάντα! Το υπέροχο, 100% responsive μενού μας είναι έτοιμο, όπως μπορείτε να δείτε κοιτάζοντας ξανά το παράδειγμα. Για μια πιο λεπτομερή μελέτη του υλικού, μπορείτε να κατεβάσετε τον πηγαίο κώδικα και ήρεμα, χωρίς πολλή φασαρία, να εμβαθύνετε στο θέμα.

  Το μάθημα προετοιμάστηκε σύμφωνα με τα υλικά
  Δωρεάν μετάφραση και προσαρμογή: Andrey /οδηγός/

  Ενώ δούλευα σε ένα, είχα μια κατάσταση όπου η κύρια οριζόντια περιείχε περίπου δύο δωδεκάδες συνδέσμους. Στον ιστότοπο, μπορούν εύκολα να τακτοποιηθούν με τη μορφή αναπτυσσόμενων λιστών, αλλά σε έκδοση για κινητάόλα αυτά συσσωρεύονται σε ένα μπλοκ. Ένα τέτοιο στοιχείο φαίνεται «μπουκωμένο» και μάλλον εμποδίζει ορισμένους χρήστες από την πλοήγηση.

  Ένας τρόπος εξόδου από την κατάσταση είναι να δημιουργήσετε ένα εναλλακτικό μενού για κινητά στο WordPress, το οποίο θα έχει απλοποιημένη εμφάνιση και θα περιέχει μόνο συνδέσμους προς τις κύριες ενότητες. Αυτό μπορεί να γίνει χρησιμοποιώντας ορισμένες μονάδες ή τη συνάρτηση wp_is_mobile. Εξετάστε όλες τις επιλογές:

  συνάρτηση wp_is_mobile

  ο υπό όρους χειριστήελέγχει εάν ένα άτομο επισκέπτεται τον ιστότοπό σας από κινητή συσκευή, επιστρέφει True ή False. Η σύνταξή του είναι η εξής:

  if (wp_is_mobile()) ( /* Εμφανίζονται πληροφορίες για κινητές συσκευές */ ) other ( /* Διαφορετικά - κανονικές πληροφορίες ιστότοπου */ )

  Η συνάρτηση λειτουργεί προσδιορίζοντας την τιμή της συμβολοσειράς User Agent στο πρόγραμμα περιήγησης του επισκέπτη - $_SERVER['HTTP_USER_AGENT'] (για παράδειγμα, Mobile, Kindle, Android, BlackBerry, Opera Mini, κ.λπ.). Ωστόσο, δεν μεταδίδει δεδομένα σχετικά με το μέγεθος της οθόνης ή το όνομα της συσκευής - μόνο True / False.

  Στο Wodpress, το wp_is_mobile δεν χρησιμοποιείται για την επιλογή/ρύθμιση στυλ προσαρμοστικός σχεδιασμός. Καθορίζει μόνο τα στοιχεία ενός έργου web που θα πρέπει να εμφανίζονται αποκλειστικά κινητές συσκευέςανεξάρτητα από το μέγεθος της οθόνης - κατάλληλες κλάσεις, θύρα προβολής, σενάρια οθόνη αφήςκαι ούτω καθεξής.

  Προσοχή! Η συνάρτηση έχει 2 αποχρώσεις:

• Εάν κάποιος αποφασίσει να αλλάξει την τιμή User Agent, το σύστημα δεν θα μπορεί να την αναγνωρίσει.
• Όταν έχετε ενεργοποιημένη την προσωρινή αποθήκευση, οι πληροφορίες δεν ενημερώνονται κάθε φορά, οπότε έχετε το ίδιο αποτέλεσμα συνέχεια και η λύση γίνεται άχρηστη (ίσως γι' αυτό πρέπει να επαναφέρετε την προσωρινή μνήμη του προγράμματος περιήγησης κάθε φορά για να δείτε την έκδοση για κινητά μέσω του εργαλεία προγραμματιστή).

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

Αλγόριθμος για τη δημιουργία εναλλακτικού μενού για κινητά

1. Πρώτα απ 'όλα, μεταβείτε στην ενότητα διαχειριστή "Εμφάνιση" - "Μενού". Εδώ χρειάζεστε διαφορετικά για καθεμία από τις εκδόσεις, για παράδειγμα:

• top-mobile-menu - επιλογή για κινητές συσκευές.
• top-pc-menu - για την κανονική έκδοση για επιτραπέζιους υπολογιστές.

if ( wp_is_mobile() ) ( wp_nav_menu( array ( "menu" => "top-mobile-menu" ) ; ) else (wp_nav_menu( array ( "menu" => "top-pc-menu") ) ; )

if (wp_is_mobile()) ( wp_nav_menu(array("menu" => "top-mobile-menu"); ) else (wp_nav_menu(array("menu" => "top-pc-menu")); )

Στη διάταξή σας, ο κώδικας μπορεί να διαφέρει ελαφρώς λόγω επιπλέον επιλογές. Η ουσία της μεθόδου είναι να εμφανιστεί η επιλογή ως μενού για κινητά του WordPress κορυφαίο μενού για κινητά, για τα συνηθισμένα - top-pc-menu(αν χρειάζεται, αντικαταστήστε τα ονόματά σας).

Μετά την εφαρμογή, ελέγξτε τη λειτουργία πλοήγησης σε smartphone / tablet. Όπως είπα παραπάνω, η συνάρτηση wp_is_mobile καθορίζει ακριβώς τον παράγοντα χρήστη, επομένως συνιστάται η πρόσβαση στον ιστότοπο από το τηλέφωνο, η επιλογή με τον πίνακα προγραμματιστών Ctrl + Shift + I μπορεί να είναι buggy.

Αν δεν υπάρχει χρόνος να ασχοληθείς, υπάρχει πάντα κατάλληλη ενότητα. Υπάρχουν πολλές επιλογές, αλλά θα εξετάσουμε μόνο αυτή που χρειάζεται για την τρέχουσα εργασία - την εμφάνιση διαφορετικών Μενού WordPressσε έκδοση για φορητές συσκευές και υπολογιστές.



Κατεβάστε το WP Αποκριτικό μενούστο αποθετήριο από εδώ ή . Αυτή η λύσησας επιτρέπει να δημιουργήσετε εύκολα ένα απλό και πλήρως προσαρμόσιμο αναπτυσσόμενο μενού για smartphone, tablet και πολλά άλλα. Δείτε πώς θα φαίνεται περίπου το τελικό αποτέλεσμα (τα χρώματα είναι ρυθμιζόμενα, υπάρχει ένα μπλοκ αναζήτησης):



Το WP Responsive Menu είναι πολύ δημοφιλές - 70k προβολές. λήψεις και 4,5 βαθμοί αξιολόγησης. Βασισμένο στην προσθήκη μενού του sidr jquery . Παρά το γεγονός ότι η τελευταία ενημέρωση ήταν πριν από ένα χρόνο, οι εργασίες για σφάλματα (κρίνοντας από τα στατιστικά στοιχεία) βρίσκονται σε εξέλιξη.

Κύριες λειτουργίες:

• Πλήρως προσαρμοστική λύση με υποστήριξη ολίσθησης.
• λειτουργεί σε όλους τους τύπους κινητών συσκευών.
• εύκολη ενσωμάτωση με τις λειτουργίες μενού του συστήματος WP.
• άσκηση χρωματική παλέτα, που θα ταίριαζε στο θέμα σας.
• απόκρυψη περιττών στοιχείων στην έκδοση για κινητά.
• τον προσδιορισμό του τόπου από όπου θα εμφανιστεί το μενού·
• επιλογή του λογότυπου, της γραμμής και του κειμένου που εμφανίζεται σε αυτό.

Μετά την εγκατάσταση της μονάδας, θα βρείτε όλες τις ρυθμίσεις στην ενότητα "WPR Menu", χωρίζονται σε 2 καρτέλες - Γενικά (κύρια) και Εμφάνιση (εμφάνιση).

• Δημιουργήστε ένα εναλλακτικό μενού για κινητά στο Διαχειριστής WordPress(παρόμοια με την προηγούμενη μέθοδο στην ενότητα "Εμφάνιση").
• Μεταβείτε στο στοιχείο "WPR Menu" και στην καρτέλα "Γενικά", επιλέξτε το πλαίσιο δίπλα στην επιλογή "Ενεργοποίηση πλοήγησης για κινητά".
• Παρακάτω στη ρύθμιση "Επιλογή Μενού", επιλέξτε το μενού που δημιουργήθηκε στο δεύτερο βήμα.
• Στο επόμενο πεδίο "Στοιχεία προς απόκρυψη στο κινητό" καθορίστε το όνομα της κλάσης ή του αναγνωριστικού που είναι υπεύθυνο για την εμφάνιση της τυπικής πλοήγησης, για παράδειγμα: .topnav, #main-menu(διαχωρίζονται με κόμμα, τάξεις με τελεία, ID με σύμβολο λίρας).
• Αποθήκευση - το κουμπί "Αποθήκευση επιλογών".

Έτσι, πρώτον, επιλέγετε ένα αντικείμενο για και, δεύτερον, αποκρύπτετε τυχόν περιττά στοιχεία (στην περίπτωσή μας, αυτή είναι η κύρια πλοήγηση). Ως αποτέλεσμα, θα μπορείτε διαφορετικά μενούστο Wordpress για επιτραπέζιους υπολογιστές και smartphone.

Ελέγξτε τις υπόλοιπες επιλογές της προσθήκης και ελέγξτε τις όπως θέλετε: σάρωση, ζουμ, πλαίσιο αναζήτησης, εμφάνιση λογότυπου, πλευρά εμφάνισης στοιχείου και ανάλυση οθόνης στην οποία ενεργοποιείται. Επίσης, στην καρτέλα "Εμφάνιση μενού", χρειάζεστε φόντο και αφαιρέστε τα πλαίσια εάν είναι απαραίτητο.

Γενικά, η εργασία με το WP Responsive Menu είναι αρκετά απλή. Αν και η συνάρτηση wp_is_mobile δεν προκαλεί υπερβολική πολυπλοκότητα. Δοκίμασα και τις δύο επιλογές και απέδωσαν καλά. Ωστόσο, έχετε υπόψη σας ότι η υπό όρους wp_is_mobile καθίσταται άχρηστη όταν είναι ενεργοποιημένη η προσωρινή αποθήκευση. Δεδομένων των ρυθμίσεων των προσθηκών με μεγέθη οθόνης, δεν υπάρχει δέσμευση για τον παράγοντα χρήστη, πράγμα που σημαίνει ότι τέτοιοι περιορισμοί δεν είναι τρομεροί για αυτόν.

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

μετατοπίστε το Πρόσθετο jQueryγια απλή αναδιπλούμενη πλοήγηση μέσω κινητού. Το Shifter λειτουργεί ελέγχοντας τα στοιχεία-στόχους στο DOM και δεσμεύοντας συμβάντα σε αυτά.

SlicknavΤο SlickNav είναι μια ανταποκρινόμενη προσθήκη μενού για κινητά για jQuery με δυνατότητες όπως υποστήριξη μενού πολλαπλών επιπέδων, συμβατότητα με διαφορετικά προγράμματα περιήγησης, ευέλικτη, απλή σήμανση και υποβαθμίζεται με χάρη χωρίς JavaScript.



MenutronΤο Menutron μετατρέπει τα μενού πλοήγησής σας από μια λίστα σε ένα επιλεγμένο μενού όταν αλλάζει το μέγεθος του προγράμματος περιήγησης. Σε κινητές συσκευές, το μενού επιλογής εμφανίζει ένα εγγενές στοιχείο ελέγχου, διευκολύνοντας την επιλογή ενός στοιχείου.



Μενού απόκρισης και αφήςΈνα σεμινάριο για τη δημιουργία αναπτυσσόμενης πλοήγησης με απόκριση και φιλική προς την αφή. Η μεθοδολογία αποτελείται από 3 κύρια μέρη, τα οποία είναι το αναπτυσσόμενο μενού Easy Navigation Βασισμένο σε HTMLκαι CSS Implementing Responsiveness με χρήση εργαλείων μέσα μαζικής ενημέρωσηςαιτήματα και αποδεχτείτε τα για συσκευές με οθόνη αφήςχρησιμοποιώντας ένα εξαιρετικά μικροσκοπικό πρόσθετο jQuery.



jQuery.mmenuΤο MMENU είναι ένα πρόσθετο jQuery για τη δημιουργία ενός ομαλού, συρόμενου μενού που μοιάζει με εφαρμογή για τον ιστότοπο για κινητά ή τον ιστότοπο που αποκρίνεται.



NavobileΤο jQuery Navobile είναι ένα πρόσθετο jQuery που διευκολύνει την πλοήγηση μέσω κινητού. Το Navobile χρησιμοποιεί CSS για να εφαρμόσει μεταφράσεις CSS3, εντοπισμό φορητών συσκευών και επιδιόρθωση πλοήγησης.



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



Αποκριτικό μενού Retina-ReadyΑποκριτικό μενού με τρεις διατάξεις για διάφορα μεγέθηπρόγραμμα περιήγησης. Το μενού αλλάζει αυτόματα σε μία από τις τρεις διαφορετικές διατάξεις ανάλογα με το μέγεθος του παραθύρου του προγράμματος περιήγησης: μια έκδοση σειράς "επιτραπέζιου υπολογιστή", μια βελτιστοποιημένη έκδοση για tablet δύο στηλών και μια έκδοση για κινητά με σύνδεσμο μενού για εμφάνιση και απόκρυψη πλοήγησης μικρές οθόνες. Μια γραμματοσειρά χρησιμοποιήθηκε ως εικονίδια για την αποφυγή θαμπώματος όταν διαφορετική ανάλυση.



slimMenuΤο slimMenu είναι ένα ελαφρύ πρόσθετο jQuery που έχει σχεδιαστεί για να δημιουργεί γρήγορα και πολυεπίπεδα μενούπλοήγηση εν κινήσει. Με το slimMenu, δεν θα παλεύετε πλέον με αιτήματα πολυμέσων για τη δημιουργία μενού με απόκριση ή οποιαδήποτε άλλη βαριά προσθήκη για τη δημιουργία ένθετων μενού πολλαπλών επιπέδων. Αποκρίνεται 100% για κινητά.



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



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

Εργο

Τα παρακάτω στιγμιότυπα οθόνης δείχνουν καταστάσεις με πρότυπα σε οθόνες κινητών συσκευών. Εάν η πλοήγηση έχει 3 ή 4 κουμπιά, τότε η διάταξή της θα αποθηκευτεί σε μία γραμμή. Αλλά όταν το μενού περιέχει 6 ή περισσότερα στοιχεία, αποδεικνύεται ότι είναι άσχημο.



Λύση

Ένας συνηθισμένος τρόπος είναι να μετατρέψετε την πλοήγηση σε αναπτυσσόμενο μενού με βάση το επιλεγμένο στοιχείο. Αυτή η λύση έχει το μειονέκτημα ότι το στοιχείο επιλογής δεν μπορεί να διαμορφωθεί με CSS. Τα πρόσθετα Javascript όπως το Chosen σάς επιτρέπουν να τροποποιήσετε το μενού, διαφορετικά θα πρέπει να συμβιβαστείτε στυλ συστήματοςγια την αναπτυσσόμενη λίστα. Επίσης, ο χρήστης μπορεί να παραπλανηθεί όταν η έκδοση ευρείας οθόνης της δομής του μενού μετατρέπεται σε αναπτυσσόμενη λίστα σε μια κινητή συσκευή.





2) Αποκλεισμός εξόδου

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







3) Εικονίδιο μενού

ΚΑΙ τελευταίος τρόπος, το οποίο θα καλύψουμε στο σεμινάριο μας - χρησιμοποιώντας το εικονίδιο μενού για να ενεργοποιήσετε την πλοήγηση. Αυτή η προσέγγιση εξοικονομεί χώρο στη σελίδα (που είναι σημαντικό για μια κινητή συσκευή) και δίνει πλήρης έλεγχοςυπερβολική εμφάνιση με CSS. Το εικονίδιο μενού και η ίδια η πλοήγηση μπορούν να παρουσιαστούν σύμφωνα με το γενικό στυλ του ιστότοπου.









Η πλοήγηση μέσω κινητού ενεργοποιήθηκε με το jQuery

Σε αυτό το σεμινάριο, θα σας δείξουμε πώς να δημιουργήσετε μια πλοήγηση για μικρή οθόνη. Το jQuery θα χρησιμοποιηθεί για την προετοιμασία του εικονιδίου του μενού και την ενεργοποίηση της πλοήγησης. Κανένας πρόσθετες ετικέτεςΔεν απαιτείται HTML για να λειτουργήσει η πλοήγηση.

Για το μενού μας θα χρησιμοποιηθεί απλή δομή:

• Κουμπί
• Κουμπί

Το μενού απαιτεί Κώδικας JavaScript. Η συνάρτηση προετοιμάζει το στοιχείο στην ετικέτα. Όταν ο επισκέπτης κάνει κλικ στο κουμπί του ποντικιού στο στοιχείο #menu-icon, η πλοήγηση ολισθαίνει προς τα έξω.

jQuery(document).ready(function($)( /* Εικονίδιο προετοιμασίας μενού */ $("#nav-wrap").prepend("Menu"); /* Ενεργοποίηση πλοήγησης */ $("#menu-icon" ).on("κλικ", function()( $("#nav").slideToggle(); $(this).toggleClass("ενεργό"); )); ));

Ως αποτέλεσμα του σεναρίου, η δομή του εγγράφου θα αλλάξει:

Μενού

• Κουμπί
• Κουμπί

Χρησιμοποιούμε αρκετά απλό CSS για το demo μας. Το βασικό σημείο φαίνεται στο παρακάτω σχήμα. Το στοιχείο #menu-icon έχει προεπιλογή εμφάνιση:κανένα . Χρησιμοποιεί ένα ερώτημα πολυμέσων για να αλλάξει το #menu-icon σε display:block εάν το πλάτος της θύρας προβολής είναι μικρότερο από 600 pixel.



Το αποτέλεσμα είναι η πλοήγηση με την παρουσιαζόμενη λειτουργικότητα:



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



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







Ας ρίξουμε μια ματιά στις ρυθμίσεις:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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