Беттер кеңістігін сақтай отырып, бөлімдер мен кіші бөлімдердің құрылымын нақтырақ көрсету үшін сайттың орналасуында ашылатын ішкі мәзір бөлімдері бар мәзір қолданылады. Мұндай механизмді енгізу соншалықты қиын емес: іске асыру мысалдарының бірі мақалада келтірілген.
Нұсқаулық
1-қадам
Төменде парақтың толық бастапқы коды көрсетілген. Стильдердің сипаттамалары парақтың мәтініне тікелей орналастырылады. Мәзірді іске асырудың осы нұсқасындағы html де, CSS-те де толық түсіндіруді қажет ететін күрделі құрылымдар жоқ.
2-қадам
<! DOCTYPE html PUBLIC «- // W3C // DTD XHTML 1.0 Өтпелі // EN»
«https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
Бөлімдері бар жай ашылмалы мәзір
* {
қаріп-отбасы: ариал;
қаріп өлшемі: 16px;
}
/ * ескі IE браузерлері үшін * /
body {behavior: url («csshover.htc»);}
ул, ли, а {
дисплей: блок;
маржа: 0;
төсеме: 0;
шекара: 0;
}
ул {
ені: 150px;
шекара: 1px қатты күміс;
фон: ақ;
тізім стилі: жоқ;
}
ли {
позиция: салыстырмалы;
төсеме: 1px;
өң-түс: күміс;
z-индексі: 9;
}
li.folder {өң-түс: күміс;}
li.folder ul {
позиция: абсолютті;
сол жақта: 111px; / * Тек ЖК * /
жоғарғы: 5px;
}
li.folder> ul {сол жақ: 140px;} / * басқалар үшін * /
a {
төсеме: 2px;
шекара: 1px ақ түсті;
мәтіндік безендіру: жоқ;
түс: қара;
қаріп салмағы: қалың;
ені: 100%; / * ЖК үшін * /
}
li> a {width: auto;} / * басқалар үшін * /
ли а {
дисплей: блок;
ені: 140px;
}
li a.submenu {
фон-түс: сары;
}
/ * Тараулар * /
а: апару {
жиек-түс: сұр;
фон-түс: қызыл;
түс: қара;
}
li.folder 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 браузерлері үшін * /
body {behavior: url («csshover.htc»);}
4-қадам
Содан кейін мазмұны төменде көрсетілген жеке парақ жасаңыз.
терезе. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(апару | белсенді | фокус)) / i; var n = / (. *?):(апару | белсенді | фокус) / 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 = {индекс: 0, тізім: ['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.ұзындық; 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, '$ 1' бойынша); var g = c. ауыстыру (p, '. $ 2' + f); var h = q.exec (g) [Var i = e + h; if (! This.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': өрнек (CSSHoverover (бұл, «'+ 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)} қайтару b}, түсіру: function () {көріңіз {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'}, белсенді емес: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; this.t ype = b; var d = жаңа RegExp ('(^ | / s)' + c + '(s | $)', 'g');
this.activator = function () {a.className + = '' + c}; this.deactivator = function () {a.className = a.className.lace (d, '')}; a.attachEvent (x .activator, this.activator); a.attachEvent (x .deactivator, this.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 function (a, b, c, d) {if (a) {return w.patch (a, b, c), d)} else {w.init ()}}}) ();
5-қадам
Бұл парақты csshover.htc атауымен сақтау керек және оны негізгі парақпен бірдей жерде орналастыру керек.
