Ένα μενού με αναπτυσσόμενες ενότητες υπομενού χρησιμοποιείται στη διάταξη του ιστότοπου για να παρουσιάσει με μεγαλύτερη σαφήνεια τη δομή των ενοτήτων και των υποτμημάτων, εξοικονομώντας ταυτόχρονα χώρο στη σελίδα. Δεν είναι τόσο δύσκολο να εφαρμοστεί ένας τέτοιος μηχανισμός: ένα από τα παραδείγματα εφαρμογής δίνεται στο άρθρο.
Οδηγίες
Βήμα 1
Ακολουθεί ο πλήρης πηγαίος κώδικας της σελίδας. Οι περιγραφές των στυλ τοποθετούνται απευθείας στο κείμενο της σελίδας. Ούτε το html ούτε το css αυτής της παραλλαγής της εφαρμογής μενού περιέχει πολύπλοκες κατασκευές που απαιτούν λεπτομερή εξήγηση.
Βήμα 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Απλό αναπτυσσόμενο μενού με υποενότητες
* {
font-family: arial;
μέγεθος γραμματοσειράς: 16px;
}
/ * για παλαιότερα προγράμματα περιήγησης IE * /
body {behavior: url ("csshover.htc");}
ul, li, ένα {
οθόνη: μπλοκ;
περιθώριο: 0;
επένδυση: 0;
περίγραμμα: 0;
}
ολ {
πλάτος: 150 εικονοστοιχεία;
περίγραμμα: 1px στερεό ασήμι;
φόντο: λευκό;
στυλ λίστας: κανένα;
}
λι {
θέση: σχετική
επένδυση: 1px;
χρώμα φόντου: ασημί;
ευρετήριο z: 9;
}
li.folder {φόντο-χρώμα: ασήμι;}
li.folder ul {
θέση: απόλυτη;
αριστερά: 111 εικονοστοιχεία; / * Μόνο IE * /
κορυφή: 5px;
}
li.folder> ul {αριστερά: 140 εικονοστοιχεία;} / * για άλλους * /
ένα {
επένδυση: 2px;
περίγραμμα: 1px στερεό λευκό;
διακόσμηση κειμένου: κανένα;
χρωμα μαυρο;
γραμματοσειρά: έντονη;
πλάτος: 100%; / * για IE * /
}
li> a {width: auto;} / * για άλλους * /
είναι ένα {
οθόνη: μπλοκ;
πλάτος: 140 εικονοστοιχεία;
}
li a.submenu {
χρώμα φόντου: κίτρινο;
}
/ * Κεφάλαια * /
α: αιωρηθείτε {
χρώμα περιγράμματος: γκρι;
χρώμα φόντου: κόκκινο;
χρωμα μαυρο;
}
li.folder a: αιωρηθείτε {
χρώμα φόντου: κόκκινο;
}
/ * Ενότητες * /
li.folder: αιωρηθείτε {z-index: 10;}
ul ul, li: hover ul ul {display: none;}
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
Εάν θέλετε να χρησιμοποιήσετε την επιλογή για την υποστήριξη ήδη ξεπερασμένων τροποποιήσεων του προγράμματος περιήγησης, τότε θα πρέπει να προστεθεί μια επιπλέον γραμμή στο μπλοκ περιγραφής στυλ (αμέσως μετά) (δεν χρειάζεται να προσθέσετε ένα σχόλιο):
/ * για παλαιότερα προγράμματα περιήγησης IE * /
body {behavior: url ("csshover.htc");}
Βήμα 4
Στη συνέχεια, δημιουργήστε μια ξεχωριστή σελίδα, το περιεχόμενο της οποίας φαίνεται παρακάτω.
window. CSSHover = (συνάρτηση () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | ενεργή | εστίαση)) / i; var n = / (. *?):(hover | ενεργή | εστίαση) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (hover | ενεργή | εστίαση)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, list: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index ++)% αυτό. list.length]}}; var v = συνάρτηση (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {στοιχεία: , callbacks: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.imports) {δοκιμάστε {var b = a. εισαγωγές; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } δοκιμάστε {var c = a. Rules; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: function (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [1]; var f = c.replace (o, 'on $ 1'); var g = c.replace (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; if (! This.callbacks ) {var j = u.get (); var k = v (j); b.addΚανόνας (e, j + ': έκφραση (CSSHover (αυτό, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, ενημέρωση κώδικα: συνάρτηση (a, b, c, d) {try {var f = a.parentNode.currentStyle [d]; a.style [d] = f} catch (e) {a.runtimeStyle [d] = if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = νέο CSSHoverElement (a, b, c); this.elements.push (g)} return b}, unload: function () {try {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} catch (e) {}}}; var x = {onhover: {activator: 'onmouseenter', απενεργοποιητής: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; συνάρτηση CSSHoverElement (a, b, c) {this.node = a; αυτό. t ype = b; var d = νέο RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.className + = " + c}; this.deactivator = function () {a.className = a.className.replace (d, ")}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [αυτός ο τύπος]. activator, this.activator); this.node.detachEvent (x [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); λειτουργία επιστροφής (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} αλλιώς {w.init ()}}}) ();
Βήμα 5
Αυτή η σελίδα θα πρέπει να αποθηκευτεί με το όνομα csshover.htc και να τοποθετηθεί στην ίδια θέση με την κύρια σελίδα.
