Svetainės išdėstyme naudojamas meniu su išskleidžiamaisiais submeniu skyriais, kad būtų aiškiau pateikta skyrių ir poskirsnių struktūra, tuo pačiu taupant vietos vietą. Įdiegti tokį mechanizmą nėra taip sunku: vienas iš įgyvendinimo pavyzdžių pateiktas straipsnyje.
Nurodymai
1 žingsnis
Žemiau yra visas puslapio šaltinio kodas. Stilių aprašymai dedami tiesiai į puslapio tekstą. Nei šio meniu įgyvendinimo varianto HTML, nei css sudėtingų konstrukcijų, kurias reikia išsamiai paaiškinti.
2 žingsnis
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // LT"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Paprastas išskleidžiamasis meniu su poskyriais
* {
šriftų šeima: arialas;
šrifto dydis: 16 taškų;
}
/ * senesnėms IE naršyklėms * /
body {elgesys: url ("csshover.htc");}
ul, li, a {
rodyti: blokuoti;
paraštė: 0;
užpildas: 0;
kraštas: 0;
}
ul {
plotis: 150 taškų;
kraštas: 1px vientisas sidabras;
fonas: baltas;
list-style: nėra;
}
li {
padėtis: giminaitis;
užpildas: 1px;
fono spalva: sidabras;
z indeksas: 9;
}
li.folder {fono spalva: sidabras;}
li.folder ul {
pozicija: absoliuti;
kairėje: 111 taškų; / * Tik IE * /
viršuje: 5px;
}
li.folder> ul {kairėje: 140 taškų;} / * kitiems * /
a {
užpildas: 2px;
kraštinė: 1px vientisa balta;
teksto dekoravimas: nėra;
spalva: juoda;
šrifto svoris: paryškintas;
plotis: 100%; / * IE * /
}
li> a {plotis: auto;} / * kitiems * /
li a {
rodyti: blokuoti;
plotis: 140px;
}
li a.submenu {
fono spalva: geltona;
}
/ * Skyriai * /
a: užveskite pelės žymeklį {
krašto spalva: pilka;
fono spalva: raudona;
spalva: juoda;
}
li.folder a: užveskite pelės žymeklį {
fono spalva: raudona;
}
/ * Skyriai * /
li.folder: užveskite pelės žymeklį {z-index: 10;}
ul ul, li: užveskite pelę ul ul {display: none;}
li: užveskite ul, li: užveskite li: užveskite ul {display: block;}
- 1. skyrius
-
2. Skyrius
- 2.1 skyrius
-
2.2 skirsnis
- 2.2.1 skyrius
- 2.2.2 skyrius
- 2.2.3 skyrius
- 2.3 skyrius
-
3. Skyrius
- 3.1 skyrius
- 3.2 skyrius
- 3.3 skyrius
- 4. Skyrius
3 žingsnis
Jei norite naudoti parinktį palaikyti jau pasenusias naršyklės modifikacijas, tada prie stiliaus aprašymo bloko (iškart po jo) turėtų būti pridėta papildoma eilutė (komentaro pridėti nereikia):
/ * senesnėms IE naršyklėms * /
body {elgesys: url ("csshover.htc");}
4 žingsnis
Tada sukurkite atskirą puslapį, kurio turinys parodytas žemiau.
langas. CSSHover = (funkcija () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(užveskite pelės žymeklį | aktyvus | židinys)) / i; var n = / (. *?):(užveskite pelę | aktyvus | židinys) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * įjungtas (užveskite pelės žymeklį | aktyvus | židinys)] / 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 = {elementai: , atgaliniai skambučiai: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l =.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.import) {try {var b = a. importas; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.import )}} catch (securityException) {} } pabandykite {var c = a. taisyklės; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: funkcija (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [1]; var f = c. pakeisti (o, 'ant $ 1'); var g = c. pakeisti (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; if (! Tai. Atmeta ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': išraiška (CSSHover (tai, „'+ f +'", "'+ h +'", "'+ k +'")) '); this.backbacks = true} b.addRule (g, d)} }, pleistras: funkcija (a, b, c, d) {pabandykite {var f = a.parentNode.currentStyle [d]; a.style [d] = f} gaudyti (e) {a.runtimeStyle [d] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = naujas CSSHoverElement (a, b, c); this.elements.push (g)} return b}, iškrauti: 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: {aktyvatorius: 'onmouseenter', deaktyvatorius: 'onmouseleave'}, neaktyvus: {activator: 'onmousedown', deaktyvatorius: 'onmouseup'}, onfocus: {activator: 'onfocus', deaktyvatorius: 'onblur'}}; funkcija CSSHoverElement (a, b, c) {this.node = a; tai.t ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = funkcija () {a.className + = '' + c}; this.deactivator = function () {a.clName = a.clNAME.replace (d, '')}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type]. aktyvatorius, tai. aktyvatorius); tai. mazgas.detachEvent (x [šis. tipas]. išjungiklis, tai. išjungiklis); tai. aktyvatorius = nulinis; šis. išjungiklis = null; šis. mazgas = nulinis; šis. tipas = nulinis }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); grąžinimo funkcija (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
5 žingsnis
Šis puslapis turėtų būti išsaugotas pavadinimu csshover.htc ir patalpintas toje pačioje vietoje kaip ir pagrindinis puslapis.
