Με τη βοήθεια κατάλληλου κώδικα HTML και απλών κανόνων CSS, μπορείτε να δημιουργήσετε ένα αναδυόμενο μενού, να το συμπληρώσετε και να το τροποποιήσετε. Χρησιμοποιώντας τους πίνακες και τα εργαλεία γλώσσας σήμανσης, μπορείτε να διασφαλίσετε ότι το ίδιο το μενού λειτουργεί σωστά σε όλα τα προγράμματα περιήγησης.
Οδηγίες
Βήμα 1
Κρατήστε πρώτα τη βασική γραμμή μενού. Δημιουργήστε μια ειδική αριθμημένη λίστα με ένα υπομενού σε ένα πρόγραμμα επεξεργασίας κειμένου. Συνήθως το "Notepad" χρησιμοποιείται για αυτούς τους σκοπούς. Το υπομενού λειτουργεί ως στοιχείο της γονικής λίστας. Για παράδειγμα: First ElementFlood ElementFlood Element2Field Element3Field Element4Field Element5
Βήμα 2
Αποθηκεύστε αυτήν τη λίστα σε ξεχωριστό αρχείο html. Στη συνέχεια, δημιουργήστε ένα αρχείο.css. Εισαγάγετε όλες τις απαιτούμενες παραμέτρους φύλλου στυλ. Κάντε το πολύ προσεκτικά, επειδή ένα λάθος και το αναδυόμενο μενού δεν θα εμφανιστεί σωστά ή δεν θα λειτουργήσει καθόλου.
Βήμα 3
Αφαιρέστε τυχόν κουκκίδες και βάσεις που εφαρμόζονται στη λίστα κουκκίδων. Ορίστε το πλάτος του μενού χρησιμοποιώντας εργαλεία CSS: ul -style: none; πλάτος: 200px; }
Βήμα 4
Σημειώστε τη σχετική θέση όλων των στοιχείων στη λίστα με ένα χαρακτηριστικό που ονομάζεται θέση: ul li: relatif; }
Βήμα 5
Στη συνέχεια, τακτοποιήστε το υπομενού, τα στοιχεία του οποίου θα εμφανίζονται από το γονικό μενού προς τα δεξιά όταν ο δρομέας του ποντικιού είναι πάνω από το στοιχείο: li ul: απόλυτο; αριστερά: 199 εικονοστοιχεία; κορυφή: 0; οθόνη: κανένα; }
Βήμα 6
Το αριστερό χαρακτηριστικό είναι ένα pixel μικρότερο από το πλάτος του ίδιου του μενού. Αυτό επιτρέπει στα αναδυόμενα στοιχεία να τοποθετούνται σωστά χωρίς να δημιουργούνται διπλά περιθώρια. Το χαρακτηριστικό οθόνης χρησιμοποιείται για την απόκρυψη του υπομενού κατά το άνοιγμα της σελίδας.
Βήμα 7
Διαμορφώστε τους συνδέσμους όπως απαιτείται χρησιμοποιώντας τις κατάλληλες επιλογές css. Συμπεριλάβετε την παράμετρο display: block έτσι ώστε οι σύνδεσμοι να καταλαμβάνουν όλο τον χώρο που προορίζεται για αυτούς. Για να εμφανιστεί το μενού όταν ο δείκτης του ποντικιού αιωρείται πάνω του, εισαγάγετε τον ακόλουθο κωδικό: li: hover ul: block; }
Βήμα 8
Ορίστε πρόσθετες επιλογές για την εμφάνιση στοιχείων λίστας και συνδέσμων όπως επιθυμείτε. Συμπεριλάβετε ένα χαρακτηριστικό στο αρχείο.html. Το αναδυόμενο μενού είναι έτοιμο για χρήση.
