Valikkoa avattavilla alavalikko-osioilla käytetään sivuston ulkoasussa osioiden ja alaosien rakenteen selkeämmän esittämisen ja sivutilan säästämisen kannalta. Tällaisen mekanismin toteuttaminen ei ole niin vaikeaa: yksi toteutusesimerkkeistä on artikkelissa.
Ohjeet
Vaihe 1
Alla on sivun täydellinen lähdekoodi. Tyylien kuvaukset sijoitetaan suoraan sivun tekstiin. Tämän valikkototeutuksen muunnelman HTML- tai css-tiedostot eivät sisällä monimutkaisia rakenteita, jotka vaativat yksityiskohtaista selitystä.
Vaihe 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // FI"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yksinkertainen avattava valikko, jossa on alaosioita
* {
font-family: arial;
fontin koko: 16px;
}
/ * vanhemmille IE-selaimille * /
body {käyttäytyminen: url ("csshover.htc");}
ul, li, a {
näyttö: lohko;
marginaali: 0;
pehmuste: 0;
reuna: 0;
}
ul {
leveys: 150px;
reunus: 1px kiinteä hopea;
tausta: valkoinen;
list-style: ei mitään;
}
li {
asema: suhteellinen;
pehmuste: 1px;
taustaväri: hopea;
z-indeksi: 9;
}
li.folder {taustaväri: hopea;}
li.kansio ul {
sijainti: absoluuttinen;
vasen: 111 kuvapistettä; / * Vain IE * /
yläosa: 5 kuvapistettä;
}
li.folder> ul {vasen: 140px;} / * muille * /
a {
pehmuste: 2px;
reunus: 1px kiinteä valkoinen;
tekstikoristelu: ei mitään;
väri musta;
fontin paino: lihavoitu;
leveys: 100%; / * IE: lle * /
}
li> a {leveys: auto;} / * muille * /
li a {
näyttö: lohko;
leveys: 140px;
}
li a.submenu {
taustaväri: keltainen;
}
/ * Luvut * /
a: vie hiiri {
reunaväri: harmaa;
taustaväri: punainen;
väri musta;
}
li.folder a: vie hiiri {
taustaväri: punainen;
}
/ * Osiot * /
li.folder: hover {z-index: 10;}
ul ul, li: vie hiiri ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Luku
-
2. Jakso
- 2.1 Luku
-
2.2 Osa
- 2.2.1 Luku
- 2.2.2 Luku
- 2.2.3 Luku
- 2.3 Luku
-
3. Jakso
- 3.1 Luku
- 3.2 Luku
- 3.3 Luku
- 4. Luku
Vaihe 3
Jos haluat käyttää vaihtoehtoa jo vanhentuneiden selainmuutosten tukemiseen, tyylirekisterilohkoon tulisi lisätä ylimääräinen rivi (heti sen jälkeen) (sinun ei tarvitse lisätä kommenttia):
/ * vanhemmille IE-selaimille * /
body {käyttäytyminen: url ("csshover.htc");}
Vaihe 4
Luo sitten erillinen sivu, jonka sisältö on esitetty alla.
ikkuna. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hiiren osoitin | aktiivinen | tarkennus)) / i; var n = / (. *?):(hiiren osoitin | aktiivinen | tarkennus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * päällä (leijuu | aktiivinen | tarkennus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {hakemisto: 0, luettelo: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index ++)% tämä. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elementit: , soittopyynnöt: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a. pituus; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: funktio (a) {if (a.import) {yritä {var b = a. tuonti; var l = b.pituus; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } kokeile {var c = a. sääntöjä; var r = c. pituus; 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. korvaa (o, '$ 1: llä'); var g = c. korvaa (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; if (! Tämä.vastaa ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': lauseke (CSSHover (tämä, "'+ f +'", "'+ h +'", "'+ k +'")) '); tämä. Takaiskut = true} b.addRule (g, d)} }, korjaustiedosto: funktio (a, b, c, d) {kokeile {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 = uusi 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: {aktivaattori: 'onmouseenter', deaktivaattori: 'onmouseleave'}, ei aktiivinen: {activator: 'onmousedown', deaktivaattori: 'onmouseup'}, onfocus: {activator: 'onfocus', deaktivaattori: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; Tämä T ype = b; var d = uusi RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.aktivaattori = function () {a.luokanimi + = '' + c}; tämä.deaktivaattori = funktio () {a.luokanNimi = a.luokanNimi. korvaa (d, '')}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {pura: toiminto () {this.node.detachEvent (x [this.type]. aktivaattori, tämä.aktivaattori); this.solmu.detachEvent (x [this.type].deaktivaattori, this.deaktivaattori); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); return-toiminto (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Vaihe 5
Tämä sivu tulisi tallentaa nimellä csshover.htc ja sijoittaa samaan paikkaan kuin pääsivu.
