hào các bạn với việc trình bày một website thì không thể không nhắc đến menu đa cấp, nó như một điều gì đó không thể thiếu trong giao diện web. Để làm được menu đa cấp ngang có rất nhiều cách như: dùng javascript, jquery … HTM kết hợp CSS vẫn có thể làm được đây có thể xem là cách đơn giản nhất có thể làm, giúp website nhẹ nhàng khi vận hành.
Để làm được menu đa cấp này bạn cần nắm được cơ bản về HTML và CSS. Cấu trúc một cây menu chuẩn bao gồm cách thẻ ul và li lồng vào nhau. Mình tạm thời tạo một giao diện HTML menu đơn giản như sau:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!---<ul class="nav"> <li><a href="#">Menu item 1</a></li> <li> <a href="#">Menu item 2</a> <ul class="sub-menu"> <li><a href="#">Menu item 2.1</a></li> <li> <a href="#">Menu item 2.2</a> <ul class="sub-menu"> <li><a href="#">Menu item 2.2.1</a></li> <li><a href="#">Menu item 2.2.2</a></li> <li><a href="#">Menu item 2.2.3</a></li> </ul> </li> <li><a href="#">Menu item 2.3</a></li> <li><a href="#">Menu item 2.4</a></li> </ul> </li> <li><a href="#">Menu item 3</a></li> <li><a href="#">Menu item 4</a></li> <li><a href="#">Menu item 5</a></li></ul>---> |
ul bao quanh mình đặt class nav, khi có một cấp con menu thì mình đặt ul đó một class là sub-menu. Giải thuật mình định dạng CSS cho menu đó như sau:
- Đây là menu ngang nên li gần nhất sẽ float left cho canh ngang những li cấp dưới sẽ bình thường.
- Ở cấp dưới mình sẽ display là none (cụ thể là sub-menu) để không hiển thị.
- Sau khi hover vào sẽ sub-menu sẽ display block để hiển thị ra.
- li mình sẽ cho position relative.
- sub-menu position là absolute để canh vị trí cho đẹp mắt.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
| <!-- .nav{ background-color: #0080C0; } .nav>li{ float: left; margin-right: 15px; } .nav>li>a{ text-transform: uppercase; color: #fff; } .nav li{ position: relative; } .nav li a{ padding: 10px; line-height: 20px; display: inline-block; } .nav .sub-menu{ display: none; position: absolute; top: 0; left: 100%; width: 200px; background-color: #eee; padding: 5px 20px; } .nav li:hover>.sub-menu{ display: block; } .nav>li>.sub-menu{ top: 40px; left: 0; }--> |
Đây là những thao tác đơn giản cho một menu ngang đa cấp đơn giản, tuy nhiên muốn đẹp mắt thì mọi người phải tự style thêm theo mong muốn của mình. Cảm ơn đã xem bài viết
http://bcdonline.net/huong-dan-tao-menu-da-cap-ngang-voi-html-va-css/
Tham khảo thêm
http://teachyourself.vn/xay-dung-menu-da-cap-don-gian.html
0 nhận xét:
Đăng nhận xét