Në paraqitjen e faqes përdoret një menu me seksione nën menyje zbritëse në mënyrë që të paraqitet më qartë struktura e seksioneve dhe nënseksioneve, duke kursyer hapësirën e faqes. Nuk është aq e vështirë të zbatosh një mekanizëm të tillë: një nga shembujt e zbatimit është dhënë në artikull.
Udhëzimet
Hapi 1
Më poshtë është kodi i plotë burimor i faqes. Përshkrimet e stileve vendosen direkt në tekstin e faqes. As html dhe as css i këtij varianti të implementimit të menusë nuk përmbajnë ndonjë ndërtim kompleks që kërkon shpjegim të hollësishëm.
Hapi 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu e thjeshtë zbritëse me nënseksione
* {
font-family: arial;
madhësia e shkronjave: 16px;
}
/ * për shfletuesit më të vjetër të IE * /
trupi {sjellja: url ("csshover.htc");}
ul, li, a {
ekran: bllok;
diferencë: 0;
mbushje: 0;
kufiri: 0;
}
ul {
gjerësia: 150px;
kufiri: argjend i fortë 1px;
sfondi: e bardhë;
stili i listës: asnjë;
}
li {
pozicioni: relativ;
mbushje: 1px;
ngjyra e sfondit: argjend;
indeksi z: 9;
}
li.folder {sfondi-ngjyra: argjendi;}
li.dosje ul {
pozicioni: absolut;
majtas: 111px; / * Vetëm IE * /
maja: 5px;
}
li.folder> ul {majtas: 140px;} / * për të tjerët * /
një {
mbushje: 2px;
bordura: 1px e bardhë e fortë;
dekorim teksti: asnjë;
ngjyra: E zezë;
pesha e shkronjave: e theksuar;
gjerësia: 100%; / * për IE * /
}
li> a {width: auto;} / * për të tjerët * /
li a {
ekran: bllok;
gjerësia: 140px;
}
li a.submenu {
ngjyra e sfondit: e verdha;
}
/ * Kapitujt * /
a: rri pezull {
ngjyra e kufirit: gri;
ngjyra e sfondit: e kuqe;
ngjyra: e zezë;
}
li.doshe a: rri pezull {
ngjyra e sfondit: e kuqe;
}
/ * Seksionet * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {shfaqje: asnjë;}
li: hover ul, li: hover li: hover ul {display: bllok;}
- 1. Kapitulli
-
2. Seksioni
- 2.1 Kapitulli
-
2.2 Seksioni
- 2.2.1 Kapitulli
- 2.2.2 Kapitulli
- 2.2.3 Kapitulli
- 2.3 Kapitulli
-
3. Seksioni
- 3.1 Kapitulli
- 3.2 Kapitulli
- 3.3 Kapitulli
- 4. Kapitulli
Hapi 3
Nëse dëshironi të përdorni opsionin për të mbështetur modifikime të shfletuesit tashmë të vjetëruar, atëherë një rresht shtesë duhet të shtohet në bllokun e përshkrimit të stilit (menjëherë pas) (nuk keni nevojë të shtoni një koment):
/ * për shfletuesit më të vjetër të IE * /
trupi {sjellja: url ("csshover.htc");}
Hapi 4
Pastaj krijoni një faqe të veçantë, përmbajtja e së cilës tregohet më poshtë.
dritare. CSSHover = (funksioni () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +))):(rri pezull | aktive | fokus)) / i; var n = / (. *?):(rri pezull | aktive | fokus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +] | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * në (rri pezull | aktiv | fokus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {indeksi: 0, lista: ['text-kashida', 'text-kashida-space', 'text-justify'], merrni: function () {return this.list [(this.index ++)% kjo. list.length]}}; var v = funksioni (c) {kthimi c.zëvendësimi (/-(.)/ mg, funksioni (a, b) {kthimi b.toUpperCase ()})}} var w = {elementet: , thirrjet kthyese: {}, init: funksioni () {if (!, l = a.gjatësi; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: funksioni (a) {if (a.imports) {provoni {var b = a. importon; var l = b.gjatësi; për (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}}} catch (securityException) {} } provo {var c = a. rregullat; var r = c.gjatësia; për (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: funksioni (a, b) {var c = a.selectorText; if (m.test (c)) {var d = a.style.cssText; var e = n.exec (c) [1]; var f = c.zëvendësim (o, 'në $ 1'); var g = c.zëvendësim (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; nëse (!! Kjo thërret prapa ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': shprehja (CSSHover (kjo, "'+ f +'", "'+ h +'", "'+ k +'"))) '); this.callbacks = true} b.addRule (g, d)} }, patch: funksioni (a, b, c, d) {provo {var f = a.parentNode.currentStyle [d]; a.style [d] = f} kap (e) {a.runtimeStyle [d] = ''} nëse (! a.csshover) {a.csshover = } nëse (! a.csshover [c]) {a.csshover [c] = e vërtetë; var g = CSSHoverElement i ri (a, b, c); this.element.push (g)} return b}, shkarkoj: function () {provo {var l = this.element.length; for (var i = 0; i <l; i ++) {this.elemente .barkoni ()} këtë elemente =; this.callbacks = {}} kapni (e) {}}}; var x = {onhover: {aktivizues: 'onmouseenter', çaktivizues: 'onmouseleave'}, aktiv: {aktivues: 'onmousedown', çaktivizues: 'onmouseup'}, onfokus: {aktivues: 'onfocus', çaktivizues: 'onblur'}}; funksioni CSSHoverElement (a, b, c) {this.node = a; kjo.t ype = b; var d = RegExp i ri ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = funksioni () {a.className + = '' + c}; this.deactivator = funksioni () {a.className = a.className.replace (d, '')}; a.attachEvent (x .aktivues, ky.aktivues); a.attachEvent (x .deaktivues, ky.deaktivues)} CSSHoverElement.prototype = {shkarkoj: funksioni () {this.node.detachEvent (x [ky lloj). aktivizues, ky.aktivues); this.node.detachEvent (x [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; dritare.attachEvent ('onbeforeunload', funksioni () {w.unload ()}); funksioni i kthimit (a, b, c, d) {nëse (a) {kthimi w.patch (a, b, c, d)} tjetër {w.init ()}}}) ();
Hapi 5
Kjo faqe duhet të ruhet me emrin csshover.htc dhe të vendoset në të njëjtin vend me faqen kryesore.
