Nó hoạt động trên tất cả các trình duyệt điện thoại di động và máy tính để bàn bao gồm
Mục đích
Mục đích của hướng dẫn này là để chỉ cho bạn cách biến một menu danh sách navigation bình thường vào một trình đơn thả xuống trên màn hình nhỏ hơn .
Sử dụng HTML
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
| <nav class="nav"> <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">Service</a></li> <li><a href="#">Abouts</a></li> <li><a href="#">Contact</a></li> </ul></nav><p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> |
CSS
Lưu ý nên sử dụng thuộc tính display:inline-block thay cho float:left để khi này ta không cần phải cleafix cho các phần tử khác
01
02
03
04
05
06
07
08
09
10
11
12
13
14
| ul{ position: relative; background: #636eb3; } ul li{ display:inline-block ; text-decoration: none; list-style: none; padding: 5px; } ul li a{ text-decoration: none; color: #ffffff; } |
Chuyển đổi Menu Navigation bình thương thành Responsive Menu khi độ phân giải màn hình nhỏ hơn 600PX
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| @media screen and (max-width:600px){ .nav{overflow: hidden; margin: 20px 0; min-height: 40px;} ul{ background: #636eb3; width: 180px; padding: 5px 0; position: absolute; left: 0; top: 0; border: 1px solid #aaa; border-radius: 5px; box-shadow: 0 1px 2px #c3c3c3; } ul li{ display: none; padding: 5px 5px 5px 32px; } ul li:hover{ background: #333333; transition:.2s all linear; } .nav .current{ display: block; } ul:hover li{ display: block; } } |
Ngoài ra nếu fix IE chúng ta thêm thư viện này vào
1
2
3
4
| <!--[if lt IE 9]><![endif]--> |