Ένα ωραίο αναπτυσσόμενο μενού μπορεί να δημιουργηθεί όχι μόνο σε JavaScript, αλλά και χρησιμοποιώντας τυπικές ετικέτες HTML. Αυτή η μέθοδος δημιουργίας ενός αναπτυσσόμενου μενού θα είναι χρήσιμη για εκείνους που μόλις ξεκινούν τα πρώτα τους βήματα στη δημιουργία ιστότοπων και θέλουν να απλοποιήσουν το έργο δημιουργίας μενού στις σελίδες.
Οδηγίες
Βήμα 1
Σε κώδικα HTML, ένα τέτοιο μενού είναι μια λίστα χωρίς ταξινόμηση με ένθετες λίστες μέσα. Για να ξεκινήσετε, δημιουργήστε ένα αρχείο style.css και αντιγράψτε τον παρακάτω κώδικα CSS για να μορφοποιήσετε και να μορφοποιήσετε το μενού:
#nav, #nav ul {
στυλ λίστας: κανένα;
περιθώριο: 0;
επένδυση: 0;
περίγραμμα: 1px στερεό # 000;
φόντο: # 515151;
float: αριστερά;
πλάτος: 100%;
}
# nav λι {
float: αριστερά;
θέση: σχετική
χρώμα φόντου: # 003366;
πίσω / έδαφος: κανένα;
}
#nav λι ul {
οθόνη: κανένα;
θέση: απόλυτη;
χρώμα φόντου: # 003366;
επένδυση: 8px 0;
πλάτος: 138 εικονοστοιχεία;
}
Βήμα 2
Τώρα πρέπει να προσθέσουμε κάποια διακόσμηση στα στοιχεία του μενού. Ορίστε το πλάτος και το ύψος για αυτές, αφαιρέστε τις γραμμές υπογράμμισης, ορίστε ένα καθαρό πλάτος για κάθε σύνδεσμο και καθορίστε τα επιθυμητά χρώματα φόντου.
Βήμα 3
Για όλες αυτές τις αλλαγές, προσθέστε τον ακόλουθο κώδικα στο αρχείο:
#nav α {
χρώμα: #fff;
διακόσμηση κειμένου: κανένα;
οθόνη: μπλοκ;
πλάτος: 120px;
επένδυση: 4px 10px;
χρώμα φόντου: # 003366 επανάληψη-y δεξιά;
}
#nav α: αιωρηθείτε {
χρώμα: # 000;
χρώμα φόντου: # 0033FF;
}
#nav li: αιωρηθείτε {
χρώμα φόντου: # 333333;
}
Στη συνέχεια, προσθέστε το ακόλουθο κομμάτι κώδικα για να ολοκληρώσετε το μενού:
#nav li: αιωρηθείτε li ul {
οθόνη: κανένα;
πλάτος: 138 εικονοστοιχεία;
κορυφή: -9px;
αριστερά: 133 εικονοστοιχεία;
}
#nav li: hover li: hover ul {
οθόνη: μπλοκ;
}
Βήμα 4
Στην έκδοση HTML, η γενική λίστα μη ταξινομημένων μενού μοιάζει με αυτήν - στη βάση της, δημιουργείται το μενού, το οποίο αναφέρθηκε στο άρθρο.
- Σπίτι
-
Κατάλογος
-
Ολα τα προϊόντα
- Κατά ημερομηνία
- Κατασκευαστές
- Αλλα
-
