Với JQuery chúng ta có thể tạo nên những menu sống động và đa dạng cho trang web của mình, chỉ cần bạn có hiểu biết chút ít về CSS và JS thì bạn cũng có thể tùy biến để áp dụng vào trang web của mình. Bài viết này giới thiệu với các bạn hơn 20 menu phổ biến hàng đầu được viết bằng JQuery.

1.jQuery Tabbed Interface

Tabbed Interface hay Tabbed Structure Menu hiện rất phổ biến trong thiết kế web và phát triển. Bài hướng dẫn này sẽ cho bạn biết cách xây dựng những tab của riêng mình bằng JQuery với hiệu ứng slideDown/slideUp. Bằng cách xem qua demo bạn có thể hiểu được cách hoạt động của nó.

Demo || Download

2.Animated Menus sử dụng jQuery

Học cách tạo hiệu ứng menu hoạt hình đặc sắc với thuần Xhtml,CSS và Javascript, tương tự như trang Dragon Interactive

Demo || Download

3. Animated Navigation và CSS, jQuery Tutorial

Hiệu ứng hoạt hình tạo hiệu quả thu hút sự chú ý của người dùng vao menu mà không cần dùng đến flash, bạn sẽ ngạc nhiên vì trông rất giống flash. Với sức mạnh của của js hiện tại ta có thể tránh việc dùng flash khi không cần thiết mà vẫn rất đẹp.

Demo || Download

4. jQuery ListNav Plugin

jQuery plugin này cung cấp cách dễ dàng để có thể thêm các kí tự cơ bản (a,b,c...) trên thanh ngang cho bất kì thẻ UL hay OL. Cách định kiểu đơn giản với CSS trên mỗi danh sách. Bấm chọn một trong các kí tự lọc trên danh sách để hiển thị chỉ những mục nào trên danh sách bắt đầu từ kí tự được chọn. Ngoài ra trên mỗi kí tự tương ứng còn có số mục tương ứng chỉ ra có bao nhiêu mục sẽ được hiển thị nếu kí tự được bấm chọn. Còn có vài tùy chọn khác cho bạn điều khiển trên các hàm cơ bản

Preview || Download

5. jqDock menu

Tạo ra menu như trong máy Mac bao gồm thanh ngang và dọc, các icon có thể thu nhỏ phóng to khi đưa chuột tới...

Preview || Download

6.Sliding Jquery Menu

Hướng dẫn bạn tạo menu xổ xuống kèm theo cách thiết kế menu bằng PS.

Preview || Download

7. CSS Mac Dock Menu

Thêm một cách mô tả máy Mac trên web, bạn sẽ ngạc nhiên vì sự giống nhau giữa chúng

Preview || Download

8.Kwicks for jQuery

Tạo menu thay đổi kích thước với hiệu ứng hoạt hình sống động như flash, có phiên bản tương ứng dành cho Mootools

Examples || Download

9.Jquery File Tree

Quản lí file dạng cây, là sự kết hợp của phần quản lí file của AJAX dành cho jQuery, bạn có thể tùy biến, tác động cấu trúc cây thư mục với vài dòng code JavaScript. Hiện tại script xử lí cho server chỉ có code cho PHP, ASP, ASP.NET, JSP, và Lasso. Nếu bạn là lập trình viên bạn có thể dễ dàng tạo ra script xử lí cho ngôn ngữ mà mình chọn.

Preview || Download

10.Learning jQuery: Fading Menu

Bài hướng dẫn giải thích cách sử dụng CSS với jQuery như thế nào, cách sử dụng tùy chọn fading trên menu

Preview || Download

11. How to Make a Smooth Animated Menu with jQuery

Bài hướng dẫn tạo menu với hiệu ứng hoạt hình cùng một số chuyển động chuyên nghiệp lạ mắt.

Preview || Download

12.Create Vimeo-like top navigation

Học cách tạo navigation như trang Vimeo, chỉ sử dụng xhtml,css

Preview + Vimeo site || Download

13. jQuery (mb)Menu 2.3

Đây là jQuery component dành cho việc xây dựng menu dạng cây đa cấp một cách dễ dàng hoặc menu dạng ngữ cảnh khi bấm phải chuột theo trực giác.

Bạn có thể thêm nhiều menu con nếu bạn muốn, nếu menu con hoặc menu chính không được nhận dạng trong trang thì component sẽ nhận nó thông qua ajax bằng cách gọi trang template với id của menu bạn cần (giá trị của thuộc tính "menu") trang ajax sẽ trả về code được định dạng như ví dụ bên dưới.

Preview || Download

14. jQuery idTabs

idTabs là plugin for jQuery, nó tạo tab cho trang web một cách đơn giản.

Preview || Download

15. Animated Drop Down Menu with jQuery

Tạo hiệu ứng menu cuộn xuất hiện và ẩn (drop downs) theo sự kiện bấm chuột

Preview || Download

16. Using jQuery for Background Image Animations

Hiệu ứng background dạng hình xuất hiện với nhiều kiểu khác nhau.

Preview

17. jQuery convertion: Garagedoor effect using Javascript

Một menu với hiệu ứng khá ngộ nghĩnh

Preview || Download

18. Fisheye Menu

Menu dạng sổ dựa theo MacOSX

Download