Een menu met uitklapbare submenusecties wordt gebruikt in de lay-out van de site om de structuur van secties en subsecties duidelijker weer te geven, terwijl er paginaruimte wordt bespaard. Het is niet zo moeilijk om zo'n mechanisme te implementeren: een van de implementatievoorbeelden wordt in het artikel gegeven.
instructies:
Stap 1
Hieronder vindt u de volledige broncode van de pagina. Beschrijvingen van stijlen worden direct in de tekst van de pagina geplaatst. Noch de html, noch de css van deze variant van de menu-implementatie bevat complexe constructies die nadere uitleg behoeven.
Stap 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Eenvoudig vervolgkeuzemenu met subsecties
* {
font-familie: arial;
lettergrootte: 16px;
}
/ * voor oudere IE-browsers * /
lichaam {gedrag: url ("csshover.htc");}
ul, li, een {
weergave: blok;
marge: 0;
opvulling: 0;
grens: 0;
}
ul {
breedte: 150px;
rand: 1px massief zilver;
achtergrond: wit;
lijststijl: geen;
}
ik {
positie: relatief;
opvulling: 1px;
achtergrondkleur: zilver;
z-index: 9;
}
li.folder {achtergrondkleur: zilver;}
li.map ul {
positie: absoluut;
links: 111px; / * Alleen IE * /
boven: 5px;
}
li.folder> ul {links: 140px;} / * voor anderen * /
een {
opvulling: 2px;
rand: 1px effen wit;
tekstdecoratie: geen;
de kleur zwart;
lettergewicht: vet;
breedte: 100%; / * voor IE * /
}
li> a {breedte: auto;} / * voor anderen * /
ik ben {
weergave: blok;
breedte: 140px;
}
li a.submenu {
achtergrondkleur: geel;
}
/ * Hoofdstukken * /
een: zweef {
randkleur: grijs;
achtergrondkleur: rood;
de kleur zwart;
}
li.map a: zweef {
achtergrondkleur: rood;
}
/ * Secties * /
li.folder: zweef {z-index: 10;}
ul ul, li: zweef ul ul {display: geen;}
li: zweef ul, li: zweef li: zweef ul {display: block;}
- 1. Hoofdstuk
-
2. Sectie
- 2.1 Hoofdstuk
-
2.2 Sectie
- 2.2.1 Hoofdstuk
- 2.2.2 Hoofdstuk
- 2.2.3 Hoofdstuk
- 2.3 Hoofdstuk
-
3. Sectie
- 3.1 Hoofdstuk
- 3.2 Hoofdstuk
- 3.3 Hoofdstuk
- 4. Hoofdstuk
Stap 3
Als u de optie wilt gebruiken om reeds verouderde browseraanpassingen te ondersteunen, dan moet een extra regel worden toegevoegd aan het stijlbeschrijvingsblok (onmiddellijk daarna) (u hoeft geen commentaar toe te voegen):
/ * voor oudere IE-browsers * /
lichaam {gedrag: url ("csshover.htc");}
Stap 4
Maak dan een aparte pagina aan, waarvan de inhoud hieronder wordt weergegeven.
window. CSSHover = (functie () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | actief | focus)) / i; var n = / (. *?):(hover | actief | focus) / i; var o = / [^:] +: ([az / -] * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * op (hover | active | focus)) / 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. lijst.lengte] }}; var v = functie (c) {return c.replace (/-(.)/ mg, functie (a, b) {return b.toUpperCase ()})}; var w = {elementen: , callbacks: {}, 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.imports) {try {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } probeer {var c = a. regels; var r = c.length; for (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.replace (o, 'op $ 1'); var g = c.replace (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 (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: function (a, b, c, d) {probeer {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 = nieuw 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 = {}} catch (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, onactive: {activator: 'onmousedown', deactivator:' onmouseup '}, onfocus: {activator:' onfocus', deactivator: 'onblur'}}, functie CSSHoverElement (a, b, c) {this.node = a; dit.t ype = b; var d = nieuwe RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.className + = '' + c}; this.deactivator = function () {a.className = a.className.replace (d, '')}; a.attachEvent (x .activator, deze.activator); a.attachEvent (x .deactivator, deze.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 functie (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Stap 5
Deze pagina moet worden opgeslagen met de naam csshover.htc en op dezelfde plaats worden geplaatst als de hoofdpagina.
