Sayfa alanından tasarruf ederken, bölümlerin ve alt bölümlerin yapısını daha net bir şekilde sunmak için site düzeninde açılır alt menü bölümleri olan bir menü kullanılır. Böyle bir mekanizmayı uygulamak çok zor değil: makalede uygulama örneklerinden biri verilmiştir.
Talimatlar
Aşama 1
Aşağıda sayfanın tam kaynak kodu bulunmaktadır. Stillerin açıklamaları doğrudan sayfanın metnine yerleştirilir. Menü uygulamasının bu varyantının ne html'si ne de css'si, ayrıntılı açıklama gerektiren herhangi bir karmaşık yapı içermez.
Adım 2
<! DOCTYPE html KAMU "- // W3C // DTD XHTML 1.0 Geçiş // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Alt bölümler içeren basit açılır menü
* {
yazı tipi ailesi: arial;
yazı tipi boyutu: 16 piksel;
}
/ * eski IE tarayıcıları için * /
gövde {davranış: url ("csshover.htc");}
ul, li, bir {
Ekran bloğu;
kenar boşluğu: 0;
dolgu: 0;
sınır: 0;
}
ul {
genişlik: 150 piksel;
kenarlık: 1 piksel katı gümüş;
arka plan: beyaz;
liste stili: yok;
}
ben {
pozisyon: göreceli;
dolgu: 1 piksel;
arka plan rengi: gümüş;
z-endeksi: 9;
}
li.folder {arka plan rengi: gümüş;}
li.klasör ul {
pozisyon: mutlak;
sol: 111 piksel; / * Yalnızca IE * /
üst: 5 piksel;
}
li.folder> ul {sol: 140px;} / * diğerleri için * /
bir {
dolgu: 2 piksel;
kenarlık: 1 piksel düz beyaz;
metin-dekorasyon: yok;
siyah renk;
yazı tipi ağırlığı: kalın;
genişlik: %100; / * IE için * /
}
li> a {width: auto;} / * diğerleri için * /
li bir {
Ekran bloğu;
genişlik: 140 piksel;
}
li a.altmenü {
arka plan rengi: sarı;
}
/ * Bölümler * /
a: üzerine gelin {
sınır rengi: gri;
arka plan rengi: kırmızı;
siyah renk;
}
li.folder a: üzerine gelin {
arka plan rengi: kırmızı;
}
/ * Bölümler * /
li.folder: üzerine gelin {z-endeksi: 10;}
ul ul, li: hover ul ul {ekran: yok;}
li: vurgulu ul, li: vurgulu li: vurgulu ul {ekran: blok;}
- 1. Bölüm
-
2. Bölüm
- 2.1 Bölüm
-
2.2 Bölüm
- 2.2.1 Bölüm
- 2.2.2 Bölüm
- 2.2.3 Bölüm
- 2.3 Bölüm
-
3. Bölüm
- 3.1 Bölüm
- 3.2 Bölüm
- 3.3 Bölüm
- 4. Bölüm
Aşama 3
Halihazırda güncel olmayan tarayıcı değişikliklerini desteklemek için seçeneği kullanmak istiyorsanız, stil açıklama bloğuna (hemen sonra) ek bir satır eklenmelidir (bir yorum eklemeniz gerekmez):
/ * eski IE tarayıcıları için * /
gövde {davranış: url ("csshover.htc");}
4. Adım
Ardından, içeriği aşağıda gösterilen ayrı bir sayfa oluşturun.
window. CSSHover = (function () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(vurgulu | etkin | odak)) / i; var n = / (. *?):(vurgulu | etkin | odak) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * açık (hover | aktif | odak)) / i; var s = / msie (5 | 6 | 7) / i; var t = / geri uyumlu / i; var u = {index: 0, list: ['text-kashida', 'text-kashida-space', 'text-justify'], get: function () {bunu.listesini [(this.index ++)%) döndür. list.length] }}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elements: , geri aramalar: {}, 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. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } try {var c = a. Rules; 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.replace (o, '1 $'da'); 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 + ': ifade (CSSHover (bu, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, yama: 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)} dönüş b}, boşaltma: function () {dene {var l = this.elements.length; for (var i = 0; i <l; i ++) {this.elements .unload ()} this.elements =; this.callbacks = {}} catch (e) {}}}; var x = {onhover: {aktivatör: 'onmouseenter', deaktivatör: 'onmouseleave'}, onactive: {aktivatör: 'onmousedown', deaktivatör:' onmouseup '}, onfocus: {aktivatör:' onfocus', deaktivatör: 'onblur'}}; function CSSHoverElement (a, b, c) {this.node = a; bu.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 .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 [bu.tip].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null } }; window.attachEvent ('onbeforeunload', function () {w.unload ()}); dönüş işlevi (a, b, c, d) {if (a) {return w.patch (a, b, c), d)} başka {w.init ()}}}) ();
Adım 5
Bu sayfa csshover.htc ismiyle kaydedilmeli ve ana sayfa ile aynı yere yerleştirilmelidir.
