Saitide paigutuses kasutatakse rippmenüüdega alammenüü jaotistega menüüd, et jaotiste ja alamjaotiste struktuuri selgemini esitada, säästes samal ajal leheruumi. Sellise mehhanismi rakendamine pole nii keeruline: üks rakendamise näidetest on toodud artiklis.
Juhised
Samm 1
Allpool on lehe täielik lähtekood. Stiilide kirjeldused paigutatakse otse lehe teksti. Menüü juurutamise selle variandi HTML ega css ei sisalda keerukaid konstruktsioone, mis vajaksid üksikasjalikku selgitust.
2. samm
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // ET"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Lihtne rippmenüü koos alajaotistega
* {
font-family: arial;
fondi suurus: 16px;
}
/ * vanematele IE brauseritele * /
body {käitumine: url ("csshover.htc");}
ul, li, a {
kuva: plokk;
varu: 0;
polster: 0;
piir: 0;
}
ul {
laius: 150px;
ääris: 1px tahke hõbe;
taust: valge;
list-style: puudub;
}
li {
positsioon: sugulane;
polster: 1px;
taustavärv: hõbe;
z-indeks: 9;
}
li.folder {taustavärv: hõbe;}
li.folder ul {
positsioon: absoluutne;
vasakul: 111 pikslit; / * Ainult IE * /
ülemine: 5px;
}
li.folder> ul {vasakule: 140px;} / * teistele * /
a {
polster: 2px;
ääris: 1px tahke valge;
teksti kaunistamine: puudub;
värv: must;
fondi kaal: paks;
laius: 100%; / * IE jaoks * /
}
li> a {laius: auto;} / * teistele * /
li a {
kuva: plokk;
laius: 140px;
}
li a.submenu {
taustavärv: kollane;
}
/ * Peatükid * /
a: hõljutage {
äärisvärv: hall;
taustavärv: punane;
värv: must;
}
li.folder a: hõljutage {
taustavärv: punane;
}
/ * Jaotised * /
li.folder: hõljutage kursorit {z-index: 10;}
ul ul, li: hõljutage ul ul {display: none;}
li: hõljutage ul, li: hõljutage li: hõljutage ul {kuva: blokeerige;}
- 1. Peatükk
-
2. Jagu
- 2.1 Peatükk
-
2.2 Jaotis
- 2.2.1 Peatükk
- 2.2.2 Peatükk
- 2.2.3 Peatükk
- 2.3 Peatükk
-
3. Sektsioon
- 3.1 Peatükk
- 3.2 Peatükk
- 3.3 Peatükk
- 4. Peatükk
3. samm
Kui soovite kasutada suvandit juba aegunud brauseri muudatuste toetamiseks, tuleks stiilikirjelduse plokki lisada (kohe pärast seda) täiendav rida (te ei pea kommentaari lisama):
/ * vanematele IE brauseritele * /
body {käitumine: url ("csshover.htc");}
4. samm
Seejärel looge eraldi leht, mille sisu on näidatud allpool.
aken. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hõljuk | aktiivne | fookus)) / i; var n = / (. *?):(hõljuk | aktiivne | fookus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * sees (hõljutage | aktiivne | fookus)] / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {register: 0, loend: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {return this.list [(this.index ++)% see. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elemendid: , tagasihelistused: {}, init: function () {if (! s.test (navigaator.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.import) {proovige {var b = a. import; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.import )}} saak (securityException) {} } proovige {var c = a. reegleid; var r = c. pikkus; 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. asendus (o, '1 dollaril'); var g = c. asendus (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; if (! See. Tagasi kutsub ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': avaldis (CSSHover (see, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.tagasitulemused = true} b.addRule (g, d)} }, plaaster: funktsioon (a, b, c, d) {proovige {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 = uus 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', deaktivaator: 'onmouseleave'}, onaktiivne: {activator: 'onmousedown', deaktiveerija: 'onmouseup'}, onfocus: {activator: 'onfocus', deaktivaator: 'onblur'}}; funktsioon CSSHoverElement (a, b, c) {this.node = a; see.t ype = b; var d = uus RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.klassinimi + = '' + c}; see.deaktiveerija = funktsioon () {a.klassinimi = a.klassinimi.asenda (d, '')}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {tühjendus: funktsioon () {this.node.detachEvent (x [this.type] aktivaator, this.activator); this.node.detachEvent (x [this.type].deaktivaator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); return-funktsioon (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
5. samm
See leht tuleks salvestada nimega csshover.htc ja asetada pealehega samasse kohta.
