Hướng dẫn cách tạo nhanh Responsive Menu

Xu hướng Responsive Web đã phát triển mạnh trong 2012 và đó cũng sẽ là xu hướng của những năm tới. Hôm nay, mình sẽ hướng dẫn nhanh cách tạo ra một menu dạng Responsive. Hãy xem bài viết và share cho mọi người biết nhé.

Preview    Download

Trước hết, ta thêm đoạn script này để hỗ trợ HTML5 và CSS3 trong IE.

1.<script src="http://dl.dropbox.com/u/46548447/HTML%20%26%20CSS/html5.js"></script>

Cấu trúc HTML5

01.<nav>02.<ul>03.<li><a href="http://omegakd.blogspot.com/">Home Page</a></li>04.<li><a href="http://omegakd.blogspot.com/search/label/Movie">Movie</a></li>05.<li><a href="http://omegakd.blogspot.com/search/label/Th%E1%BB%A7%20thu%E1%BA%ADt">Thủ thuật</a></li>06.<li><a href="http://omegakd.blogspot.com">Website</a></li>07.<li><a href="http://omegakd.blogspot.com/search/label/IT">IT</a></li>08.<li><a href="http://omegakd.blogspot.com/search/label/T%C3%A0i%20Li%E1%BB%87u">Tài liệu</a></li>09.<li><a href="http://omegakd.blogspot.com/#">Download</a></li>10.<li><a href="http://omegakd.blogspot.com/#">jQuery</a></li>11.</ul>12.</nav>

CSS3

01.* {
02.padding: 0;
03.margin: 0;
04.-webkit-box-sizing: border-box;
05.-moz-box-sizing: border-box;
06.box-sizing: border-box;}
07.
08.body{
09.background:#f4f4f4;
10.font-family:Arial, Helvetica, sans-serif;}
11.
12.nav {
13.width: 90%;
14.margin: 100px auto;
15.overflow: hidden;}
16.
17.nav ul {
18.list-style: none;
19.overflow: hidden;}
20.
21.nav li a {
22.background: #455867;
23.border-right: 1px solid #fff;
24.color: #fff;
25.display: block;
26.float: left;
27.font-weight:bold;
28.font-size:13px;
29.padding: 20px 10px;
30.text-align: center;
31.text-decoration: none;
32.text-transform: uppercase;
33.width: 12.5%;
34./*Tạo hiệu ứng khi rê chuột*/
35.-webkit-transition: background 1s ease;
36.-moz-transition: background 1s ease;
37.-o-transition: background 1s ease;
38.-ms-transition: background 1s ease;
39.transition: background 1s ease;}
40.
41.nav li a:hover {
42.background: #273744;}
43.
44.nav li:last-child a {
45.border: none;}

Phần tạo menu trên là phần cơ bản. Các bạn chú ý đến last-child. Các bạn có thểm tham khảo thuộc tính này trên mạng nhé.
Responsive Menu
Đối với màn hình độ phân giải 1024px (Nhỏ hơn hoặc bằng 1024px)

1.@media only screen and (max-width : 1024px)2.{3.nav li a {4.font-size:10px;}5.}Đối với màn hình độ phân giải 930px01.@media only screen and (max-width : 930px)02.{03.nav li a {04.width: 25%;05.border-bottom: 1px solid #fff;06.font-size:11px;}07.08.nav li:last-child a, nav li:nth-child(4) a {09.border-right: none;}10.11.nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {12.border-bottom: none;}13.}

nth-child (pseudo selector) dùng để chọn phần tử con nào đó theo quy tắc mà bạn chỉ định như ví dụ trên đối số là odd nghĩa là bạn muốn chọn các phần tử con là lẻ, để chọn các thẻ chẵn thì bạn thay bằng đối số even, hoặc nhập trực tiếp vị trí của thẻ con mà bạn muốn chỉ định bằng số thứ tự của thẻ con đó, theo CSS thì thẻ con đầu tiên có vị trí là 1.

Đối với màn hình độ phân giải 580px

01.@media only screen and (max-width : 580px)
02.{
03.nav li a {
04.width: 100%;
05.font-size:12px;
06.border-right: none;}
07.
08.nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a {
09.border-bottom: 1px solid #fff;}
10.}
Đối với màn hình độ phân giải 320px
1.@media only screen and (max-width : 320px)
2.{
3.nav li a {
4.font-size:11px;}
5.}

Nguồn : Y2Graphic

---