Կայքի դասավորության մեջ օգտագործվում է բացվող ենթամենյուի բաժիններով ընտրացանկ, որպեսզի ավելի հստակ ներկայացվի բաժինների և ենթաբաժինների կառուցվածքը ՝ միաժամանակ խնայելով էջի տարածքը: Նման մեխանիզմի իրականացումը այնքան էլ դժվար չէ. Իրականացման օրինակներից մեկը բերված է հոդվածում:
Հրահանգներ
Քայլ 1
Ստորև բերված է էջի ամբողջական աղբյուրի կոդը: Ոճերի նկարագրությունները տեղադրվում են անմիջապես էջի տեքստում: Menuանկի իրականացման այս տարբերակի ոչ html- ն ու css- ը չեն պարունակում բարդ կառուցվածքներ, որոնք պահանջում են մանրամասն բացատրություն:
Քայլ 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Պարզ բացվող ընտրացանկ ՝ ենթաբաժիններով
* {
տառատեսակ-ընտանիք `arial;
տառատեսակի չափը ՝ 16px;
}
/ * հին IE բրաուզերների համար * /
մարմին {վարք. url ("csshover.htc");}
ուլ, լի, ա {
ցուցադրում ՝ բլոկ;
լուսանցք ՝ 0;
լիցքավորում ՝ 0;
եզրագիծ ՝ 0;
}
ուլ {
լայնությունը `150px;
եզրագիծ ՝ 1 հատ ամուր արծաթ;
ֆոն `սպիտակ;
ցուցակի ոճ `ոչ մեկը;
}
լի {
դիրքը ՝ հարաբերական;
լիցքավորում ՝ 1 հատ;
ֆոնային գույն ՝ արծաթագույն;
z- ինդեքսը `9;
}
li.folder {background-color: silver;}
լի. թղթապանակ ul {
դիրքը ՝ բացարձակ;
ձախ: 111px; / * Միայն IE * /
վերև ՝ 5 հատ;
}
li.folder> ul {ձախ: 140px;} / * ուրիշների համար * /
ա {
լիցքավորում ՝ 2 հատ;
եզրագիծ ՝ 1px պինդ սպիտակ;
տեքստային զարդարանք. ոչ մեկը;
գույնը `Սև;
տառատեսակի քաշը `համարձակ;
լայնությունը `100%; / * IE- ի համար * /
}
li> a {width: auto;} / * ուրիշների համար * /
լի ա {
ցուցադրում ՝ բլոկ;
լայնությունը `140px;
}
li a.submenu {
ֆոնային գույն ՝ դեղին;
}
/ * Գլուխներ * /
ա: սավառնել {
սահմանի գույնը `մոխրագույն;
ֆոնային գույն ՝ կարմիր;
գույնը `սև;
}
li.folder a: hover {
ֆոնային գույն ՝ կարմիր;
}
/ * Բաժիններ * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {ցուցադրում ՝ չկա;}
li: hover ul, li: hover li: hover ul {ցուցադրում: բլոկ;}
- 1. Գլուխ
-
2. Բաժին
- 2.1 Գլուխ
-
2.2 Բաժին
- 2.2.1 Գլուխ
- 2.2.2 գլուխ
- 2.2.3 գլուխ
- 2.3 գլուխ
-
3. Բաժին
- 3.1. Գլուխ
- 3.2 գլուխ
- 3.3 Գլուխ
- 4. Գլուխ
Քայլ 3
Եթե ցանկանում եք օգտագործել զննարկչի արդեն հնացած փոփոխություններին աջակցելու տարբերակը, ապա ոճի նկարագրության բլոկում (անմիջապես հետո) պետք է ավելացվի լրացուցիչ տող (կարիք չկա մեկնաբանություն ավելացնել).
/ * հին IE բրաուզերների համար * /
մարմին {վարք. url ("csshover.htc");}
Քայլ 4
Դրանից հետո ստեղծեք առանձին էջ, որի բովանդակությունը ներկայացված է ստորև:
windows. CSSHover = (ֆունկցիա () {var m = / (^ | / s) ((([^ a] ([^] +)?)] (a ([^ #.] [^] +) +))):(սավառնել | ակտիվ | ֆոկուս)) / i; var n = / (. *?):(սավառնել | ակտիվ | կիզակետ) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +] | (: [az] +) / gi; var q = / ([a-z0-9 _ / -] * on (սավառնել | ակտիվ | ֆոկուս)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {ցուցիչ ՝ 0, ցուցակ ՝ ['text-kashida', 'text-kashida-space', 'text-justify'], ստացեք: function () {վերադարձեք this.list [(this.index ++)% սա: list.length]}}; var v = ֆունկցիա (գ) {վերադարձ գ.փոխարինել (/-(.)/ մգ, ֆունկցիա (ա, բ) {վերադարձնել b.toUpperCase ()})}; var w = {տարրեր: , հետադարձ պատասխաններ ՝ {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (windows.document.compatMode)) {return} var a = windows.document.styleSheets, l = a. երկարություն; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}}, parseStylesheet: function (a) {if (a.imports) {փորձել {var b = a. ներմուծում; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}}} catch (SecurityException) {} } փորձեք {var c = a. կանոններ; var r = c.length; for (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: գործառույթ (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (գ) [1]; var f = c. փոխարինում (o, '$ 1-ի վրա'); var g = c. փոխարինում (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 + ': արտահայտություն (CSSHover (սա, '' + f + '","' + h + '","' + k + '")))'); this.callbacks = true} b.addRule (g, d)} }, կարկատիչ ՝ գործառույթ (a, b, c, d) {փորձել {var f = a.parentNode.currentStyle [d]; a.style [d] = f} բռնել (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.element.push (g)} վերադարձ b}, բեռնաթափել ՝ function () {try {var l = this.element.length; for (var i = 0; i <l; i ++) {this.element .unload ()} this.element =; this.callbacks = {}} բռնել (e) {}}}; var x = {onhover: {activator: 'onmouseenter', ապաակտիվացնող ՝ 'onmouseleave'}, onactive: {activator: 'onmousedown', disactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', disactivator: 'onblur'}}; գործառույթը CSSHoverElement (a, b, c) {this.node = a; սա ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = գործառույթ () {a.className + = '' + c}; this.deactivator = գործառույթ () {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 }}; պատուհան, դ)} ուրիշ {w.init ()}}}) ();
Քայլ 5
Այս էջը պետք է պահպանվի csshover.htc անունով և տեղադրվի նույն տեղում, ինչ հիմնական էջը:
