En el disseny del lloc s’utilitza un menú amb seccions de submenús desplegables per presentar amb més claredat l’estructura de seccions i subseccions, alhora que s’estalvia espai a la pàgina. No és tan difícil implementar aquest mecanisme: un dels exemples d'implementació es dóna a l'article.
Instruccions
Pas 1
A continuació es mostra el codi font complet de la pàgina. Les descripcions d’estils es col·loquen directament al text de la pàgina. Ni l'html ni el css d'aquesta variant de la implementació del menú contenen cap construcció complexa que requereixi una explicació detallada.
Pas 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menú desplegable senzill amb subseccions
* {
font-family: arial;
mida de la lletra: 16 px;
}
/ * per a navegadors antics IE * /
cos {comportament: url ("csshover.htc");}
ul, li, a {
pantalla: bloc;
marge: 0;
encoixinat: 0;
vora: 0;
}
ul {
amplada: 150 px;
sanefa: 1 píxel de plata massissa;
fons: blanc;
estil de llista: cap;
}
li {
posició: relativa;
encoixinat: 1 px;
color de fons: plata;
índex z: 9;
}
li.folder {background-color: silver;}
li.folder ul {
posició: absoluta;
esquerra: 111px; / * Només IE * /
superior: 5 px;
}
li.folder> ul {left: 140px;} / * per a altres * /
un {
encoixinat: 2 px;
vora: 1 px blanc massís;
decoració de text: cap;
color: negre;
font-pes: negreta;
amplada: 100%; / * per a IE * /
}
li> a {width: auto;} / * per a altres * /
li a {
pantalla: bloc;
amplada: 140 px;
}
li a.submenu {
color de fons: groc;
}
/ * Capítols * /
a: passeu el cursor {
color de la vora: gris;
color de fons: vermell;
color: negre;
}
li.folder a: hover {
color de fons: vermell;
}
/ * Seccions * /
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. Capítol
-
2. Secció
- 2.1 Capítol
-
2.2 Secció
- 2.2.1 Capítol
- 2.2.2 Capítol
- 2.2.3 Capítol
- 2.3 Capítol
-
3. Secció
- 3.1 Capítol
- 3.2 Capítol
- 3.3 Capítol
- 4. Capítol
Pas 3
Si voleu utilitzar l'opció per donar suport a modificacions del navegador ja obsoletes, s'hauria d'afegir una línia addicional al bloc de descripció d'estil (immediatament després) (no cal que afegiu cap comentari):
/ * per a navegadors antics IE * /
cos {comportament: url ("csshover.htc");}
Pas 4
A continuació, creeu una pàgina independent, el contingut de la qual es mostra a continuació.
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 | actiu | focus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, llista: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {retorna this.list [(this.index ++)% this. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , devolucions de trucada: {}, 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) {try {var b = a. importacions; var l = b.longitud; per a (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } proveu {var c = a. regles; var r = c.longitud; per (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.addRule (e, j + ': expressió (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 = new CSSHoverElement (a, b, c); this.elements.push (g)} retorna b}, descarrega: 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', desactivador: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; això.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 = nul; this.deactivator = nul; this.node = nul; this.type = nul }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); return function (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Pas 5
Aquesta pàgina s'ha de desar amb el nom csshover.htc i col·locar-la al mateix lloc que la pàgina principal.