Πώς να δημιουργήσετε μια ευαίσθητη πλοήγηση

Ένα από τα πιο δύσκολα κομμάτια υπεύθυνος σε έναν ιστότοπο είναι “πλοήγηση”, αυτό το μέρος είναι πολύ σημαντικό για την προσβασιμότητα στον ιστότοπο, καθώς αυτός είναι ένας από τους τρόπους με τους οποίους οι επισκέπτες σέρνουν τις ιστοσελίδες.

Υπάρχουν στην πραγματικότητα πολλοί τρόποι για να δημιουργήσετε ευέλικτη πλοήγηση στον ιστότοπο και ακόμη και μερικά πρόσθετα jQuery είναι διαθέσιμα για να το κάνουν σε ένα δευτερόλεπτο.

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

Ας ξεκινήσουμε λοιπόν.

Διαδήλωση
Λήψη πηγής

HTML

Πρώτα απ 'όλα, ας προσθέσουμε το meta viewport μέσα στο κεφάλι ετικέτα. Αυτό meta viewport απαιτείται μια ετικέτα για τη σωστή κλιμάκωση της σελίδας μας σε οποιοδήποτε μέγεθος οθόνης, ειδικά στο κινητό παράθυρο προβολής.

... και στη συνέχεια προσθέστε το ακόλουθο απόσπασμα ως σήμανση πλοήγησης στο εσωτερικό του σώμα ετικέτα.

   Σπίτι
 Πως να
 Εικόνες
 Σχέδιο
 Web 2.0
 Εργαλεία
 
 Μενού

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

Περαιτέρω ανάγνωση: Μην ξεχνάτε τη μετα-ετικέτα viewport.

Στυλ

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

 σώμα χρώμα-φόντο: # ece8e5;

ο nav ετικέτα που καθορίζει την πλοήγηση θα έχει 100% όλο το πλάτος του παραθύρου του προγράμματος περιήγησης, ενώ το ul όπου περιέχει τις βασικές συνδέσεις μενού που έχουμε 600px για το πλάτος.

 nav ύψος: 40px; πλάτος: 100%. φόντο: # 455868; μέγεθος γραμματοσειράς: 11pt; οικογένεια γραμματοσειράς: 'PT Sans', Arial, sans-serif; γραμματοσειρά-βάρος: έντονα. θέση: σχετική. σύνορα-κάτω: 2px στερεά # 283744;  nav ul padding: 0; περιθώριο: 0 αυτόματο; πλάτος: 600px; ύψος: 40px;

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

 nav li εμφάνιση: inline; float: αριστερά.

Εάν παρατηρήσετε από το παραπάνω σημάδι HTML, έχουμε ήδη προσθέσει clearfix στο τάξη χαρακτηριστικό τόσο για το nav και ul για να καθαρίσουμε τα πράγματα γύρω όταν πλέουμε τα στοιχεία μέσα σε αυτό χρησιμοποιώντας αυτό το CSS clearfix hack. Επομένως, ας προσθέσουμε τους ακόλουθους κανόνες στυλ στο φύλλο στυλ.

 .clearfix: πριν, .clearfix: μετά από περιεχόμενο: ""; οθόνη: πίνακας;  .clearfix: μετά από clear: αμφότερα.  .clearfix * ζουμ: 1;

Εφόσον έχουμε έξι συνδέσμους μενού και έχουμε επίσης καθορίσει το δοχείο για 600px, κάθε σύνδεσμος μενού θα έχει 100px για το πλάτος.

 nav χρώμα: #fff; εμφάνιση: inline-block πλάτος: 100px; κείμενο-ευθυγράμμιση: κέντρο; κείμενο-διακόσμηση: κανένα? γραμμή-ύψος: 40px; σκιά κειμένου: 1px 1px 0px # 283744;

Οι σύνδεσμοι μενού θα χωριστούν με 1px δεξιά, εκτός από την τελευταία. Θυμηθείτε την προηγούμενη ανάρτηση μας στο μοντέλο κουτιού, το πλάτος του μενού θα επεκταθεί 1px καταφέρνοντάς το 101px ως προσθήκη των συνόρων, οπότε εδώ αλλάζουμε το μέγεθος κιβωτίου μοντέλο σε border box για να διατηρηθεί το μενού παραμένει 100px.

 nav li a border-right: 1px solid # 576979; μέγεθος κιβωτίου: πλαίσιο-πλαίσιο? -Moz-box-μέγεθος: border-box? -webkit-box-μέγεθος: border-box?  nav li: τελευταίο παιδί a border-right: 0;

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

 nav a: hover, nav a: ενεργό χρώμα-φόντου: # 8c99a4;

... και τέλος, ο επιπλέον σύνδεσμος θα είναι κρυμμένος (για την επιφάνεια εργασίας).

 nav a # pull εμφάνιση: κανένας;

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

Περαιτέρω ανάγνωση: CSS3 μεγέθους κιβωτίων (Hongkiat.com)

Ερωτήματα Media

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

