เมนูที่มีส่วนเมนูย่อยแบบเลื่อนลงถูกใช้ในเลย์เอาต์ของไซต์เพื่อให้แสดงโครงสร้างของส่วนและส่วนย่อยได้ชัดเจนยิ่งขึ้น ในขณะที่ประหยัดพื้นที่ของหน้า การใช้งานกลไกดังกล่าวไม่ใช่เรื่องยาก: หนึ่งในตัวอย่างการใช้งานมีอยู่ในบทความ
คำแนะนำ
ขั้นตอนที่ 1
ด้านล่างนี้คือซอร์สโค้ดที่สมบูรณ์ของหน้า คำอธิบายของสไตล์จะถูกวางไว้โดยตรงในข้อความของหน้า ทั้ง html และ css ของการใช้งานเมนูนี้ไม่มีโครงสร้างที่ซับซ้อนซึ่งต้องการคำอธิบายโดยละเอียด
ขั้นตอนที่ 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
เมนูแบบเลื่อนลงอย่างง่ายพร้อมส่วนย่อย
* {
ตระกูลแบบอักษร: arial;
ขนาดตัวอักษร: 16px;
}
/ * สำหรับเบราว์เซอร์ IE รุ่นเก่า * /
เนื้อหา {พฤติกรรม: url ("csshover.htc");}
ul, li, {
แสดง: บล็อก;
ระยะขอบ: 0;
ช่องว่างภายใน: 0;
เส้นขอบ: 0;
}
ul {
ความกว้าง: 150px;
เส้นขอบ: เงินแข็ง 1px;
พื้นหลัง: สีขาว;
รายการสไตล์: none;
}
ลี่ {
ตำแหน่ง: ญาติ;
ช่องว่างภายใน: 1px;
พื้นหลังสี: เงิน;
ดัชนี z: 9;
}
li.folder {สีพื้นหลัง: เงิน;}
li.folder ul {
ตำแหน่ง: สัมบูรณ์;
ซ้าย: 111px; / * IE เท่านั้น * /
ด้านบน: 5px;
}
li.folder> ul {left: 140px;} / * สำหรับคนอื่น ๆ * /
ก {
ช่องว่างภายใน: 2px;
เส้นขอบ: 1px สีขาวทึบ;
ตกแต่งข้อความ: ไม่มี;
สีดำ;
font-weight: ตัวหนา;
ความกว้าง: 100%; / * สำหรับ IE * /
}
li> a {width: auto;} / * สำหรับผู้อื่น * /
หลี่ {
แสดง: บล็อก;
ความกว้าง: 140px;
}
li a.submenu {
พื้นหลังสี: สีเหลือง;
}
/ * บท * /
เป็น: โฮเวอร์ {
ขอบสี: สีเทา;
พื้นหลังสี: สีแดง;
สีดำ;
}
li.folder a: โฮเวอร์ {
พื้นหลังสี: สีแดง;
}
/ * ส่วน * /
li.folder: โฮเวอร์ {z-index: 10;}
ul ul, li: เลื่อน ul ul {แสดง: none;}
li: โฮเวอร์ ul, li: โฮเวอร์ li: โฮเวอร์ ul {แสดง: บล็อก;}
- 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 รุ่นเก่า * /
เนื้อหา {พฤติกรรม: url ("csshover.htc");}
ขั้นตอนที่ 4
จากนั้นสร้างหน้าแยกต่างหากซึ่งมีเนื้อหาแสดงอยู่ด้านล่าง
window. CSSHover = (ฟังก์ชัน () {var m = / (^ | / s) ((([^ a] ([^] +)?) | (a ([^ #.] [^] +) +)):(hover | ใช้งาน | โฟกัส)) / i; var n = / (. *?):(hover | active | focus) / i; var o = / [^:] +: ([az / -] +). * / i; var p = / (. ([a-z0-9 _ / -] +): [az] +) | (: [az] +) / gi; var q = / \. ([a-z0-9 _ / -] * เปิด (โฮเวอร์ | ใช้งานอยู่ | โฟกัส)) / i; var s = / msie (5 | 6 | 7) / i; var t = / backcompat / i; var u = {ดัชนี: 0, รายการ: ['text-kashida', 'text-kashida-space', 'text-justify'], รับ: ฟังก์ชั่น () {ส่งคืน this.list [(this.index ++)% this. list.length] }}; var v = function (c) {return c.replace (/-(.)/ mg, function (a, b) {return b.toUpperCase ()})}; var w = {องค์ประกอบ: , การเรียกกลับ: {}, 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) {ลอง {var b = a. imports; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } ลอง {var c = a. กฎ; var r = c.length; สำหรับ (var j = 0; j <r; j ++) {this.parseCSSRule (c [j], a)}} ca tch (someException) {}}, parseCSSRule: ฟังก์ชั่น (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.addRule (e, j + ': expression (CSSHover (นี่, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} } แพทช์: ฟังก์ชั่น (a, b, c, d) {ลอง {var f = a.parentNode.currentStyle [d]; a.style [d] = f} จับ (e) {a.runtimeStyle [d] = ''} if (! a.csshover) {a.csshover = } if (! a.csshover [c]) {a.csshover [c] = true; var g = CSSHoverElement ใหม่ (a, b, c); this.elements.push (g)} return b}, unload: function () {ลอง {var l = this.elements.length; สำหรับ (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'}}; ฟังก์ชั่น CSSHoverElement (a, b, c) {this.node = a; this.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 [) b].activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {unload: function () {this.node.detachEvent (x [this.type]. ตัวกระตุ้น, 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)} อื่น {w.init ()}}}) ();
ขั้นตอนที่ 5
หน้านี้ควรถูกบันทึกด้วยชื่อ csshover.htc และวางไว้ในตำแหน่งเดียวกับหน้าหลัก