Se utiliza un menú con secciones de submenús desplegables en el diseño del sitio para presentar más claramente la estructura de las secciones y subsecciones, mientras se ahorra espacio en la página. No es tan difícil implementar un mecanismo de este tipo: uno de los ejemplos de implementación se da en el artículo.
Instrucciones
Paso 1
A continuación se muestra el código fuente completo de la página. Las descripciones de estilos se colocan directamente en el texto de la página. Ni el html ni el css de esta variante de la implementación del menú contienen construcciones complejas que requieran una explicación detallada.
Paso 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menú desplegable simple con subsecciones
* {
familia de fuentes: arial;
tamaño de fuente: 16px;
}
/ * para navegadores IE más antiguos * /
cuerpo {comportamiento: url ("csshover.htc");}
ul, li, a {
bloqueo de pantalla;
margen: 0;
acolchado: 0;
borde: 0;
}
ul {
ancho: 150px;
borde: plata maciza de 1 px;
fondo: blanco;
estilo de lista: ninguno;
}
li {
posición: relativa;
relleno: 1px;
color de fondo: plateado;
índice z: 9;
}
li.folder {background-color: silver;}
li.folder ul {
posición: absoluta;
izquierda: 111px; / * Solo IE * /
superior: 5px;
}
li.folder> ul {left: 140px;} / * para otros * /
a {
relleno: 2px;
borde: 1px blanco sólido;
decoración de texto: ninguna;
de color negro;
font-weight: negrita;
ancho: 100%; / * para IE * /
}
li> a {width: auto;} / * para otros * /
li a {
bloqueo de pantalla;
ancho: 140px;
}
li a.submenu {
color de fondo: amarillo;
}
/ * Capítulos * /
a: hover {
color del borde: gris;
color de fondo: rojo;
de color negro;
}
li.folder a: hover {
color de fondo: rojo;
}
/ * Secciones * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Capítulo
-
2. Sección
- 2.1 Capítulo
-
2.2 Sección
- 2.2.1 Capítulo
- 2.2.2 Capítulo
- 2.2.3 Capítulo
- 2.3 Capítulo
-
3. Sección
- 3.1 Capítulo
- 3.2 Capítulo
- 3.3 Capítulo
- 4. Capítulo
Paso 3
Si desea utilizar la opción para admitir modificaciones del navegador ya obsoletas, debe agregar una línea adicional al bloque de descripción de estilo (inmediatamente después) (no es necesario que agregue un comentario):
/ * para navegadores IE más antiguos * /
cuerpo {comportamiento: url ("csshover.htc");}
Paso 4
Luego cree una página separada, cuyo contenido se muestra a continuación.
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 = {elementos: , devoluciones de llamada: {}, 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. importaciones; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } pruebe {var c = a. rules; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (alguna excepción) {}}, 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, 'en $ 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 + ': expresión (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)} 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', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; función CSSHoverElement (a, b, c) {this.node = a; esto.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 ()}}}) ();
Paso 5
Esta página debe guardarse con el nombre csshover.htc y colocarse en el mismo lugar que la página principal.
