Menu dengan bagian submenu drop-down digunakan dalam tata letak situs untuk menyajikan struktur bagian dan subbagian dengan lebih jelas, sekaligus menghemat ruang halaman. Tidak begitu sulit untuk menerapkan mekanisme seperti itu: salah satu contoh implementasi diberikan dalam artikel.
instruksi
Langkah 1
Di bawah ini adalah kode sumber lengkap halaman. Deskripsi gaya ditempatkan langsung di teks halaman. Baik html maupun css dari varian implementasi menu ini tidak mengandung konstruksi kompleks yang memerlukan penjelasan rinci.
Langkah 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transisi // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu tarik-turun sederhana dengan subbagian
* {
font-family: arial;
ukuran font: 16px;
}
/ * untuk browser IE lama * /
tubuh {perilaku: url ("csshover.htc");}
ul, li, sebuah {
tampilan: blok;
margin: 0;
bantalan: 0;
batas: 0;
}
ul {
lebar: 150 piksel;
perbatasan: 1px perak padat;
latar belakang: putih;
gaya daftar: tidak ada;
}
aku {
posisi: relatif;
bantalan: 1 piksel;
warna latar belakang: perak;
indeks-z: 9;
}
li.folder {warna latar: perak;}
li.folder ul {
posisi: mutlak;
kiri: 111 piksel; / * IE saja * /
atas: 5 piksel;
}
li.folder> ul {kiri: 140px;} / * untuk yang lain * /
Sebuah {
bantalan: 2 piksel;
perbatasan: 1px putih solid;
dekorasi teks: tidak ada;
warna hitam;
font-berat: tebal;
lebar: 100%; / * untuk IE * /
}
li> a {width: auto;} / * untuk yang lain * /
aku {
tampilan: blok;
lebar: 140px;
}
li a.submenu {
warna latar: kuning;
}
/ * Bab * /
a: melayang {
warna batas: abu-abu;
warna latar: merah;
warna hitam;
}
li.folder a: arahkan {
warna latar: merah;
}
/ * Bagian * /
li.folder: arahkan {z-index: 10;}
ul ul, li: hover ul ul {tampilan: tidak ada;}
li: hover ul, li: hover li: hover ul {tampilan: blok;}
- 1. Bab
-
2. Bagian
- 2.1 Bab
-
2.2 Bagian
- 2.2.1 Bab
- 2.2.2 Bab
- 2.2.3 Bab
- 2.3 Bab
-
3. Bagian
- 3.1 Bab
- 3.2 Bab
- 3.3 Bab
- 4. Bab
Langkah 3
Jika Anda ingin menggunakan opsi untuk mendukung modifikasi browser yang sudah usang, maka baris tambahan harus ditambahkan ke blok deskripsi gaya (segera setelahnya) (Anda tidak perlu menambahkan komentar):
/ * untuk browser IE lama * /
tubuh {perilaku: url ("csshover.htc");}
Langkah 4
Kemudian buat halaman terpisah, yang isinya ditunjukkan di bawah ini.
window. CSSHover = (fungsi () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(arahkan kursor | aktif | fokus)) / i; var n = / (. *?):(arahkan kursor | 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 = {indeks: 0, daftar: ['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 = {elemen: , callback: {}, 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) {coba {var b = a.impor; 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, 'pada $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 + ': ekspresi (CSSHover (ini, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: function (a, b, c, d) {coba {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)} return b}, unload: function () {coba {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'}}; function CSSHoverElement (a, b, c) {this.node = a; ini.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 [this.type].deactivator, this.deactivator); this.activator = null; this.deactivator = null; this.node = null; this.type = null } }; window.attachEvent ('onbeforeunload', function () {w.unload ()}); mengembalikan fungsi (a, b, c, d) {if (a) {mengembalikan w.patch (a, b, c, d)} else {w.init()}}})() ();
Langkah 5
Halaman ini harus disimpan dengan nama csshover.htc dan ditempatkan di tempat yang sama dengan halaman utama.
