Một menu với các phần menu con thả xuống được sử dụng trong bố cục trang web để trình bày rõ ràng hơn cấu trúc của các phần và tiểu mục, đồng thời tiết kiệm không gian trang. Không quá khó để thực hiện một cơ chế như vậy: một trong những ví dụ thực hiện được đưa ra trong bài báo.
Hướng dẫn
Bước 1
Dưới đây là mã nguồn hoàn chỉnh của trang. Mô tả kiểu được đặt trực tiếp trong văn bản của trang. Cả html và css của biến thể triển khai menu này đều không chứa bất kỳ cấu trúc phức tạp nào yêu cầu giải thích chi tiết.
Bước 2
<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Chuyển tiếp // EN"
"https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Menu thả xuống đơn giản với các tiểu mục
* {
font-family: arial;
font-size: 16px;
}
/ * cho các trình duyệt IE cũ hơn * /
nội dung {hành vi: url ("csshover.htc");}
ul, li, a {
hiển thị: khối;
lề: 0;
đệm: 0;
viền: 0;
}
ul {
chiều rộng: 150px;
viền: bạc đặc 1px;
nền: trắng;
list-style: none;
}
li {
chức vụ: thân nhân;
đệm: 1px;
màu nền: bạc;
chỉ số z: 9;
}
li.folder {background-color: silver;}
li.folder ul {
vị trí: tuyệt đối;
trái: 111px; / * Chỉ IE * /
đầu trang: 5px;
}
li.folder> ul {left: 140px;} / * cho những người khác * /
một {
đệm: 2px;
viền: trắng đặc 1px;
văn bản-trang trí: không có;
màu đen;
font-weight: bold;
chiều rộng: 100%; / * cho IE * /
}
li> a {width: auto;} / * cho những người khác * /
li a {
hiển thị: khối;
chiều rộng: 140px;
}
li a.submenu {
background-color: màu vàng;
}
/ * Chương * /
a: di chuột {
viền-màu: xám;
background-color: đỏ;
màu đen;
}
li.folder a: hover {
background-color: đỏ;
}
/ * Phần * /
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. Chương
-
2. Phần
- 2.1 Chương
-
2.2 Phần
- 2.2.1 Chương
- 2.2.2 Chương
- 2.2.3 Chương
- 2.3 Chương
-
3. Phần
- 3.1 Chương
- 3.2 Chương
- 3.3 Chương
- 4. Chương
Bước 3
Nếu bạn muốn sử dụng tùy chọn để hỗ trợ các sửa đổi trình duyệt đã lỗi thời, thì một dòng bổ sung sẽ được thêm vào khối mô tả kiểu (ngay sau đó) (bạn không cần thêm nhận xét):
/ * cho các trình duyệt IE cũ hơn * /
nội dung {hành vi: url ("csshover.htc");}
Bước 4
Sau đó, tạo một trang riêng biệt, nội dung được hiển thị bên dưới.
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 = {phần tử: , callbacks: {}, 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. import; var l = b.length; for (var i = 0; i <l; i ++) {this.parseStylesheet (a.imports )}} catch (securityException) {} } thử {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, 'trên $ 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 (this, "'+ f +'", "'+ h +'", "'+ k +'")) '); this.callbacks = true} b.addRule (g, d)} }, patch: 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)} return b}, dỡ bỏ: 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'}, onactive: {activator: 'onmousedown', deactivator: 'onmouseup'}, onfocus: {activator: 'onfocus', deactivator: 'onblur'}}; function 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 .activator, this.activator); a.attachEvent (x .deactivator, this.deactivator)} CSSHoverElement.prototype = {dỡ: 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 ()}); return function (a, b, c, d) {if (a) {return w.patch (a, b, c, d)} else {w.init ()}}}) ();
Bước 5
Trang này nên được lưu với tên csshover.htc và đặt ở cùng vị trí với trang chính.
