Μία από τις πιο σημαντικές πτυχές στην ανάπτυξη λογισμικού και ιστότοπων είναι η δημιουργία μενού. Η Microsoft και το πιο διάσημο πνευματικό της παιδί, το λειτουργικό σύστημα των Windows, πρέπει να ληφθούν ως πρωταρχικό παράδειγμα. Παρά το γεγονός ότι αυτό το προϊόν χρησιμοποιείται από τη συντριπτική πλειοψηφία των χρηστών υπολογιστών στον κόσμο, η κριτική όχι μόνο δεν μειώνεται, αλλά αυξάνεται συνεχώς. Βασικά, αφορά την ταλαιπωρία της τοποθεσίας των στοιχείων μενού. Το παρακάτω είναι μια περιγραφή του τρόπου δημιουργίας μενού σε CSS και Expression Web.
Οδηγίες
Βήμα 1
Για να ξεκινήσετε να δημιουργείτε ένα οριζόντιο μενού, μεταβείτε στη Διαχείριση στυλ και, στη συνέχεια, κάντε κλικ στο κουμπί Νέο στυλ. Ονομάστε το νέο στυλ Selector ul li. Σπουδαίος! Βεβαιωθείτε ότι το αρχείο που δημιουργήθηκε έχει την επέκταση drop-down.css. Για να δημιουργήσετε ένα οριζόντιο μενού, υποδείξτε στο δημιουργημένο στοιχείο ότι θα είναι ακριβώς οριζόντιο. Στη συνέχεια, προσδιορίστε το πλάτος κάθε στοιχείου μενού και αφαιρέστε όλα τα περιττά σημεία που βρίσκονται μπροστά από όλα τα στοιχεία της λίστας.
Βήμα 2
Μεταβείτε στην επιλογή Διάταξη, ορίστε το χαρακτηριστικό Display σε Inline για να κάνετε οριζόντια ευθυγράμμιση. Στη συνέχεια, ορίστε την αριστερή τιμή στο χαρακτηριστικό Float και κάντε κλικ στο κουμπί Εφαρμογή. Ορίστε όλα τα στοιχεία λίστας σε μία γραμμή. Για να τοποθετηθούν τακτοποιημένα και να μην ανιχνεύονται το ένα πάνω στο άλλο, στο χαρακτηριστικό Width, ορίστε την τιμή θέσης στα 150 px. Βεβαιωθείτε ότι όλα τα στοιχεία της λίστας έχουν το ίδιο μέγεθος. Στη συνέχεια, αφαιρέστε τις τελείες μπροστά από όλα τα στοιχεία - για αυτό, μεταβείτε στο χαρακτηριστικό List και ορίστε την παράμετρο None στο στοιχείο τύπου στυλ λίστας. Κάντε κλικ στο OK για να γίνουν αποδεκτές και να εφαρμοστούν όλες οι αλλαγές.
Βήμα 3
Προσαρμόστε το μέγεθος και το στυλ της γραμματοσειράς για το ulli. Για να το κάνετε αυτό, μεταβείτε στο Manage Styles και κάντε δεξί κλικ στο ulli και, στη συνέχεια, επιλέξτε Modify Style. Θα εμφανιστεί το γνωστό παράθυρο διαλόγου. Μεταβείτε στο Font, επιλέξτε το χαρακτηριστικό Font-family και ορίστε το σε Sans-serif, Arial, Helvetica. Στη συνέχεια, προσαρμόστε το μέγεθος της γραμματοσειράς ορίζοντάς το σε 0, 9. Μετά από αυτό, ορίστε το χαρακτηριστικό Text-transform σε κεφαλαία Προσαρμόστε το ύψος των στοιχείων μενού στο χαρακτηριστικό Height - Position, ρυθμίζοντας την τιμή στα 30 px.
Βήμα 4
Αφού ολοκληρώσετε όλες τις διορθωτικές ενέργειες, αποθηκεύστε το αρχείο ως menu.html. Στη συνέχεια, δοκιμάστε το δημιουργημένο μενού σε διαφορετικά προγράμματα περιήγησης για να βεβαιωθείτε ότι λειτουργεί σωστά. Όπως μπορείτε να δείτε, ο σχεδιασμός του οριζόντιου μενού είναι αρκετά απλός.
