Η δημιουργία μενού είναι πιθανώς ένα από τα κύρια σημεία στην ανάπτυξη τοποθεσιών και προγραμμάτων. Επιπλέον, μια καλή επεξεργασία και λογικός σχεδιασμός ενός τέτοιου μενού είναι το πρόσωπο ενός ιστότοπου ή οποιουδήποτε προγράμματος. Για παράδειγμα, ας πάρουμε τη Microsoft και το λειτουργικό σύστημα των Windows 7. Μετά την κυκλοφορία των Windows 7, η Microsoft άκουσε πολλές κριτικές που δεν ήταν κολακευτική από μόνη της. Υπήρξαν πολλές κριτικές, αλλά συνήθως τοποθετούνται άχρηστα στοιχεία μενού. Διαβάστε προσεκτικά αυτό το σεμινάριο για το πώς να δημιουργήσετε ένα οριζόντιο αναπτυσσόμενο μενού με CSS και Expression Web. Τα στυλ ετικετών θα αλλάξουν για τη δημιουργία του μενού
Οδηγίες
Βήμα 1
Μεταβείτε στη Διαχείριση στυλ και, στη συνέχεια, κάντε κλικ στο κουμπί Νέο στυλ. Δώστε το όνομα Selector ulli στο νέο στυλ που μόλις δημιουργήσατε. Επίσης, θυμηθείτε να βεβαιωθείτε ότι το νέο στυλ πρέπει να καθοριστεί στο drop-down.css αρχείο.
Βήμα 2
Για να τεντώσετε ένα οριζόντιο μενού, πρέπει να πείτε στα στοιχεία του μενού ότι θα είναι οριζόντια. Στη συνέχεια, πρέπει να προσδιορίσετε το πλάτος κάθε στοιχείου μενού και να αφαιρέσετε όλες τις περιττές κουκκίδες μπροστά από όλα τα στοιχεία λίστας.
Βήμα 3
Για οριζόντια ευθυγράμμιση μεταβείτε στο Layout και ορίστε το χαρακτηριστικό εμφάνισης σε ενσωματωμένο. Ορίστε το χαρακτηριστικό float στα αριστερά. Κάντε κλικ στο κουμπί Εφαρμογή. Όλα τα στοιχεία λίστας πρέπει να οριστούν σε μία γραμμή. Για να μην αλληλεπικαλύπτονται μεταξύ τους, πρέπει να κάνετε τα εξής: ορίστε την τιμή θέσης του χαρακτηριστικού πλάτους σε 150 εικονοστοιχεία. Τώρα δείτε το. Όλα τα στοιχεία της λίστας πρέπει να έχουν το ίδιο μέγεθος.
Βήμα 4
Τώρα πρέπει να προσπαθήσουμε να αφαιρέσουμε τις τελείες μπροστά από τα στοιχεία της λίστας. Για να το κάνετε αυτό, μεταβείτε στη λίστα και ορίστε το χαρακτηριστικό list-style-type σε κανένα.
Βήμα 5
Κάντε κλικ στο OK για αποδοχή όλων των αλλαγών.
Βήμα 6
Για να προσαρμόσετε το μέγεθος της γραμματοσειράς για το στυλ ulli, πρέπει να κάνετε τα εξής. Στο Manage Styles, κάντε δεξί κλικ στο στυλ ull που χρειάζεστε για να επιλέξετε Modify Style. Θα ανοίξει το γνωστό παράθυρο διαλόγου για προσθήκη ή αλλαγή χαρακτηριστικών. Μεταβείτε στην κατηγορία Γραμματοσειρά και ορίστε το χαρακτηριστικό font-family σε Arial, Helvetica, sans-serif. Στη συνέχεια, μεταβείτε στο χαρακτηριστικό μέγεθος γραμματοσειράς και ορίστε το σε 0,9em. Μετά από αυτό, ρυθμίστε το χαρακτηριστικό μετατροπής κειμένου, ορίστε την τιμή σε κεφαλαία.
Βήμα 7
Το ύψος των στοιχείων στο δημιουργημένο μενού μπορεί να ρυθμιστεί στην κατηγορία Θέση. Ορίστε το χαρακτηριστικό ύψους σε 30px.
Βήμα 8
Στη συνέχεια, πρέπει να αποθηκεύσετε το αρχείο menu.html. Για να γίνει αυτό, το Expression Web θα ανοίξει το απαιτούμενο παράθυρο Save Embedded Files για να αποθηκεύσει το αρχείο. Αποθήκευση στο αρχείο drop-down.css. Κάντε κλικ στο OK για αποθήκευση.
Βήμα 9
Τώρα ελέγξτε το αποτέλεσμα. Για αξιοπιστία, είναι καλύτερο να το δοκιμάσετε σε διαφορετικά προγράμματα περιήγησης. Για να ελέγξετε το αποτέλεσμα που αποκτήθηκε στο προεπιλεγμένο πρόγραμμα περιήγησης, πρέπει να πατήσετε το πλήκτρο F12 στο πληκτρολόγιό σας.
