Nel layout del sito viene utilizzato un menu con sezioni di sottomenu a discesa per presentare in modo più chiaro la struttura delle sezioni e delle sottosezioni, risparmiando spazio sulla pagina. Non è così difficile implementare un tale meccanismo: uno degli esempi di implementazione è fornito nell'articolo.
Istruzioni
Passo 1
Di seguito il codice sorgente completo della pagina. Le descrizioni degli stili vengono inserite direttamente nel testo della pagina. Né l'html né il css di questa variante dell'implementazione del menu contengono costruzioni complesse che richiedono una spiegazione dettagliata.
Passo 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu a discesa semplice con sottosezioni
* {
font-family: arial;
dimensione del carattere: 16px;
}
/ * per browser IE meno recenti * /
body {comportamento: url ("csshover.htc");}
ul, li, a {
blocco di visualizzazione;
margine: 0;
imbottitura: 0;
bordo: 0;
}
ul {
larghezza: 150px;
bordo: 1px argento massiccio;
fondo: bianco;
stile elenco: nessuno;
}
li {
posizione: relativa;
imbottitura: 1px;
colore di fondo: argento;
indice z: 9;
}
li.folder {colore di sfondo: argento;}
li.cartella ul {
posizione: assoluta;
sinistra: 111px; / * Solo IE * /
in alto: 5px;
}
li.folder> ul {sinistra: 140px;} / * per gli altri * /
un {
imbottitura: 2px;
bordo: 1px bianco solido;
decorazione del testo: nessuna;
colore nero;
font-weight: grassetto;
larghezza: 100%; / * per IE * /
}
li> a {larghezza: auto;} / * per gli altri * /
li a {
blocco di visualizzazione;
larghezza: 140px;
}
li a.sottomenu {
colore di fondo: giallo;
}
/ * Capitoli * /
a: hover {
colore del bordo: grigio;
colore di fondo: rosso;
colore nero;
}
li.folder a: hover {
colore di fondo: rosso;
}
/ * Sezioni * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Capitolo
-
2. Sezione
- 2.1 Capitolo
-
2.2 Sezione
- 2.2.1 Capitolo
- 2.2.2 Capitolo
- 2.2.3 Capitolo
- 2.3 Capitolo
-
3. Sezione
- 3.1 Capitolo
- 3.2 Capitolo
- 3.3 Capitolo
- 4. Capitolo
Passaggio 3
Se si desidera utilizzare l'opzione per supportare modifiche del browser già obsolete, è necessario aggiungere una riga aggiuntiva al blocco della descrizione dello stile (subito dopo) (non è necessario aggiungere un commento):
/ * per browser IE meno recenti * /
body {comportamento: url ("csshover.htc");}
Passaggio 4
Quindi creare una pagina separata, il cui contenuto è mostrato di seguito.
window. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | active | focus)) / i; var n = / (. *?):(hover | active | focus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (hover | active | focus)) / 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 ++)% this. list.length] }}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , callback: {}, 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) {prova {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } try {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, 'su $ 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.addRule (e, j + ': espressione (CSSHover (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: function (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 = nuovo CSSHoverElement (a, b, c); this.elements.push (g)} return b}, scarica: 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', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown ', deactivator:' onmouseup '}, onfocus: {activator:' onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; questa t ype = b; var d = new 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 [this.type]. 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 ()}); return function (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Passaggio 5
Questa pagina dovrebbe essere salvata con il nome csshover.htc e posizionata nello stesso posto della pagina principale.
