Με τη βοήθεια ενός καλού κώδικα HTML και απλών κανόνων CSS, μπορείτε να δημιουργήσετε ένα ωραίο αναδυόμενο μενού που μπορεί εύκολα να τροποποιηθεί και να συμπληρωθεί. Χρησιμοποιώντας γλώσσα σήμανσης και Cascading Style Sheets, μπορείτε να διασφαλίσετε ότι τα μενού λειτουργούν σωστά σε όλα τα προγράμματα περιήγησης.
Οδηγίες
Βήμα 1
Αρχικά, δημιουργήστε τη βασική δομή του μενού σας. Ανοίξτε ένα πρόγραμμα επεξεργασίας κειμένου και δημιουργήστε μια αριθμημένη λίστα με ένα υπομενού που λειτουργεί ως γονικό στοιχείο λίστας. Για παράδειγμα:
-
Πρώτο στοιχείο
- Αναπτυσσόμενο στοιχείο
- Πτώση 2
Βήμα 2
Αποθηκεύστε τη λίστα που δημιουργήθηκε σε ξεχωριστό αρχείο html. Στη συνέχεια, δημιουργήστε ένα αρχείο με επέκταση.css και εισαγάγετε όλες τις παραμέτρους φύλλου στυλ.
Βήμα 3
Καταργήστε τυχόν παραγέμισμα και κουκκίδες που ισχύουν στη λίστα κουκκίδων και ορίστε το πλάτος του μενού χρησιμοποιώντας εργαλεία CSS: ul {list-style: none;
πλάτος: 200px; }
Βήμα 4
Ορίστε τη σχετική θέση όλων των στοιχείων στη λίστα χρησιμοποιώντας το χαρακτηριστικό θέσης: ul li {position: relatif; }
Βήμα 5
Στη συνέχεια, πρέπει να σχεδιάσετε ένα υπομενού, καθένα από τα στοιχεία του οποίου θα εμφανίζεται στα δεξιά του γονικού μενού τη στιγμή που ο δείκτης του ποντικιού βρίσκεται στο στοιχείο: li ul {θέση: απόλυτο;
αριστερά: 199 εικονοστοιχεία;
κορυφή: 0;
οθόνη: κανένα; } Το αριστερό χαρακτηριστικό είναι ένα εικονοστοιχείο μικρότερο από το πλάτος του ίδιου του μενού. Αυτό επιτρέπει στα αναδυόμενα στοιχεία να τοποθετούνται έξυπνα χωρίς να δημιουργούν διπλά περιθώρια. Το χαρακτηριστικό εμφάνισης χρησιμοποιείται για την απόκρυψη του υπομενού κατά το άνοιγμα της σελίδας.
Βήμα 6
Στυλ στους συνδέσμους όπως επιθυμείτε χρησιμοποιώντας τις κατάλληλες επιλογές css Συμπεριλάβετε την παράμετρο display: block έτσι ώστε κάθε σύνδεσμος να καταλαμβάνει όλο το χώρο που έχει δεσμευτεί για αυτήν.
Βήμα 7
Για να εμφανιστεί το μενού τη στιγμή που ο κέρσορας είναι πάνω του (αιωρείται), πρέπει να εισαγάγετε τον κωδικό: li: hover ul {display: block; }
Βήμα 8
Ορίστε πρόσθετες επιλογές για την εμφάνιση συνδέσμων και στοιχείων λίστας όπως θέλετε
Βήμα 9
Το αναδυόμενο μενού είναι έτοιμο. Τώρα απομένει να συμπεριλάβουμε το χαρακτηριστικό στο αρχείο.html: Αναδυόμενο μενού
