Menu dengan bahagian submenu lungsur digunakan dalam susun atur laman web untuk memperlihatkan struktur bahagian dan bahagian dengan lebih jelas, sambil menjimatkan ruang halaman. Tidak begitu sukar untuk menerapkan mekanisme seperti itu: salah satu contoh pelaksanaan diberikan dalam artikel.
Arahan
Langkah 1
Berikut adalah kod sumber halaman yang lengkap. Huraian gaya diletakkan secara langsung dalam teks halaman. Baik html maupun css varian pelaksanaan menu ini tidak mengandungi konstruksi kompleks yang memerlukan penjelasan terperinci.
Langkah 2
<! DOCTYPE html AWAM "- // W3C // DTD XHTML 1.0 Peralihan // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu lungsur sederhana dengan subseksyen
* {
font-keluarga: arial;
saiz fon: 16px;
}
/ * untuk penyemak imbas IE yang lebih lama * /
body {behavior: url ("csshover.htc");}
ul, li, seorang {
paparan: blok;
margin: 0;
pembalut: 0;
sempadan: 0;
}
ul {
lebar: 150px;
sempadan: perak padu 1px;
latar belakang: putih;
gaya senarai: tiada;
}
li {
kedudukan: saudara;
pembalut: 1px;
warna latar: perak;
z-index: 9;
}
li.folder {latar belakang-warna: perak;}
li.folder ul {
kedudukan: mutlak;
kiri: 111px; / * IE sahaja * /
bahagian atas: 5px;
}
li.folder> ul {kiri: 140 piksel;} / * untuk orang lain * /
sebuah {
pembalut: 2px;
sempadan: 1 px putih pepejal;
hiasan teks: tiada;
warna: Hitam;
font-weight: tebal;
lebar: 100%; / * untuk IE * /
}
li> a {width: auto;} / * untuk orang lain * /
li a {
paparan: blok;
lebar: 140px;
}
li a.submenu {
warna latar: kuning;
}
/ * Bab * /
a: berlegar {
warna sempadan: kelabu;
warna latar: merah;
warna: hitam;
}
li.folder a: hover {
warna latar: merah;
}
/ * Bahagian * /
li.folder: arahkan {z-index: 10;}
ul ul, li: arahkan ul ul {display: none;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1. Bab
-
2. Bahagian
- 2.1 Bab
-
2.2 Bahagian
- 2.2.1 Bab
- 2.2.2 Bab
- 2.2.3 Bab
- 2.3 Bab
-
3. Bahagian
- 3.1 Bab
- 3.2 Bab
- 3.3 Bab
- 4. Bab
Langkah 3
Sekiranya anda ingin menggunakan pilihan untuk menyokong pengubahsuaian penyemak imbas yang sudah usang, maka baris tambahan harus ditambahkan ke blok keterangan gaya (segera selepas itu) (anda tidak perlu menambahkan komen):
/ * untuk penyemak imbas IE yang lebih lama * /
body {behavior: url ("csshover.htc");}
Langkah 4
Kemudian buat halaman yang berasingan, kandungannya ditunjukkan di bawah.
window. CSSHover = (fungsi () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | aktif | fokus)) / i; var n = / (. *?):(hover | aktif | fokus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * on (arahkan | aktif | fokus)) / 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 ++)% ini. list.length]}}; var v = fungsi (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {elemen: , panggilan balik: {}, 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) {cuba {var b = a. import; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} tangkapan (securityException) {} } cuba {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, '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.add Peraturan (e, j + ': ungkapan (CSSHover (ini, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, tampalan: fungsi (a, b, c, d) {cuba {var f = a.parentNode.currentStyle [d]; a.style [d] = f} tangkapan (e) {a.runtimeStyle [d] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = CSSHoverElement baru (a, b, c); this.elements.push (g)} return b}, unload: function () {cuba {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'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; fungsi CSSHoverElement (a, b, c) {this.node = a; ini.t ype = b; var d = RegExp baru ('(^ | / 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 [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null }}; window.attachEvent ('onbeforeunload', function () {w.unload ()}); fungsi kembali (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} lain {w.init ()}}}) ();
Langkah 5
Halaman ini harus disimpan dengan nama csshover.htc dan diletakkan di tempat yang sama dengan halaman utama.