Δεδομένου ότι η πλοήγησή μας είναι αρχικά 600px fix-width, θα καθορίσουμε πρώτα τα στυλ όταν προβάλλεται 600px ή μικρότερο μέγεθος οθόνης, έτσι πρακτικά, Αυτό είναι το πρώτο σημείο διακοπής μας.

Σε αυτό το μέγεθος οθόνης, κάθε ένας από τους δύο συνδέσμους μενού θα εμφανίζεται δίπλα-δίπλα, οπότε ο ulτο πλάτος εδώ θα είναι 100% του παραθύρου του προγράμματος περιήγησης ενώ οι συνδέσεις μενού θα έχουν 50% για το πλάτος.

 @media οθόνη και (μέγιστο πλάτος: 600px) nav height: auto;  nav ul πλάτος: 100%; εμφάνιση: μπλοκ? ύψος: auto;  nav li πλάτος: 50%; float: αριστερά. θέση: σχετική.  nav li a border-bottom: 1px στερεά # 576979; border-right: 1px solid # 576979;  nav a κείμενο-ευθυγράμμιση: αριστερά; πλάτος: 100%. κείμενο-παύλα: 25px;

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

Σε αυτό το μέγεθος οθόνης, ο επιπλέον σύνδεσμος που προσθέσαμε προηγουμένως θα ξεκινήσει ορατός και δίνουμε επίσης το σύνδεσμο a “Μενού” στην δεξιά πλευρά χρησιμοποιώντας το εικονίδιο :μετά ψευδο-στοιχείο, ενώ οι κύριοι σύνδεσμοι μενού θα κρυφτούν για να αποθηκευτούν περισσότεροι κάθετοι χώροι στην οθόνη.

 @media μόνο οθόνη και (max-width: 480px) nav border-bottom: 0;  nav ul εμφάνιση: κανένας; ύψος: auto;  nav a # τραβήξτε εμφάνιση: μπλοκ? φόντο-χρώμα: # 283744; πλάτος: 100%. θέση: σχετική.  nav a # pull: μετά από περιεχόμενο: ""; background: διεύθυνση url ('nav-icon.png') no-repeat; πλάτος: 30px; ύψος: 30px; εμφάνιση: inline-block θέση: απόλυτη; δεξιά: 15px; κορυφή: 10px;

Τέλος, όταν η οθόνη γίνεται μικρότερη από 320px και χαμηλώστε το μενού θα εμφανίζεται κάθετα από πάνω προς τα κάτω.

 @media μόνο οθόνη και (max-width: 320px) nav li εμφάνιση: μπλοκ; float: κανένας; πλάτος: 100%.  nav li a border-bottom: 1px στερεά # 576979;

Τώρα, μπορείτε να προσπαθήσετε να αλλάξετε το μέγεθος του παραθύρου του προγράμματος περιήγησης. Θα πρέπει τώρα να είναι σε θέση να προσαρμόσει το μέγεθος της οθόνης.

Περαιτέρω ανάγνωση: Ερώτημα μέσων για τυπικές συσκευές.

Εμφάνιση του Μενού

Σε αυτό το σημείο, το μενού θα εξακολουθεί να είναι κρυφό και θα είναι ορατό μόνο όταν χρειάζεται, αγγίζοντας ή κάνοντας κλικ στο “Μενού” link και μπορούμε να επιτύχουμε το αποτέλεσμα χρησιμοποιώντας το jQuery slideToggle ().

 $ (pull '), menu = $ (' nav ul '), menuHeight = menu.height (), $ (pull) .on (' e.preventDefault (); menu.slideToggle (););).

Ωστόσο, όταν αλλάζετε το μέγεθος του παραθύρου του προγράμματος περιήγησης αμέσως μετά την προβολή και την απόκρυψη του μενού σε μια μικρή οθόνη, το μενού θα παραμείνει κρυμμένο, καθώς το οθόνη: καμία το στυλ που παράγεται από το jQuery είναι ακόμα συνδεδεμένο στο στοιχείο.

Επομένως, πρέπει να αφαιρέσουμε αυτό το στυλ στο μέγεθος του παραθύρου, ως εξής:

 $ (παράθυρο) .resize (function) var w = $ (παράθυρο) .width () · if (w> 320 && menu.is (': hidden')) menu.removeAttr (' );

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

Διαδήλωση
Λήψη πηγής

Μπόνους: Ένας εναλλακτικός τρόπος

Όπως έχουμε αναφέρει προηγουμένως σε αυτήν την ανάρτηση, υπάρχουν κάποιες άλλες δυνατότητες να το κάνουμε και χρησιμοποιώντας μια βιβλιοθήκη JavaScript που ονομάζεται SelectNav.js είναι ένας από τους ευκολότερους τρόπους. Αυτό είναι ένα καθαρό JavaScript που δεν βασίζεται σε άλλη βιβλιοθήκη τρίτου μέρους όπως το jQuery.

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

Ανατρέξτε στην επίσημη τεκμηρίωση για περαιτέρω εφαρμογή.

συμπέρασμα

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