Ngoài thiết kế responsive dành cho thiết bị di động, có 1 kỹ thuật mới để tạo ra responsive menu mà không nhất thiết phải sử dụng Javascript, sử dụng ngôn ngữ HTML5 để tạo menu có khả năng căn chỉnh lề trái, phải hoặc giữa. Không đơn thuần chỉ là thao tác nhấp vào để chuyển đổi mà đối với menu này chỉ cần rê chuột vào sẽ tự động chuyển đổi và thân thiện hơn với người sử dụng, đồng thời sẽ có ký hiệu hướng dẫn hiển thị trên các menu item. Thiết kế dạng này có thể hoạt động được trên tất cả các trình duyệt của thiết bị di động và desktop, kể cả Internet Explorer.
1. Mục đích
Biến đổi 1 menu dạng list thông thường thành kiểu menu dạng dropdown theo dạng hiển thị nhỏ gọn
Thủ thuật này rất hữu ích đối với các thanh chuyển hướng có nhiều liên kết như hình bên dưới, chúng ta có thể gộp các nút lệnh lại thành 1 menu dạng dropdown.
2. Nav HTML
Thẻ để tạo menu dạng dropdown thông qua định dạng CSS định vị tuyệt đối
|
1
2
3
4
5
6
7
8
9
|
|
3. CSS
Sử dụng định dạng display:inline-block thay vì dùng float:left trong thẻ
- , như vậy các nút lệnh trên menu sẽ được canh chỉnh trái, giữa, phải thông qua lệnh text-align trong thẻ
|
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
|
/* nav */.nav { position: relative; margin: 20px 0;}.nav ul { margin: 0; padding: 0;}.nav li { margin: 0 5px 10px 0; padding: 0; list-style: none; display: inline-block;}.nav a { padding: 3px 12px; text-decoration: none; color: #999; line-height: 100%;}.nav a:hover { color: #000;}.nav .current a { background: #999; color: #fff; border-radius: 5px;} |
4. Canh chỉnh bên phải và ở giữa
Thay đổi vị trí canh chỉnh của các nút lệnh bằng cách dùng lệnh “text-align”
|
1
2
3
4
5
6
7
8
|
/* right nav */.nav.right ul { text-align: right;}/* center nav */.nav.center ul { text-align: center;} |
5. Hỗ trợ Internet Explorer
Thẻ trong HTML5 và truy vấn media không được Internet Explorer 8 trở lên hỗ trợ nên sử dụng css3-mediaqueries.js (hoặc respond.js) và html5shim.js để dự phòng. Nếu bạn không muốn dùng html5shim.js thì có thể thay thế thẻbằng thẻ
|
1
2
3
4
|
|
6. Responsive
Trên breakpoint 600px, chúng ta thiết lập các phần tử nav theo định dạng vị trí tương đối (relative position), có thể đặt thẻ
- làm menu dạng list trên trên top với định dạng vị trí tuyệt đối (absolute position). Chúng ta ẩn các phần tử
- bằng lệnh display:none nhưng định dạng các thẻ
- hiện tại hiển thị dạng block. Sau đó, khi rê chuột vào thanh chuyển hướng thì ta thiết lập tất cả các phần tử
- trở lại định dạng display:block (xuất hiện menu dạng dropdown).
Chúng ta thêm thuộc tính icon check vào phần tử .current mang tín hiệu đó là 1 item hoạt động. Đối với các meny canh chỉnh giữa và phải thì ta sử dụng thuộc tính left và right đặt trong thẻ
|
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
45
46
47
48
49
50
51
52
53
54
55
|
@media screen and (max-width: 600px) { .nav { position: relative; min-height: 40px; } .nav ul { width: 180px; padding: 5px 0; position: absolute; top: 0; left: 0; border: solid 1px #aaa; background: #fff url(images/icon-menu.png) no-repeat 10px 11px; border-radius: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.3); } .nav li { display: none; /* hide all
margin: 0; } .nav .current { display: block; /* show only current
} .nav a { display: block; padding: 5px 5px 5px 32px; text-align: left; } .nav .current a { background: none; color: #666; } /* on nav hover */ .nav ul:hover { background-image: none; } .nav ul:hover li { display: block; margin: 0 0 5px; } .nav ul:hover .current { background: url(images/icon-check.png) no-repeat 10px 7px; } /* right nav */ .nav.right ul { left: auto; right: 0; } /* center nav */ .nav.center ul { left: 50%; margin-left: -90px; } } |
Nguồn: webdesignerwall.com
