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

Đ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ở.

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.

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.

Thêm một đoạn mã JavaScript JavaScript nữa để tạo trình đơn nhiều cấp trên trang web, trình đơn JavaScript này có thể được định nghĩa để hiển thị theo chiều ngang hoặc dọc.

Đây là một hiệu ứng tạo các trình đơn nhiều cấp trên trang web và có thể áp dụng nhiều hiệu ứng duyệt trình đơn. Hiệu ứng hoạt động hoàn toàn dựa vào các thẻ danh sách UL, đơn giản ta chỉ cần thêm thuộc tính class cho chúng; hiệu ứng được kiểm tra và hoạt động tốt trên các tình duyệt như IE5.5+, Firefox 1.5+, Opera 8.5+, Safari.

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.

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.

Hiệu ứng tạo các trình đơn nhiều cấp lồng nhau trên trang web.

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.