Cách tạo jQuery responsive menu

Hôm nay mình xin giới thiệu với anh em bạn bè các thiết kế web responsive menu để website của bạn hiển thị đẹp hơn trên các thiết bị di động.

Xin chào. Với xu hướng thiết kế web mới và với sự phát triển mạnh mẽ của các thiết bị di động nên việc thiết kế web làm sao cho giao diện trên mọi loại thiết bị màn hình khác nhau ngày càng quan trọng. Hẳn là bạn muốn tự tay thiết kế website của mình hiển thị tốt trên mọi loại thiết bị chứ ?

Cách tạo jQuery responsive menu

Cách tạo jQuery responsive menu

Mình xin giới thiệu cách sử dụng jQuery để thiết kế  responsive menu với các tính năng chính sau :

  1. Hỗ trợ menu đa cấp
  2. Linh hoat với mọi độ phân giải
  3. Thiết kế cực đơn giản
  4. Hoạt động đơn giản ko cần dùng quá nhiều javascripts
  5. Tự động xác định menu hiện đang sử dụng và khởi tạo html mới để hiển thị khi trình duyệt đc xác định. (mặc định ở đây là chiều rộng là 40em thì hiển thị mobile menu và ẩn menu chính của web)

Bắt đầu :

Trước tiên bạn hãy download jQuery plugin đã viết sẵn ở đây : jquery.nqhweb.reponsive.menu.js

Trước tiên ta có 1 trang HTML đơn giản

 Viết CSS cho cái vừa tạo:

Tạo file style.css với nội dung sau :

Tạo file responsive.css menu với nội dung sau :

OK bây giờ save tất cả vào 1 thư mục để bọn nó ngang hàng với nhau là đc. Chạy thử đi nhé.

Demo : http://truyenteen.net