Τα μενού επιλογής - γνωστά και ως μενού "suckerfish" - χρησιμοποιούν συνδυασμό HTML και CSS (δομημένα φύλλα στυλ) για τη δομή και το στυλ. Το τμήμα HTML ενός αναπτυσσόμενου μενού αποτελείται από λίστες κουκίδων και ένθετες λίστες κουκίδων. Αφού στυλίσατε τη γραμμή μενού και τους κύριους συνδέσμους πλοήγησης στο CSS, στυλίζετε τις ένθετες κουκίδες ως δευτερεύοντα μενού. Ο επιλογέας ": hover" στο CSS σάς επιτρέπει να αλλάξετε την ιδιότητα εμφάνισης ενός κρυμμένου υπομενού για να "μπλοκάρει" για να το κάνει ξανά.
Βήμα 1
Κωδικοποιήστε το μενού σας σε HTML χρησιμοποιώντας το "
"και"
"ετικέτες:
Σύνδεση 1
Σύνδεση 2
Σύνδεση 3
Προσθέστε ένα div clear-fix πριν το τέλος της λίστας.
Βήμα 2
Προσθέστε το υπομενού σας ως μια νέα λίστα με αδιάκριτα ένθετα μέσα στις ετικέτες "
" της μητρικής σύνδεσής σας:
Σύνδεσμος 1
Σύνδεσμος 2
Σύνδεσμος 1
Σύνδεσμος 2
Σύνδεσμος 3
Σύνδεση 3
Βήμα 3
Ανοίξτε το φύλλο στυλ σας και στυλ το μενού σας χρησιμοποιώντας το CSS. Αφαιρέστε και τις σφαίρες και την αριστερή εσοχή: #menu {style-list: none; padding: 0; } Σημειώστε ότι το "#menu" ταιριάζει με το όνομα ταυτότητας του παραδείγματος κώδικα HTML.
Βήμα 4
Προσθέστε ένα χρώμα φόντου στη γραμμή μενού: #menu {style-list: none; padding: 0; φόντο-χρώμα: σκούρο μπλε; }
Βήμα 5
Μετακινήστε τα στοιχεία του μενού προς τα αριστερά, ώστε να ευθυγραμμιστούν οριζόντια στη γραμμή μενού: #menu li {float: left? }
Βήμα 6
Σχεδιάστε τις συνδέσεις που συνθέτουν τα στοιχεία του μενού σας. Προσθέστε την επένδυση στους συνδέσμους για να τις κατατάξετε κάθετα στη γραμμή μενού, ενώ ταυτόχρονα θα τους κάνετε πιο εύκολο να κάνετε κλικ και να μετακινηθείτε πάνω. Πρέπει να αλλάξετε την ιδιότητα "εμφάνιση" σε "μπλοκ" για να προσθέσετε την επένδυση στους συνδέσμους: #menu li a {display: block; padding: 8px 15px; "text-align: center;", 3, [[άσπρο χρώμα; γραμματοσειρά-βάρος: έντονα. κείμενο-διακόσμηση: κανένα? } Σημειώστε ότι στο "padding" έχουν οριστεί δύο τιμές. Η πρώτη τιμή είναι κάθετη επίστρωση, ενώ τα δευτερεύοντα αποτελέσματα οριζόντια επένδυση.
Βήμα 7
Στυλ στο υπομενού και τα στοιχεία του. Πρώτα πρέπει να τοποθετήσετε το υπομενού. Αφαιρέστε επίσης τις σφαίρες και την επένδυση από τα υπομενού: #menu ul {position: absolute; style-λίστας: κανένας. padding: 0; }
Βήμα 8
Αφαιρέστε τα αριστερά πλωτήρες από τα στοιχεία των υπομενού: #menu ul li {clear: left; }
Βήμα 9
Προσθέστε το "dsiplay: none" στον κανόνα "#menu ul" για να απενεργοποιήσετε το υπομενού, επειδή δεν θέλετε να εμφανίζεται εκτός αν ο χρήστης αιωρείται πάνω από το γονικό του στοιχείο. Κάντε το μενού να εμφανίζεται ξανά χρησιμοποιώντας αυτόν τον κωδικό: #menu li: hover ul {dipslay: block; }
Προσθέστε τον κανόνα "σαφής ορισμός" στο div: .clearfix {clear: both? }
Συμβουλές
Προσθέστε την επισήμανση στα στοιχεία του μενού σας όταν ο χρήστης κινείται πάνω τους. Ένας κανόνας στυλ για να αλλάξετε το χρώμα φόντου ενός δεσμού που έχει μετακινηθεί μοιάζει με "#menu a: hover {}".
Μόλις ολοκληρώσετε την κατασκευή του μενού σας χρησιμοποιώντας HTML και CSS, μπορείτε να προσθέσετε ένα πρόσθετο jQuery για να κάνετε ωραία κινούμενα σχέδια για τα drop-down.
Πνευματικά δικαιώματα © Γνώση Υπολογιστών Όλα τα δικαιώματα κατοχυρωμένα