Οδηγός βήμα προς βήμα
Αν το μενού πλοήγησης είναι μια οριζόντια γραμμή στην κορυφή ή μια κάθετη γραμμή κάτω από την πλευρά, είναι ακόμα απλά μια λίστα. Κατά το σχεδιασμό της πλοήγησης στο διαδίκτυο, είναι συχνά εύκολο να ξεχνάμε ότι ένα μενού πλοήγησης είναι απλά μια δοξασμένη ομάδα συνδέσμων. Αλλά αν προγραμματίζετε την πλοήγησή σας χρησιμοποιώντας το XHTML + CSS, μπορείτε να δημιουργήσετε ένα μενού που είναι μικρό για λήψη (το XHTML) και εύκολο να προσαρμόσετε (CSS).
Ξεκινώντας
Για να αρχίσετε να σχεδιάζετε μια λίστα για πλοήγηση, πρέπει να χρησιμοποιήσετε μια λίστα.
Μπορεί να είναι μια τυποποιημένη λίστα που έχει οριστεί ως πλοήγηση:
Αν κοιτάξετε προσεκτικά τη HTML, θα παρατηρήσετε ότι ο σύνδεσμος "Αρχική" έχει επίσης ένα αναγνωριστικό του youarehere. Αυτό θα σας επιτρέψει να δημιουργήσετε ένα μενού που προσδιορίζει την τρέχουσα θέση για τους αναγνώστες σας. Ακόμα κι αν δεν σχεδιάζετε να έχετε αυτόν τον τύπο οπτικού συμβόλου στον ιστότοπό σας αυτήν τη στιγμή, μπορείτε να συμπεριλάβετε αυτές τις πληροφορίες. Αν αποφασίσετε να προσθέσετε αργότερα το κουμπί, θα έχετε λιγότερη κωδικοποίηση για να προετοιμάσετε τον ιστότοπό σας.
Χωρίς οποιοδήποτε στυλ CSS , αυτό το μενού XHTML μοιάζει με μια τυπική λίστα. Υπάρχουν κουκκίδες και τα στοιχεία της λίστας είναι ελαφρά οριακά. Επειδή χρησιμοποιώ συνδέσμους με σύμβολο κράτησης θέσης , τα περισσότερα προγράμματα περιήγησης δεν θα εμφανίζουν τους συνδέσμους ως κλικ (υπογραμμισμένο και μπλε). Εάν επικολλήσετε στην παραπάνω HTML σε μια ιστοσελίδα, η πλοήγησή σας θα μοιάζει με αυτή:
- Σπίτι
- Προϊόντα
- Υπηρεσίες
- Επικοινωνήστε μαζί μας
Αυτό είναι αρκετά βαρετό και δεν μοιάζει πολύ με ένα μενού. Αλλά με λίγα μόνο στυλ CSS που προστέθηκαν στη λίστα, μπορείτε να δημιουργήσετε ένα μενού που σας κάνει υπερήφανους.
Κάθετο μενού πλοήγησης
Ένα κάθετο μενού πλοήγησης είναι πολύ εύκολο να γράψετε γιατί εμφανίζεται με τον ίδιο τρόπο όπως μια κανονική λίστα: πάνω και κάτω.
Τα στοιχεία της λίστας εμφανίζονται κάθετα προς τα κάτω στη σελίδα.
Όταν σχεδιάζω μενού, θα ήθελα να ξεκινήσω από το εξωτερικό και να δουλέψω μέσα. Με αυτό εννοώ ότι πρώτα στυλίσω την πλοήγηση ul # και στη συνέχεια μεταφέρω στα στοιχεία li και μετά στους συνδέσμους κλπ. Έτσι για αυτό το μενού, ορίστε πρώτα το πλάτος του μενού. Αυτό θα διασφαλίσει ότι ακόμη και αν τα στοιχεία του μενού είναι μακρά, δεν θα ωθήσει το υπόλοιπο της διάταξης πάνω ή θα προκαλέσει οριζόντια κύλιση.
ul # πλοήγηση {πλάτος: 12em; }}
Μόλις έχω το πλάτος που έχει ρυθμιστεί, μπορώ να παίξω με τα στοιχεία της λίστας. Αυτό μου επιτρέπει να ρυθμίζω τα πράγματα όπως (για να απαλλαγούμε από τις σφαίρες), χρώματα φόντου, σύνορα, ευθυγράμμιση κειμένου και περιθώρια.
ul # πλοήγηση li {
λίστας-style: κανένας;
φόντο-χρώμα: # 039;
σύνορα-κορυφή: συμπαγές 1px # 039;
κείμενο-ευθυγράμμιση: αριστερά;
περιθώριο: 0;
}}
Αφού ορίσετε τα βασικά στοιχεία για τα στοιχεία της λίστας, μπορείτε να αρχίσετε να παίζετε με τον τρόπο εμφάνισης του μενού στην περιοχή συνδέσεων. Πρώτα στυλ η UL # πλοήγηση LI A και στη συνέχεια ο σύνδεσμος A: A: επισκέφθηκε, A: hover, και A: ενεργό (αν το θέλετε). Για τους συνδέσμους, μου αρέσει να κάνω τους συνδέσμους ένα στοιχείο μπλοκ (και όχι το προεπιλεγμένο in-line). Αυτό τους ωθεί να καταλάβουν ολόκληρο το χώρο του LI -και ενεργούν περισσότερο σαν μια παράγραφο, γεγονός που τους καθιστά ευκολότερο στο στυλ ως κουμπιά μενού.Το άλλο πράγμα που πάντα κάνω είναι να αφαιρέσω την υπογράμμιση (κείμενο-διακόσμηση: κανένα) καθώς αυτό κάνει τα κουμπιά μοιάζουν περισσότερο με κουμπιά σε με.
Αλλά φυσικά, ο σχεδιασμός σας μπορεί να είναι διαφορετικός.
ul # πλοήγηση li a {
οθόνη: μπλοκ?
κείμενο-διακόσμηση: κανένα?
padding: .25em;
σύνορα-κάτω: στερεά 1px # 39f;
όριο-δεξιά: συμπαγές 1px # 39f;
}}
Παρατηρήστε ότι με την οθόνη: μπλοκ? που έχει οριστεί στους συνδέσμους, ολόκληρο το πλαίσιο του στοιχείου μενού είναι clickable, όχι μόνο τα γράμματα. Αυτό είναι επίσης καλό για χρηστικότητα. Βεβαιωθείτε ότι έχετε ορίσει τα χρώματα των συνδέσμων (σύνδεσμος, επισκέπτης, δείκτης και ενεργός), αν θέλετε να είναι διαφορετικά από τα προεπιλεγμένα μπλε, κόκκινα και μοβ.
α: σύνδεσμος, α: επισκέφθηκε {χρώμα: #fff; }}
α: αιωρείται, α: ενεργό {χρώμα: # 000; }}
Μου αρέσει επίσης να δώσω λίγο μεγαλύτερη προσοχή στην κατάσταση του hover αλλάζοντας το χρώμα του φόντου.
a: αιώρηση {background-color: #fff; }}
Εάν θέλετε περισσότερα παραδείγματα κάθετων μενού, συμβουλευτείτε την παρακάτω λίστα.
- Ένα στυλιζαρισμένο κατακόρυφο μενού
- Ένα βασικό πρότυπο κάθετου μενού
- Ένα στυλιζαρισμένο κάθετο μενού με εσάς
- Βασικό πρότυπο κάθετου μενού με εσάς
Οριζόντιο μενού πλοήγησης
Η δημιουργία οριζόντιων μενού πλοήγησης είναι ελαφρώς πιο δύσκολη από τα κάθετα μενού πλοήγησης επειδή πρέπει να αντισταθμίσετε το γεγονός ότι οι λίστες HTML προτιμούν να εμφανίζονται κατακόρυφα. Όπως και με το οριζόντιο μενού, δημιουργήστε πρώτα τη λίστα μενού πλοήγησης :
Για να δημιουργήσετε ένα οριζόντιο μενού, ενεργήστε όπως ακριβώς κάνατε με το κάθετο μενού. Ξεκινήστε με το εξωτερικό και εργάζεστε. Επειδή θέλω να ξεκινήσω την πλοήγησή μου στην αριστερή γωνία, το έβαλα με το αριστερό περιθώριο και το μαξιλάρι και το έβαλα προς τα αριστερά. Θα πρέπει επίσης να έχετε τη συνήθεια να ρυθμίζετε το πλάτος έτσι ώστε το μενού σας να μην καταλαμβάνει περισσότερο ή λιγότερο χώρο από ό, τι σκοπεύετε. Για οριζόντια μενού, αυτό είναι συνήθως το πλήρες πλάτος του σχεδίου. Προστέθηκα επίσης ένα χρώμα φόντου σε ολόκληρη τη λίστα για να γίνει ευκολότερη η ανάγνωση.
ul # navigation {
float: αριστερά.
περιθώριο: 0;
padding: 0;
πλάτος: 100%.
φόντο-χρώμα: # 039;
}}
Αλλά το μυστικό του οριζόντιου μενού πλοήγησης βρίσκεται στα στοιχεία της λίστας. Τα στοιχεία λίστας είναι συνήθως στοιχεία μπλοκ, πράγμα που σημαίνει ότι θα έχουν μια νέα γραμμή τοποθετημένη πριν και μετά από κάθε μία. Με την εναλλαγή της οθόνης από μπλοκ σε γραμμή, αναγκάζετε τα στοιχεία της λίστας να ευθυγραμμιστούν οριζόντια το ένα δίπλα στο άλλο.
ul # πλοήγηση li {εμφάνιση: inline; }}
Έχω αντιμετωπίσει τους συνδέσμους ακριβώς όπως τους αντιμετώπισα στο κάθετο μενού πλοήγησης, με τα ίδια χρώματα και διακόσμηση κειμένου. Προστέθηκα ένα ανώτατο όριο για να οριοθετήσετε τα κουμπιά όταν αυτά μετακινούνται. Το μόνο πράγμα που αφαιρώ ήταν η οθόνη: μπλοκ? καθώς αυτό θα επαναφέρει τις νέες γραμμές και θα καταστρέψει το οριζόντιο μενού.
ul # πλοήγηση li a {
κείμενο-διακόσμηση: κανένα?
padding: .25em 1em;
σύνορα-κάτω: στερεά 1px # 39f;
σύνορα-κορυφή: στερεά 1px # 39f;
όριο-δεξιά: συμπαγές 1px # 39f;
}}
α: σύνδεσμος, α: επισκέφθηκε {χρώμα: #fff; }}
ul # πλοήγηση li a: hover {
φόντο-χρώμα: #fff;
χρώμα: # 000;
}}
Είστε εδώ Πληροφορίες τοποθεσίας
Μια άλλη πτυχή της HTML είναι το αναγνωριστικό youarehere. Εάν θέλετε να τροποποιήσετε το μενού σας για να υποδείξετε την τρέχουσα θέση των χρηστών σας, απλά χρησιμοποιήστε αυτό το αναγνωριστικό για να ορίσετε διαφορετικό χρώμα φόντου ή άλλο στυλ. Μετακινήστε αυτό το χαρακτηριστικό ταυτότητας στο σωστό στοιχείο μενού σε άλλες σελίδες, έτσι ώστε να επισημαίνεται πάντα η τρέχουσα σελίδα.
ul # πλοήγηση li # youarehere α {χρώμα-φόντο: # 09f; }}
Εάν τοποθετήσετε αυτά τα στυλ μαζί στη σελίδα σας, μπορείτε να δημιουργήσετε μια οριζόντια ή κάθετη γραμμή μενού που λειτουργεί με τον ιστότοπό σας, αλλά είναι γρήγορη η λήψη και πολύ εύκολη ενημέρωση στο μέλλον. Η χρήση του XHTML + CSS μετατρέπει τους καταλόγους σας σε ένα πολύ ισχυρό εργαλείο σχεδιασμού.
Αν θέλετε περισσότερα παραδείγματα οριζόντιων μενού, συμβουλευτείτε τα παρακάτω.
- Ένα οριζόντιο μενού με στυλ
- Βασικό πρότυπο οριζόντιου μενού
- Ένα στυλιγμένο οριζόντιο μενού με εσείς
- Βασικό πρότυπο οριζόντιου μενού με εσάς εδώ