'N Menu met die vervolgkeuse-submenu-afdelings word in die webwerf-uitleg gebruik om die struktuur van afdelings en onderafdelings duideliker voor te stel, terwyl die spasie van bladsye bespaar word. Dit is nie so moeilik om so 'n meganisme te implementeer nie: een van die implementeringsvoorbeelde word in die artikel gegee.
Instruksies
Stap 1
Hieronder is die volledige bronkode van die bladsy. Beskrywings van style word direk in die teks van die bladsy geplaas. Nie die html of die css van hierdie variant van die implementering van die menu bevat komplekse konstruksies wat gedetailleerde verduideliking benodig nie.
Stap 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Eenvoudige keuselys met onderafdelings
* {
font-familie: arial;
lettergrootte: 16 px;
}
/ * vir ouer IE-blaaiers * /
liggaam {gedrag: url ("csshover.htc");}
ul, li, a {
vertoon: blok;
marge: 0;
opvulling: 0;
grens: 0;
}
ul {
breedte: 150px;
rand: 1px soliede silwer;
agtergrond: wit;
lysstyl: geen;
}
li {
posisie: relatief;
opvulling: 1px;
agtergrondkleur: silwer;
z-indeks: 9;
}
li.folder {agtergrondkleur: silwer;}
li.folder ul {
posisie: absoluut;
links: 111px; / * Slegs IE * /
bo: 5px;
}
li.folder> ul {links: 140px;} / * vir ander * /
'n {
opvulling: 2px;
rand: 1px soliede wit;
teksversiering: geen;
kleur: swart;
font-gewig: vet;
breedte: 100%; / * vir IE * /
}
li> a {breedte: motor;} / * vir ander * /
li a {
vertoon: blok;
breedte: 140px;
}
li a.submenu {
agtergrondkleur: geel;
}
/ * Hoofstukke * /
a: sweef {
randkleur: grys;
agtergrondkleur: rooi;
kleur: swart;
}
li.map a: sweef {
agtergrondkleur: rooi;
}
/ * Afdelings * /
li.folder: sweef {z-index: 10;}
ul ul, li: sweef ul ul {vertoon: geen;}
li: sweef ul, li: sweef li: sweef ul {vertoon: blok;}
- 1. Hoofstuk
-
2. Afdeling
- 2.1 Hoofstuk
-
2.2 Afdeling
- 2.2.1 Hoofstuk
- 2.2.2 Hoofstuk
- 2.2.3 Hoofstuk
- 2.3 Hoofstuk
-
3. Afdeling
- 3.1 Hoofstuk
- 3.2 Hoofstuk
- 3.3 Hoofstuk
- 4. Hoofstuk
Stap 3
As u die opsie wil gebruik om reeds verouderde blaaierwysigings te ondersteun, moet 'n ekstra lyn bygevoeg word aan die stylbeskrywingsblok (onmiddellik daarna) (u hoef nie 'n opmerking te voeg nie):
/ * vir ouer IE-blaaiers * /
liggaam {gedrag: url ("csshover.htc");}
Stap 4
Skep dan 'n aparte bladsy waarvan die inhoud hieronder getoon word.
venster. CSSHover = (funksie () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | aktief | fokus)) / i; var n = / (. *?):(hover | aktief | fokus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * aan (hover | aktief | fokus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, lys: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {retourneer this.list [(this.index ++)% hierdie. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , terugbels: {}, init: funksie () {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.imports) {try {var b = a. invoer; var l = b.length; vir (var i = 0; i <l; i ++) {this.parseStylesheet (a.import )}} vang (securityException) {} } probeer {var c = a. reëls; var r = c.length; vir (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.vervanging (o, 'op $ 1'); var g = c.vervanging (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 + ': expression (CSSHover (hierdie, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = waar} b.addRule (g, d)} }, pleister: funksie (a, b, c, d) {probeer {var f = a.parentNode.currentStyle [d]; a.style [d] = f} vang (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.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 = {}} vang (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; hierdie.t ype = b; var d = nuwe RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = funksie () {a.className + = '' + c}; this.deactivator = funksie () {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 }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); return function (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} anders {w.init ()}}}) ();
Stap 5
Hierdie bladsy moet met die naam csshover.htc gestoor word en op dieselfde plek as die hoofblad geplaas word.
