Bölmə və alt hissələrin quruluşunu daha aydın şəkildə təqdim etmək üçün səhifə məkanına qənaət etmək üçün sayt tərtibatında açılır alt menyu bölmələri olan bir menyu istifadə olunur. Belə bir mexanizmi tətbiq etmək o qədər də çətin deyil: tətbiqetmə nümunələrindən biri məqalədə verilmişdir.
Təlimat
Addım 1
Aşağıda səhifənin tam mənbə kodu verilmişdir. Üslubların təsvirləri birbaşa səhifənin mətnində yerləşdirilir. Menyu tətbiqetməsinin bu variantının nə html-də, nə də css-də ətraflı izahat tələb edən hər hansı bir kompleks konstruksiya mövcud deyil.
Addım 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitions // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Alt hissələrlə sadə açılan menyu
* {
font-family: arial;
şrift ölçüsü: 16px;
}
/ * köhnə IE brauzerləri üçün * /
bədən {davranış: url ("csshover.htc");}
ul, li, a {
ekran: blok;
margin: 0;
dolgu: 0;
sərhəd: 0;
}
ul {
genişlik: 150px;
sərhəd: 1px möhkəm gümüş;
fon: ağ;
siyahı tərzi: yox;
}
li {
mövqe: nisbi;
dolgu: 1px;
arxa rəng: gümüş;
z-indeks: 9;
}
li.folder {background-color: silver;}
li.folder ul {
mövqe: mütləq;
solda: 111 piksel; / * Yalnız IE * /
üst: 5 piksel;
}
li.folder> ul {left: 140px;} / * başqaları üçün * /
a {
dolgu: 2px;
haşiyə: 1px qatı ağ;
mətn bəzəyi: yox;
rəng: Qara;
şrift ağırlığı: qalın;
genişlik: 100%; / * IE üçün * /
}
li> a {width: auto;} / * başqaları üçün * /
li a {
ekran: blok;
eni: 140px;
}
li a.submenu {
arxa rəng: sarı;
}
/ * Fəsillər * /
a: hover {
haşiyə rəngi: boz;
fon rəngi: qırmızı;
rəng: qara;
}
li.qovluq a: hover {
fon rəngi: qırmızı;
}
/ * Bölmələr * /
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. Fəsil
-
2. Bölmə
- 2.1 Fəsil
-
2.2 Bölmə
- 2.2.1 Fəsil
- 2.2.2 Fəsil
- 2.2.3 Fəsil
- 2.3 Fəsil
-
3. Bölmə
- 3.1 Fəsil
- 3.2 Fəsil
- 3.3 Fəsil
- 4. Fəsil
Addım 3
Seçimi onsuz da köhnəlmiş brauzer dəyişikliklərini dəstəkləmək istəyirsinizsə, üslub təsviri blokuna əlavə bir sətir əlavə olunmalıdır (dərhal sonra) (şərh əlavə etmək lazım deyil):
/ * köhnə IE brauzerləri üçün * /
bədən {davranış: url ("csshover.htc");}
Addım 4
Sonra məzmunu aşağıda göstərilən ayrı bir səhifə yaradın.
window. 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: , geri çağırmalar: {}, 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. idxal; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } cəhd edin {var c = a. qaydaları; var r = c.length; 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. dəyişdirin (o, 'on $ 1'); var g = c.lace (p, '. $ 2' + f); var h = q.exec (g) [1]; var i = e + h; əgər (! This.callbacks ) {var j = u.get (); var k = v (j); b.addRule (e, j + ': ifadə (CSSHover (bu, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, yamaq: function (a, b, c, d) {cəhd edin {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)} qayıt b}, boşaltma: 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', deactivator: 'onmouseleave'}, aktiv: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; bu.t ype = b; var d = yeni 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 = {boşaltma: function () {this.node.detachEvent (x [this.type]. aktivator, 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)} başqa {w.init ()}}}) ();
Addım 5
Bu səhifə csshover.htc adı ilə qeyd olunmalı və əsas səhifə ilə eyni yerdə yerləşdirilməlidir.
