Responsive Design và hướng dẫn tạo Menu Responsive.

Giới thiệu qua về Responsive Design. 

Responsive Design dựa vào công nghệ CSS3, Javascript giúp web hiển thị linh hoạt trên mọi nền tảng từ PC, Tablet cho đến những dòng Smart Phone (Android, Windows Phone, iOS). Thông qua thẻ meta giúp scale size để nhận dạng thiết bị đang truy cập web và đưa ra style phù hợp. Hiện nay, các thiết bị Smart Mobile hầu hết đều có khả năng xử lý Web mạnh mẽ không khác gì trên máy tính, bởi thế rất nhiều Website hiện nay đã sử dụng công nghệ này thay vì phải tạo thêm một trang cho Mobile (kiểu như m.domain.com). Dĩ nhiên IE8 (và các phiên bản thấp hơn) sẽ không thể tham gia vào cuộc chơi này. Còn lại (Chrome, Firefox, Safari, Opera, IE9 +) thì bạn yên tâm với khả năng xử lý very good của chúng.

Trong bài trước tôi có chia sẻ với bạn một mẫu Blogger Template (Responsive Design) :

http://www.erhay.com/2013/09/template-blogger-tin-tuc-ep-tich-hop.html

Ví dụ mẫu về Menu : 

Bạn không nhất thiết sử dụng điện thoại/tablet để kiểm tra xem chúng đã hoạt động tốt chưa. Đơn giản hãy thu nhỏ trình duyệt của bạn lại bạn cũng có thể thấy.

View with Tablet

View with  Smart Phone

Loại Menu Responsive như hình trên sự kết hợp hoàn hảo giữa CSS3 và Jquery. Với kiểu Menu này bạn chỉ cần xây dựng một Menu hiển thị Duy nhất.

Một thể loại khác mà bạn có thể không cần dùng Jquery mà chỉ cần tạo 2 Menu dạng như sau :

<div class="main-menu"><ul>....</ul></div>
<option class="main-menu-mobile" stye="display:none">...</option>

Bạn có thể thấy, menu dạng <option> select box sẽ không hiển thị bằng cách thêm style="display:none".
Nhưng khi chạy trên phiên bản mobile chúng ta sẽ cho chúng hiển thị lên, và ngược lại menu trên máy tính sẽ bị đóng.

Ví dụ, Tablet có kích thước (width) màn hình trong phạm vi từ 675px trở lại thì ta sẽ cho Menu dạng Mobile(selectBox) hiển thị lên như sau :

@media screen and (max-width:675px)
{
.main-menu{display:none} /*Menu trên máy tính sẽ không cho hiển thị*/
.main-menu-mobile {display:block !important} /*Menu dạng mobile cho hiển thị*/
}

@media screen and (max-width:675px) : Để rào phạm vi width từ 675px trở lại.

Cuối cùng bạn có thể Download Menu theo Link sau để tham khảo thêm :

http://www.mediafire.com/download/ak8e9c701593ve5/demo.rar
Minh Anh - Erhay. Vui lòng ghi rõ nguồn Erhay khi bạn phát hành thông tin từ trang này.