Τα αναπτυσσόμενα μενού στις σελίδες του ιστότοπου χρησιμοποιούνται για εξοικονόμηση χώρου και παρέχουν μια λογική παρουσίαση της δομής ενός πόρου ιστού. Υπάρχουν πολλοί τρόποι για την εφαρμογή αυτού του στοιχείου, ένας από τους πιο απλούς δίνεται παρακάτω.
Είναι απαραίτητο
Βασικές γνώσεις γλωσσών HTML και CSS
Οδηγίες
Βήμα 1
Ο κώδικας HTML του μενού χρησιμοποιεί ένθετα στοιχεία λίστας (UL και LI), μέσα στα οποία τοποθετούνται σύνδεσμοι προς σελίδες. Δεν περιέχει πολύπλοκες δομές. Η δυναμική εφαρμόζεται μέσω CSS, το μπλοκ περιγραφής του οποίου τοποθετείται απευθείας στον πηγαίο κώδικα της σελίδας. Δεν υπάρχει τίποτα το ιδιαίτερο γι 'αυτό, εκτός από το κείμενο περιέχει κάποιες εξηγήσεις για το σκοπό ορισμένων μπλοκ στυλ.
Βήμα 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Πτυσώμενο μενού * {
γραμματοσειρά-οικογένεια: Verdana;
μέγεθος γραμματοσειράς: 14px;
} ul, li, ένα {
επένδυση: 0;
οθόνη: μπλοκ;
περίγραμμα: 0;
περιθώριο: 0;
} ουλ {
περίγραμμα: 1px στερεό #AAA;
πλάτος: 150 εικονοστοιχεία;
στυλ λίστας: κανένα;
φόντο: #FFF;
} λι {
χρώμα φόντου: #AAA;
θέση: σχετική
ευρετήριο z: 9;
επένδυση: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
θέση: απόλυτη;
κορυφή: 5px;
αριστερά: 111 εικονοστοιχεία; / * για προγράμματα περιήγησης IE * /
}
li.folder> ul {αριστερά: 140 εικονοστοιχεία;} / * για άλλα προγράμματα περιήγησης * / α {
επένδυση: 2px;
περίγραμμα: 1px στερεό #FFF;
διακόσμηση κειμένου: κανένα;
πλάτος: 100%; / * για προγράμματα περιήγησης IE * /
χρώμα: # 000;
γραμματοσειρά: έντονη;
}
li> a {width: auto;} / * για άλλα προγράμματα περιήγησης * / li a {
πλάτος: 140 εικονοστοιχεία;
οθόνη: μπλοκ;
} li a.submenu {
χρώμα φόντου: κίτρινο;
} / * Συνδέσεις * /
α: αιωρηθείτε {
χρώμα περιγράμματος: γκρι;
χρώμα φόντου: # FF0000;
χρωμα μαυρο;
}
li.folder a: αιωρηθείτε {
χρώμα φόντου: # FF0000;
} / * Φάκελοι * /
ul ul, li: hover ul ul {display: none;}
li.folder: αιωρηθείτε {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Σελίδα
-
2. Φάκελος
- 2.1 Σελίδα
-
2.2 Φάκελος
- 2.2.1 Σελίδα
- 2.2.2 Σελίδα
- 2.2.3 Σελίδα
- 2.3 Σελίδα
-
3. Φάκελος
- 3.1 Σελίδα
- 3.2 Σελίδα
- 3.3 Σελίδα
- 4. Σελίδα
Βήμα 3
Μπορείτε να προσθέσετε υποστήριξη για παλαιότερες εκδόσεις προγραμμάτων περιήγησης του Internet Explorer σε αυτόν τον κώδικα - εφαρμόζεται με τη χρήση JavaScript (από τον Peter Nederlof). Πρέπει να κατεβάσετε το αρχείο με τον απαιτούμενο κωδικό, για παράδειγμα, από αυτόν τον σύνδεσμο - https://peterned.home.xs4all.nl/htc/csshover3.htc. Πρέπει να τοποθετηθεί στον ίδιο φάκελο με την κύρια σελίδα. Και στην περιγραφή των στυλ της κύριας σελίδας, προσθέστε έναν σύνδεσμο σε αυτήν - μπορεί να τοποθετηθεί αμέσως μετά την ετικέτα στυλ ανοίγματος: / * για παλιά προγράμματα περιήγησης IE *
body {behavior: url ("csshover3.htc");}
