A legördülő almenü szakaszokat tartalmazó menüt használjuk a webhely elrendezésében annak érdekében, hogy világosabbá tegyük a szakaszok és alszakaszok felépítését, miközben helyet takarítunk meg. Egy ilyen mechanizmus megvalósítása nem is olyan nehéz: az egyik megvalósítási példát a cikk tartalmazza.
Utasítás
1. lépés
Az alábbiakban az oldal teljes forráskódja található. A stílusleírások közvetlenül az oldal szövegébe kerülnek. Sem a html, sem a css nem tartalmaz ilyen összetett konstrukciókat, amelyek részletes magyarázatot igényelnek.
2. lépés
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Egyszerű legördülő menü alszakaszokkal
* {
font-family: arial;
betűméret: 16px;
}
/ * régebbi IE böngészőkhöz * /
body {viselkedés: url ("csshover.htc");}
ul, li, a {
kijelző: blokk;
margó: 0;
párnázás: 0;
határ: 0;
}
ul {
szélesség: 150px;
szegély: 1px szilárd ezüst;
háttér: fehér;
list-style: nincs;
}
li {
pozíció: rokon;
párnázás: 1px;
háttérszín: ezüst;
z-index: 9;
}
li.folder {háttérszín: ezüst;}
li.folder ul {
pozíció: abszolút;
balra: 111px; / * Csak IE * /
felső: 5px;
}
li.folder> ul {balra: 140px;} / * másoknak * /
a {
párnázás: 2px;
szegély: 1px egyszínű fehér;
szövegdíszítés: nincs;
fekete szín;
betű súlya: félkövér;
szélesség: 100%; / * IE esetén * /
}
li> a {width: auto;} / * másoknak * /
li a {
kijelző: blokk;
szélesség: 140px;
}
li a.submenu {
háttérszín: sárga;
}
/ * Fejezetek * /
a: lebeg {
szegélyszíne: szürke;
háttérszín: piros;
fekete szín;
}
li.folder a: lebeg {
háttérszín: piros;
}
/ * Szakaszok * /
li.folder: lebegés {z-index: 10;}
ul ul, li: lebegés ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. fejezet
-
2. Szakasz
- 2.1 fejezet
-
2.2 szakasz
- 2.2.1 fejezet
- 2.2.2 fejezet
- 2.2.3 fejezet
- 2.3 fejezet
-
3. Szakasz
- 3.1 fejezet
- 3.2 Fejezet
- 3.3 Fejezet
- 4. Fejezet
3. lépés
Ha a már elavult böngésző-módosítások támogatására használja az opciót, akkor egy további sort kell hozzáadni a stílusleíró blokkhoz (közvetlenül utána) (nem kell megjegyzést fűznie):
/ * régebbi IE böngészőkhöz * /
body {viselkedés: url ("csshover.htc");}
4. lépés
Ezután hozzon létre egy külön oldalt, amelynek tartalma az alábbiakban látható.
ablak. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(lebeg | aktív | fókusz)) / i; var n = / (. *?):(lebeg | aktív | fókusz) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * be (lebegés | aktív | fókusz)] / 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 ++)% this. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elemek: , visszahívások: {}, init: function () {if (! s.test (navigator.userAgent) &&! t.test (window.document.compatMode)) {return} var a = window.document.styleSheets, l = a.hossz; for (var i = 0; i <l; i ++) {this.parseStylesheet (a )}}, parseStylesheet: function (a) {if (a.importál) {try {var b = a. import; var l = b.hossz; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.import )}} catch (securityException) {} } próbáld ki {var c = a. szabályokat; var r = c.hossz; 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.helyettesítse (o, '$ 1-n'); var g = c.helyettesítse (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; ha (! Ez visszahívja ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': kifejezés (CSSHover (ez, "'+ f +'", "'+ h +'", "'+ k +'")) '); ez.visszahívások = true} b.addRule (g, d)} }, patch: function (a, b, c, d) {próbálkozzon {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 = új 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', deaktivátor: 'onmouseleave'}, inaktív: {activator: 'onmousedown', deaktivátor: 'onmouseup'}, onfocus: {activator: 'onfocus', deaktivátor: 'onblur'}}; CSSHoverElement (a, b, c) {this.node = a; ezt.t ype = b; var d = new RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.className + = '' + c}; this.deactivator = function () {a.className = a.className.replace (d, '')}; a.attachEvent (x .aktivátor, ez.aktivátor); a.attachEvent (x .deaktivátor, ez.deaktivátor)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type]. aktivátor, this.aktivátor); 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 függvény (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
5. lépés
Ezt az oldalt a csshover.htc néven kell elmenteni, és ugyanarra a helyre kell helyezni, mint a főoldalt.
