http://www.javascriptbank.com/rss/menu/navigation/ JavaScript mới nhất: Định hướng vi Copyright (C) JavaScriptBank.com 60 [email protected] RSS <img src="http://www.javascriptbank.com/javascript.images/menu/javascript-content-auto-indexing-using-dom.jpg" width="100" height="100" align="left" style="margin: 5px;" />Với các trang web chứa nhiều nội dung văn bản, chẳng hạn như tài liệu kĩ thuật, truyện chữ, bài viết phóng sự, ... chúng ta thường dùng cách thủ công để tạo chỉ mục cho các tiêu đề nội dung. Công việc tiêu tốn nhiều thời gian này sẽ không còn nữa nếu trang web sử dụng <a href="http://www.javascriptbank.com/" title="hiệu ứng JavaScript">hiệu ứng JavaScript</a> này, các chỉ mục sẽ được tự động nhận diện và hiển thị trong khu vực được xác định trước, công việc của người viết là chỉ cần tạo nội dung. http://www.javascriptbank.com/javascript-content-auto-indexing-using-dom.html 1297315271 <img src="http://www.javascriptbank.com/javascript.images/menu/semantic-on-page-content-list.jpg" width="100" height="100" align="left" style="margin: 5px;" />Một đoạn mã tương tự như <a href="/collapsible-navigation-menus.html">Trình đơn xếp gập</a> để hiển thị nội dung có liên quan chỉ qua một cú nhấn chuột, và chỉ một <a href="/vi=chủ đề">chủ đề</a> được hiển thị ở mỗi thời điểm. Tuy nhiên, thiết kế ở đoạn mã này không tốt bằng. http://www.javascriptbank.com/semantic-on-page-content-list.html 1239755824 <img src="http://www.javascriptbank.com/javascript.images/menu/collapsible-navigation-menus.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiển thị thông tin thêm chỉ qua một cú nhấn chuột, đó là chức năng của đoạn <a href="/javascript/">mã JavaScript</a> này. Tại mỗi thời điểm chỉ một <a href="/javascript/menu/">trình đơn</a> được mở, trình đơn được mở trước đó sẽ tự động được đóng lại. Hiệu ứng cho phép bạn tạo không giới hạn các trình đơn, vì vậy sẽ rất phù hợp để thiết kế các <a href="/title=faq">F.A.Q</a>. http://www.javascriptbank.com/collapsible-navigation-menus.html 1239669416 <img src="http://www.javascriptbank.com/javascript.images/menu/xp-style-switch-navigation.jpg" width="100" height="100" align="left" style="margin: 5px;" />Hiệu ứng tạo ra các <a href="/javascript/menu/navigation/">trình đơn định hướng</a> với giao diện và cách hoạt động khá giống với các trình đơn trong HĐH <a href="/=Windows XP">Windows XP</a>. Ngoài ra, hiệu ứng còn kết hợp với <a href="/javascript/cookie/">cookie</a> để lưu trạng thái của trình đơn, cùng với tính năng <a href="/vi+title=mờ dần">mờ dần</a> là một <a href="/vi+title=tùy chọn">tùy chọn</a>, bạn có thể tắt nó đi. Bạn có thể xem thêm phiên bản đầu tiên của hiệu ứng: <a href="/switch-menu-script.html">Menu kiểu công tắc</a> http://www.javascriptbank.com/xp-style-switch-navigation.html 1239669413 <img src="http://www.javascriptbank.com/javascript.images/menu/dropdown-navigation-controller.jpg" width="100" height="100" align="left" style="margin: 5px;" />Nghe tên có lẽ bạn sẽ nghĩ rằng <a href="/javascript/">đoạn mã JavaScript</a> 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à <a href="/vi=hiển thị nội dung">hiển thị nội dung</a> 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ê <a href="/javascript/mouse/">con trỏ chuột</a> và nhấn chuột để hiển thị <a href="/vi+title=khung chú thích">khung chú thích</a> ngay vị trí này. Bạn có thể xem hiệu ứng tương tự là <a href="/overlapping-content-link.html">Nội dung chồng lấn</a>. http://www.javascriptbank.com/dropdown-navigation-controller.html 1239583005 <img src="http://www.javascriptbank.com/javascript.images/menu/select-option-navigation-menu.jpg" width="100" height="100" align="left" style="margin: 5px;" />Bạn có thể dùng <a href="/javascript/">đoạn mã JavaScript</a> này sử dụng trình đơn xổ dọc để tạo chức năng định hướng cho các <a href="/javascript/link/">liên kết</a> (khác) trên trang web. Mỗi khi người dùng nhấn chọn thì <a href="/javascript/browser/">trình duyệt</a> sẽ dẫn người dùng đến địa chỉ cụ thể tương ứng do bạn thiết lập. Một <a href="/javascript/">hiệu ứng JavaScript</a> cực kì nhỏ gọn nhưng đầy hiệu quả với những trang web có quá nhiều chi tiết, cần phải tiết kiệm không gian. http://www.javascriptbank.com/select-option-navigation-menu.html 1236904596 <img src="http://www.javascriptbank.com/javascript.images/menu/rollover-text-hide-and-show.jpg" width="100" height="100" align="left" style="margin: 5px;" />Bạn có thể dùng <a href="/javascript/">hiệu ứng JavaScript</a> này để tạo các <a href="/javascript/link/tooltip/">chú thích</a> cho các đối tượng giống như <a href="/title=FAQ">F.A.Q</a>, các <a href="/javascript/link/tooltip/">chú thích</a> sẽ được hiển thị khi người dùng rê <a href="/javascript/mouse/">con trỏ chuột</a> đến và bạn có thể dùng mã HTML cho các chú thích. http://www.javascriptbank.com/rollover-text-hide-and-show.html 1228091786 <img src="http://www.javascriptbank.com/javascript.images/menu/automatic-breadcrumbs.jpg" width="100" height="100" align="left" style="margin: 5px;" />Đoạn mã này sẽ tự động tạo một <a href="/javascript/link/">liên kết</a> <a href="/javascript/menu/navigation/">định hướng</a> tới bất kì trang nào chứa nó. Đoạn mã cho phép người truy cập biết chính xác vị trí mà học đang hiện diện. http://www.javascriptbank.com/automatic-breadcrumbs.html 1205541329 <img src="http://www.javascriptbank.com/javascript.images/menu/page-index.jpg" width="100" height="100" align="left" style="margin: 5px;" />Đây là một đoạn mã đơn giản đến mức khó tin, nó sẽ tự động tìm tất cả các thẻ đầu đề <code>H4</code> của trang web và lập chỉ mục cho chúng; nhằm tạo sự thuận lợi cho người sử dụng nếu nội dung trang web quá dài. Bạn cũng có thể dễ dàng chỉnh sửa để hiệu ứng làm việc với bất kì thẻ đầu đề nào khác. http://www.javascriptbank.com/page-index.html 1198974905 <img src="http://www.javascriptbank.com/javascript.images/menu/flip-menu-v5-0.jpg" width="100" height="100" align="left" style="margin: 5px;" />Flip <a href="/javascript/menu/">Trình đơn</a> tạo một <a href="/javascript/menu/">trình đơn</a> chứa các <a href="/javascript/link/">liên kết</a> hình thành nên một cấu trúc trông giống <a href="/vi+title=thư mục">cây thư mục</a>, với <a href="/javascript/image/">hình ảnh</a> ở mỗi <a href="/javascript/link/">liên kết</a>, người dùng có thể hiển thị hay ẩn một nhánh thư mục chỉ với thao tác nhấn chuột. http://www.javascriptbank.com/flip-menu-v5-0.html 1188261244