Хуудасны зайг хэмнэхийн зэрэгцээ хэсэг, дэд хэсгүүдийн бүтцийг илүү нарийвчлан харуулахын тулд сайтын зохион байгуулалтанд унах дэд цэс бүхий цэсийг ашигладаг. Ийм механизмыг хэрэгжүүлэх нь тийм ч хэцүү биш юм: хэрэгжүүлэх жишээнүүдийн нэгийг өгүүлэлд өгөв.
Зааварчилгаа
1-р алхам
Доорх хуудсын бүрэн эх код байна. Загварын тодорхойлолтыг хуудасны текстэнд шууд байрлуулсан болно. Цэсийн хэрэгжилтийн энэ хувилбарын html эсвэл css хоёуланд нь дэлгэрэнгүй тайлбар шаардсан нарийн төвөгтэй бүтэц байдаггүй.
Алхам 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Дэд хэсгүүд бүхий энгийн унах цэс
* {
фонт-гэр бүл: arial;
үсгийн хэмжээ: 16px;
}
/ * хуучин IE хөтчүүдэд зориулсан * /
body {behavior: url ("csshover.htc");}
ul, li, a {
дэлгэц: блок;
маржин: 0;
дүүргэлт: 0;
хил: 0;
}
ul {
өргөн: 150px;
хил: 1px хатуу мөнгө;
дэвсгэр: цагаан;
жагсаалтын хэв маяг: байхгүй;
}
li {
албан тушаал: харьцангуй;
дүүргэлт: 1px;
дэвсгэр өнгө: мөнгө;
z-индекс: 9;
}
li.folder {background-color: silver;}
li.folder ul {
албан тушаал: туйлын;
зүүн: 111px; / * Зөвхөн IE * /
дээд: 5px;
}
li.folder> ul {зүүн: 140px;} / * бусад хүмүүст * /
а {
дүүргэлт: 2px;
хил: 1px хатуу цагаан;
текст чимэглэл: байхгүй;
өнгө: Хар;
үсгийн жин: тод;
өргөн: 100%; / * IE * /
}
li> a {width: auto;} / * бусдад * /
li a {
дэлгэц: блок;
өргөн: 140px;
}
li a.submenu {
дэвсгэр өнгө: шар;
}
/ * Бүлгүүд * /
a: hover {
хилийн өнгө: саарал;
дэвсгэр өнгө: улаан;
өнгө: хар;
}
li. хавтас a: hover {
дэвсгэр өнгө: улаан;
}
/ * Хэсэг * /
li.folder: hover {z-index: 10;}
ul ul, li: hover ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Бүлэг
-
2. Хэсэг
- 2.1 Бүлэг
-
2.2 Хэсэг
- 2.2.1 Бүлэг
- 2.2.2 Бүлэг
- 2.2.3 Бүлэг
- 2.3 Бүлэг
-
3. Хэсэг
- 3.1 Бүлэг
- 3.2 Бүлэг
- 3.3 Бүлэг
- 4. Бүлэг
Алхам 3
Хэрэв та аль хэдийн хуучирсан браузерын өөрчлөлтийг дэмжих сонголтыг ашиглахыг хүсвэл хэв маягийн тодорхойлолтын блок дээр нэмэлт мөр нэмж оруулах хэрэгтэй (дараа нь тайлбар оруулах шаардлагагүй):
/ * хуучин IE хөтчүүдэд зориулсан * /
байгууллага {зан байдал: url ("csshover.htc");}
Алхам 4
Дараа нь тусдаа хуудас үүсгэж, агуулгыг нь доор харуулав.
цонх. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | active | focus)) / i; var n = / (. *?):(hover | active | focus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (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. list.length]}}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements): , буцах дуудлага: {}, 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. импорт; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } туршиж үзээрэй {var c = a. дүрмүүд; var r = c. урт; 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. орлуулах (o, 'on $ 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 + ': илэрхийлэл (CSSHover (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, нөхөөс: 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)} буцах b}, буулгах: function () {try {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} барих (e) {}}}; var x = {onhover: {activator: 'onmouseenter', deactivator: 'onmouseleave'}, идэвхгүй: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; энэ.т ype = b; var d = шинэ 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 = {буулгах: 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)} else {w.init ()}}}) ();
Алхам 5
Энэ хуудсыг csshover.htc нэртэй хадгалж, үндсэн хуудастай ижил газарт байрлуулах хэрэгтэй.
