Các menu thả xuống trên các trang của trang web được sử dụng để tiết kiệm dung lượng và cung cấp cách trình bày hợp lý về cấu trúc của tài nguyên web. Có nhiều cách để thực hiện phần tử này, một trong những cách đơn giản nhất được đưa ra dưới đây.
Nó là cần thiết
Kiến thức cơ bản về ngôn ngữ HTML và CSS
Hướng dẫn
Bước 1
Mã HTML của menu sử dụng các phần tử danh sách lồng nhau (UL và LI), bên trong đặt các liên kết đến các trang. Nó không chứa bất kỳ cấu trúc phức tạp nào. Động lực được thực hiện bằng CSS, khối mô tả được đặt trực tiếp trong mã nguồn của trang. Không có gì đặc biệt về nó, ngoài ra, văn bản có chứa một số giải thích về mục đích của các khối kiểu nhất định.
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">
Trình đơn thả xuống * {
font-family: Verdana;
font-size: 14px;
} ul, li, a {
đệm: 0;
hiển thị: khối;
viền: 0;
lề: 0;
} ul {
viền: 1px solid #AAA;
chiều rộng: 150px;
list-style: none;
nền: #FFF;
} li {
màu nền: #AAA;
chức vụ: thân nhân;
chỉ số z: 9;
đệm: 1px;
}
li.folder {background-color: #AAA;}
li.folder ul {
vị trí: tuyệt đối;
đầu trang: 5px;
trái: 111px; / * cho trình duyệt IE * /
}
li.folder> ul {left: 140px;} / * cho các trình duyệt khác * / a {
đệm: 2px;
border: 1px solid #FFF;
văn bản-trang trí: không có;
chiều rộng: 100%; / * cho trình duyệt IE * /
màu: # 000;
font-weight: bold;
}
li> a {width: auto;} / * cho các trình duyệt khác * / li a {
chiều rộng: 140px;
hiển thị: khối;
} li a.submenu {
background-color: màu vàng;
} / * Liên kết * /
a: di chuột {
viền-màu: xám;
màu nền: # FF0000;
màu đen;
}
li.folder a: hover {
màu nền: # FF0000;
} / * Thư mục * /
ul ul, li: hover ul ul {display: none;}
li.folder: hover {z-index: 10;}
li: hover ul, li: hover li: hover ul {display: block;}
- 1 trang
-
2. Thư mục
- 2.1 Trang
-
2.2 Thư mục
- 2.2.1 Trang
- 2.2.2 Trang
- 2.2.3 Trang
- 2.3 Trang
-
3. Thư mục
- 3.1 Trang
- 3.2 Trang
- 3.3 Trang
- 4. Trang
Bước 3
Bạn có thể thêm hỗ trợ cho các phiên bản cũ hơn của trình duyệt Internet Explorer vào mã này - nó được triển khai bằng JavaScript (bởi Peter Nederlof). Bạn cần tải xuống tệp có mã bắt buộc, ví dụ: từ liên kết này - https://peterned.home.xs4all.nl/htc/csshover3.htc. Nó phải được đặt trong cùng một thư mục với trang chính. Và trong phần mô tả các kiểu của trang chính, hãy thêm một liên kết đến nó - nó có thể được đặt ngay sau thẻ kiểu mở: / * đối với các trình duyệt IE cũ *
nội dung {hành vi: url ("csshover3.htc");}
