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