Vietnes izkārtojumā tiek izmantota izvēlne ar nolaižamajām apakšizvēlņu sadaļām, lai skaidrāk parādītu sadaļu un apakšsadaļu struktūru, vienlaikus ietaupot lapas vietu. Īstenot šādu mehānismu nav tik grūti: viens no ieviešanas piemēriem ir sniegts rakstā.
Instrukcijas
1. solis
Zemāk ir pilns lapas avota kods. Stilu apraksti tiek ievietoti tieši lapas tekstā. Ne šī izvēlnes ieviešanas varianta html, ne css nesatur sarežģītas konstrukcijas, kurām nepieciešams detalizēts skaidrojums.
2. solis
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vienkārša nolaižamā izvēlne ar apakšsadaļām
* {
fontu saime: arial;
fonta lielums: 16 pikseļi;
}
/ * vecākām IE pārlūkprogrammām * /
ķermeņa {uzvedība: url ("csshover.htc");}
ul, li, a {
displejs: bloks;
starpība: 0;
polsterējums: 0;
apmale: 0;
}
ul {
platums: 150 pikseļi;
apmale: 1px ciets sudrabs;
fons: balts;
saraksta stils: nav;
}
li {
amats: radinieks;
polsterējums: 1px;
fona krāsa: sudrabs;
z-indekss: 9;
}
li.folder {fona krāsa: sudrabs;}
li.folder ul {
pozīcija: absolūta;
pa kreisi: 111 pikseļi; / * Tikai IE * /
augšdaļa: 5px;
}
li.folder> ul {pa kreisi: 140 pikseļi;} / * citiem * /
a {
polsterējums: 2px;
apmale: 1px cieta balta;
teksta noformēšana: nav;
krāsa: melna;
fonta svars: treknrakstā;
platums: 100%; / * IE * /
}
li> a {width: auto;} / * citiem * /
li a {
displejs: bloks;
platums: 140 pikseļi;
}
li a.submenu {
fona krāsa: dzeltena;
}
/ * Nodaļas * /
a: virziet kursoru {
apmales krāsa: pelēka;
fona krāsa: sarkana;
krāsa: melna;
}
li.folder a: virziet kursoru {
fona krāsa: sarkana;
}
/ * Sadaļas * /
li.folder: virziet kursoru {z-index: 10;}
ul ul, li: virziet kursoru ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Nodaļa
-
2. Sadaļa
- 2.1. Nodaļa
-
2.2. Sadaļa
- 2.2.1. Nodaļa
- 2.2.2. Nodaļa
- 2.2.3. Nodaļa
- 2.3. Nodaļa
-
3. Sadaļa
- 3.1. Nodaļa
- 3.2. Nodaļa
- 3.3. Nodaļa
- 4. Nodaļa
3. solis
Ja vēlaties izmantot opciju, lai atbalstītu jau novecojušas pārlūka modifikācijas, stila apraksta blokam (tūlīt pēc tam) jāpievieno papildu rinda (komentārs nav jāpievieno):
/ * vecākām IE pārlūkprogrammām * /
ķermeņa {uzvedība: url ("csshover.htc");}
4. solis
Pēc tam izveidojiet atsevišķu lapu, kuras saturs ir parādīts zemāk.
logs. CSSHover = (funkcija () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(kursors | aktīvs | fokuss)) / i; var n = / (. *?):(kursors | aktīvs | fokuss) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * ieslēgts (virziet kursoru | aktīvs | fokuss)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, saraksts: ['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: , atzvanīšana: {}, 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.import) {mēģināt {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } mēģiniet {var c = a. kārtulas; 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. aizstāt (o, 'uz $ 1'); var g = c. aizstāt (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; ja (! Tas.atsaukumi ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': izteiksme (CSSHover (šis, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, plāksteris: funkcija (a, b, c, d) {mēģiniet {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 = jauns CSSHoverElement (a, b, c); this.elements.push (g)} return b}, izkraut: 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', deaktivators: 'onmouseleave'}, onactive: {activator: 'onmousedown', deaktivators: 'onmouseup'}, onfocus: {activator: 'onfocus', deaktivators: 'onblur'}}; funkcija CSSHoverElement (a, b, c) {this.node = a; tas.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]. aktivators, tas. aktivators); tas. mezgls.detachEvent (x [tas. tips]. deaktivators, tas. deaktivators); tas. aktivators = null; tas. deaktivators = null; tas. mezgls = nulle; tas. tips = nulle }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); atgriešanās funkcija (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
5. solis
Šī lapa jāsaglabā ar nosaukumu csshover.htc un jānovieto tajā pašā vietā, kur galvenā lapa.
