Menu 2 cấp

1. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
1
Nhóm thực hiện: Passion
Giảng viên hướng dẫn: Hồ Ngọc Tú

2. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
Giới thiệu về menu đa cấp:
2

3. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
1. Cách tạo menu ngang đơn giản
a. Tạo menu với html
- Dùng các thẻ <ul> và thẻ <li> để tạo từng mục trong menu.
- Dùng thẻ <a> để tạo link.
Ví dụ: tạo một menu có tên mainmenu đặt trong
class được viết html như sau:
3

4. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
4
• 1. Cách tạo menu ngang đơn giản
a. Tạo menu với html
Kết quả

5. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
5
• 1. Cách tạo menu ngang đơn giản
b. Định dạng css
- Định dạng màu sắc cho menu dùng thuộc tính: background
Ví dụ: .mainmenu{
background: blue; // nền menu màu xanh
}
- Bỏ chấm tròn trước mỗi dòng
.mainmenu ul{
list-style: none;

6. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
6
• 1. Cách tạo menu ngang đơn giản
b. Định dạng css
- Các mục trong menu lên cùng 1 dòng: display:inline-block
- Định dạng các hiệu ứng khi rê chuột vào các mục : hover
- Định dạng mục đang hoạt động: active
- Ngoài ra, còn có thể định dạng chữ cho menu
trong thẻ a

7. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
7
• 1. Cách tạo menu ngang đơn giản
b. Định dạng css
- Ví dụ: định dạng css cho 1 menu như sau:

8. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
8
2. Tạo menu ngang đa cấp
- Menu đa cấp hai hiểu ta them 1 menu trong 1 mục trong menu
Ví dụ: menu đa cấp như sau:
là menu con của mục
Giới thiệu

9. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
9
2. Tạo menu ngang đa cấp
a. Tạo menu đa cấp với html
- Thêm vào thẻ <li> của mục cha các thẻ <ul> và <li>
Ví dụ: Menu con cho mục giới thiệu:

10. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
10
2. Tạo menu ngang đa cấp
b. Định dạng css cho menu đa cấp
- Định dạng css cho menu đa cấp cũng tương tự giống định dạng
css cho menu ngang. Cần chú ý thêm một số thuộc tính như sau:
1.visibility : xác định nội dung có được nhìn thấy không.
Có các giá trị: Collapse, hidden, visible, inherit.
tag{
visibility : giá trị;
}

11. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
11
2. Tạo menu ngang đa cấp
2. position : xác định phương pháp định vị trí cho thành
phần. Có các giá trị: static, relative, absolute,inherit…
tag{
position : giá trị;
}
3. opacity : hiển thị cấp độ tring suốt cho thành phần.
Có các giá trị: là các số cụ thể hay inherit(thừa hưởng
thuộc tính cha)
tag{
opacity : giá trị;
}

12. ĐẠI HỌC ĐÀ NẴNG
TRƯỜNG ĐẠI HỌC SƯ PHẠM
12
2. Tạo menu ngang đa cấp
- Ngoài ra còn có thể dung các thẻ z-index(xác định vị trí cho menu
con)
Ví dụ: Css định dạng cho menu 2 cấp

13. 13