Hiệu ứng tạo một trình đơn có màu nền và chữ của từng mục chọn đổi màu khi bạn rê con trỏ chuột vào.

Hiệu ứng tạo một trình đơn nhiều cấp trên trang web, và ở mỗi thời điểm, hiệu ứng chỉ cho phép người dùng chọn một trình đơn phụ để xem mà thôi.

Một trình đơn nhiều cấp có thể thu gọn / mở rộng dễ dàng. Trình đơn sẽ dùng cookie để lưu trạng thái đóng mở của các mục chọn. Một trình đơn nằm dọc rất kiểu cách và bắt mắt trên trang web.

Hiệu ứng này kết hợp cả CSS và JavaScript để tạo một trình đơn định hướng nhiều cấp trên trang web, các trình đơn con sẽ xổ xuống khi người dùng rê con trỏ chuột vào. Bạn có thể dễ dàng thêm nhiều cấp như mong muốn và hiệu ứng này không sử dụng thẻ table để thiết kế trình đơn mà dùng kĩ thuật CSS đang thịnh hành hiện nay.

Một đoạn mã JavaScript khác để tạo một trình đơn nhiều cấp nằm ở phía trái trang web. Hiệu ứng sẽ hiển thị các trình đơn phụ mỗi khi người dùng rê chuột đến các trình đơn chính.

Thêm một sự lựa chọn nữa để tạo trình đơn nhiều cấp cho trang web của bạn, ở đoạn mã này, mỗi mục chọn của trình đơn đều được hỗ trợ một ảnh mô tả. Hiệu ứng sẽ hoạt động tốt trên mọi trình duyệt nhưng sẽ đẹp hơn nếu dùng Internet Explorer, bởi trình đơn sẽ áp dụng các bộ lọc của riêng Internet Explorer.

Trình đơn xổ dọc này trong rất gọn nhẹ và dễ dàng để cài đặt vào bất cứ vị trí nào trên trang web của bạn. Đặc điểm của trình đơn JavaScript trong đoạn mã JavaScript này là trình đơn JavaScript được thiết kế theo chuẩn Web 2.0, không dùng bảng (tableless) và rất dễ để thay đổi độ sâu của trình đơn.

Nghe tên có lẽ bạn sẽ nghĩ rằng đoạn mã JavaScript này cực kì phức tạp về chức năng lẫn mã nguồn? Nếu bạn đang nghĩ như thế thì có thể tác giả đã làm bạn thất vọng rất nhiều, bởi bản thân đoạn mã không có gì là phức tạp và chức năng cũng vậy (jsB@nk nghĩ vậy); vấn đề chỉ là tên do tác giả đặt nên phải tuân theo.

Hiệu ứng chỉ là hiển thị nội dung thông tin thêm dựa vào hành vi của người dùng với các sự kiện như rê con trỏ chuột và nhấn chuột để hiển thị khung chú thích ngay vị trí này. Bạn có thể xem hiệu ứng tương tự là Nội dung chồng lấn.

Đoạn mã JavaScript này sẽ tạo một trình đơn nhiều cấp trên trang web (trong ví dụ JavaScript mẫu là 3 cấp, và dĩ nhiên bạn có thể tạo bao nhiêu cấp cũng được).

Điểm sáng giá của hiệu ứng JavaScript này ở chỗ nó chỉ cho phép một trình đơn cấp gốc được chọn mỗi lần; đồng thời nó dùng cookie để lưu trạng thái đóng/mở của các trình đơn, mỗi khi trang web được tải lại thì nó vẫn hiển thị vị trí đã mở.

Một hiệu ứng JavaScript tạo trình đơn nhiều cấp khá độc đáo với giao diện trình đơn của ứng dụng DreamWeaver - một hiệu ứng trình đơn khá mới lạ để tạo sự khác biệt trên website của bạn. Điểm đặc biệt là hiệu ứng trình đơn này không dùng bất kì thư viện JavaScript hỗ trợ nào. Bạn có thể vào trang chi tiết để xem ví dụ mẫu JavaScript trực tiếp và tải về mã nguồn đầy đủ đính kèm, hoặc xem thêm các trình đơn tuyệt vời khác được giới thiệu trên jsB@nk:

- Trình đơn định hướng kiểu xếp tầng tuyệt đẹp với jQuery
- Trình đơn định hướng nhiều cấp với trạng thái nhớ
- Các giải pháp trình đơn đa cấp siêu đẹp dùng jQuery
- Trên 30 trình đơn định hướng với framework
- 9 trình đơn định hướng dạng cây thư mục hữu ích
- Các trình đơn định hướng tốt nhất cho thiết kế dùng jQuery