Πώς να φτιάξετε ένα συρόμενο μενού

Πίνακας περιεχομένων:

Πώς να φτιάξετε ένα συρόμενο μενού
Πώς να φτιάξετε ένα συρόμενο μενού

Βίντεο: Πώς να φτιάξετε ένα συρόμενο μενού

Βίντεο: Πώς να φτιάξετε ένα συρόμενο μενού
Βίντεο: Μείναμε Στο ΙΚΕΑ Και Φτιάξαμε Σπιτάκι! 2024, Ενδέχεται
Anonim

Μία από τις πιο σημαντικές πτυχές της ανάπτυξης ιστοσελίδων και λογισμικού είναι η δημιουργία μενού. Ένα πανέμορφο συρόμενο μενού παραμένει σημείο αναφοράς για πολλούς ιδιοκτήτες ιστότοπων και προγραμματιστές. Αυτό μπορεί να γίνει χρησιμοποιώντας εργαλεία CSS και Expression Web.

Πώς να φτιάξετε ένα συρόμενο μενού
Πώς να φτιάξετε ένα συρόμενο μενού

Οδηγίες

Βήμα 1

Ανοίξτε το Expression Web και μεταβείτε στο Manage Style για να ξεκινήσετε να δημιουργείτε ένα συρόμενο μενού και πατήστε το πλήκτρο New Style. Ονομάστε το νέο στυλ Selector ul li. Βεβαιωθείτε ότι το αρχείο που δημιουργήθηκε έχει την επέκταση drop-down.css. Για να δημιουργήσετε ένα συρόμενο μενού, καθορίστε την κατάλληλη θέση στην οθόνη. Προσδιορίστε το πλάτος καθενός από τα στοιχεία του μενού και αφαιρέστε τις περιττές κουκκίδες που μπορεί να βρίσκονται μπροστά τους.

Βήμα 2

Εκτελέστε την επιλογή Διάταξη και ορίστε το χαρακτηριστικό Εμφάνιση. Δώστε του μια κατάλληλη τιμή Inline για ευθυγράμμιση στην οθόνη. Ορίστε το χαρακτηριστικό Float στην Αριστερά και πατήστε το πλήκτρο Εφαρμογή. Ορίστε όλα τα στοιχεία της λίστας σε μία γραμμή. Για να τα διατηρήσετε τακτοποιημένα και να μην επικαλύπτονται, ορίστε το χαρακτηριστικό Width σε Position με τη μορφή 150 px. Βεβαιωθείτε ότι όλα τα στοιχεία της λίστας έχουν το ίδιο μέγεθος. Αφαιρέστε τις τελείες μπροστά από κάθε στοιχείο μεταβαίνοντας στο χαρακτηριστικό List και ρυθμίζοντας τον τύπο στυλ λίστας σε None. Κάντε κλικ στο "OK" για να αποδεχτείτε τις αλλαγές και να τεθούν σε ισχύ.

Βήμα 3

Προσαρμόστε το στυλ και το μέγεθος της γραμματοσειράς για το ulli. Μεταβείτε στο Manage Styles και κάντε δεξί κλικ στο ul, επιλέγοντας Modify Style. Θα δείτε το ήδη γνωστό μενού διαλόγου. Μεταβείτε στο Font, επιλέξτε Font-family και ορίστε αυτό το χαρακτηριστικό σε Helvetica, Arial, Sans-serif. Ρυθμίστε το μέγεθος της γραμματοσειράς και ορίστε το σε 0, 9. Ορίστε το χαρακτηριστικό Μετατροπή κειμένου σε κεφαλαία. Στο χαρακτηριστικό Height - Position, καθορίστε το ακριβές ύψος των στοιχείων μενού ρυθμίζοντας την τιμή στα 30 px.

Βήμα 4

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

Συνιστάται: