En meny med nedrullningsbara undermenyavsnitt används i webbplatslayouten för att tydligare presentera strukturen för avsnitt och underavsnitt, samtidigt som sidutrymmet sparas. Det är inte så svårt att implementera en sådan mekanism: ett av implementeringsexemplen ges i artikeln.
Instruktioner
Steg 1
Nedan är den fullständiga källkoden på sidan. Beskrivningar av stilar placeras direkt i texten på sidan. Varken html eller css för denna variant av menyimplementeringen innehåller några komplexa konstruktioner som kräver detaljerad förklaring.
Steg 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Enkel rullgardinsmeny med underavsnitt
* {
font-family: arial;
teckenstorlek: 16 pixlar;
}
/ * för äldre IE-webbläsare * /
body {beteende: url ("csshover.htc");}
ul, li, a {
display: blockera;
marginal: 0;
stoppning: 0;
gräns: 0;
}
ul {
bredd: 150px;
kant: 1px massivt silver;
bakgrund: vit;
liststil: ingen;
}
li {
position: relativ;
stoppning: 1px;
bakgrundsfärg: silver;
z-index: 9;
}
li.folder {bakgrundsfärg: silver;}
li.mapp ul {
position: absolut;
vänster: 111px; / * Endast IE * /
överst: 5px;
}
li.mapp> ul {vänster: 140px;} / * för andra * /
en {
stoppning: 2 pixlar;
kant: 1px fast vit;
text-dekoration: ingen;
svart färg;
font-vikt: fet;
bredd: 100%; / * för IE * /
}
li> a {bredd: auto;} / * för andra * /
li a {
display: blockera;
bredd: 140px;
}
li a.submenu {
bakgrundsfärg: gul;
}
/ * Kapitel * /
a: sväva {
kantfärg: grå;
bakgrundsfärg: röd;
svart färg;
}
li.mapp a: sväva {
bakgrundsfärg: röd;
}
/ * Avsnitt * /
li.mapp: sväva {z-index: 10;}
ul ul, li: sväva ul ul {display: none;}
li: sväva ul, li: sväva li: sväva ul {display: block;}
- 1. Kapitel
-
2. Avsnitt
- 2.1 Kapitel
-
2.2 Avsnitt
- 2.2.1 Kapitel
- 2.2.2 Kapitel
- 2.2.3 Kapitel
- 2.3 Kapitel
-
3. Avsnitt
- 3.1 Kapitel
- 3.2 Kapitel
- 3.3 Kapitel
- 4. Kapitel
Steg 3
Om du vill använda alternativet för att stödja redan föråldrade webbläsarändringar, ska en extra rad läggas till i stilbeskrivningsblocket (omedelbart efter) (du behöver inte lägga till en kommentar):
/ * för äldre IE-webbläsare * /
body {beteende: url ("csshover.htc");}
Steg 4
Skapa sedan en separat sida vars innehåll visas nedan.
window. CSSHover = (funktion () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(sväva | aktiv | fokus)) / i; var n = / (. *?):(sväva | aktiv | fokus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (svävar | aktiv | fokus)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {index: 0, lista: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index ++)% detta. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , återuppringningar: {}, init: funktion () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a.length; för (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.imports) {try {var b = a. importerar; var l = b.längd; för (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} fångst (securityException) {} } prova {var c = a. regler; var r = c.längd; för (var j = 0; j <r; j ++) {denna.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.placering (o, 'på $ 1'); var g = c.placering (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 (detta, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: function (a, b, c, d) {try {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 = 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 = {}} fångst (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; detta t ype = b; var d = ny 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]. aktivator, denna.aktivator); denna.nod.detachEvent (x [denna.typ].deaktivator, denna.deaktiverare); denna.aktivator = noll; denna.deaktivator = noll; denna.nod = null; denna.typ = null }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); returfunktion (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} annat {w.init ()}}} ();
Steg 5
Denna sida ska sparas med namnet csshover.htc och placeras på samma plats som huvudsidan.
