2008-09-19 37 views
16

Tôi đang tìm trình đơn JavaScript thả xuống.Trình đơn thả xuống Javascript tốt nhất?

Nó phải là menu đơn giản nhất và thanh lịch nhất có thể hoạt động trong IE6 và Firefox 2. Sẽ tốt nếu nó hoạt động trên một danh sách không được xếp chồng (ul) để người dùng có thể sử dụng trang mà không cần hỗ trợ JavaScript.

Bạn khuyên bạn nên làm gì và tôi có thể tìm mã ở đâu trong menu như vậy?

Trả lời

12

Tôi nghĩ menu jquery Superfish là tuyệt vời và dễ sử dụng:

http://users.tpg.com.au/j_birch/plugins/superfish/

Javascript là không cần, và nó được dựa trên danh sách ul unorder hợp lệ đơn giản.

+0

Thật tuyệt, nhưng tôi * bỏ qua * các trình đơn thả xuống trên các trang web có hành động mà không cần tôi nhấp; nó dẫn đến những thứ xuất hiện để che khuất nội dung khi tôi không thực hiện hành động công khai nào cho điều đó xảy ra. – delfuego

+0

Điều đó có liên quan gì đến siêu cá? Nó không làm điều đó. – Buzz

+0

Tôi thấy điều này đẹp và dễ cấu hình. Và phần tốt nhất là nó hoạt động trong IE6, IE7 và Firefox (tôi chưa thử nghiệm với những người khác). – Germstorm

3

A List Apart - Dropdowns

Tôi muốn sử dụng một giải pháp css chỉ như trên vì vậy người dùng vẫn được trình đơn thả xuống ngay cả với Javascript bị vô hiệu.

1

Tôi thích stickman's accordion, tùy thuộc vào cách bạn muốn nó hoạt động có thể là một hiệu ứng tốt đẹp.

2

Dưới đây là câu trả lời của tôi sử dụng jQuery:


jQuery.fn.ddnav = function() { 
     this.wrap(""); 
     this.each(function() { 
       var sel = document.createElement('select'); 
       jQuery(this).find("li.label, li a").each(function() { 
         jQuery("<option>").val(this.href ? this.href : '').html(jQuery(this).html()).appendTo(sel); 
       }); 
       jQuery(this).hide().after(sel); 
     }); 
     this.parent().find("select").after("<input type=\"button\" value=\"Go\">"); 
     var callback = function(button) { 
       var url = jQuery(button.target).parent("div").find("select").val(); 
       if(url.length) 
         window.open(url, "_self") 
     }; 
     this.parent().find("input[type='button']").click(callback); 
     this.parent().find("select").change(callback); 
     return this; 
}; 

Và sau đó trong handler onready của bạn:


    $("ul.dropdown_nav").ddnav(); 

Nhưng tôi sẽ chỉ ra rằng đây là khủng khiếp đối với khả năng sử dụng. Tốt hơn nên sử dụng danh sách và hiển thị cho mọi người tất cả các tùy chọn cùng một lúc và tốt hơn là không nên điều hướng đi sau khi lựa chọn và/hoặc yêu cầu một nút khác để được đẩy tới nơi họ muốn.

Tôi nghĩ rằng bạn tốt nhất nên không bao giờ sử dụng ở trên (và tôi đã viết mã!)

2

Đối với purist: http://www.grc.com/menudemo.htm Tuyệt đối không có JavaScript, thuần css chỉ - và làm việc với hầu như tất cả các trình duyệt.

Một chút tinh chỉnh có thể làm cho họ nhìn tốt như các menu ưa thích (jQuery, vv)

Nhưng chúng tôi cũng đã sử dụng jQuery, YUI! và những người khác. YUI! có các tùy chọn trợ năng tuyệt vời được tích hợp sẵn, nếu đó là yêu cầu đối với các menu hỗ trợ JavaScript.

- Andrew

1

Tôi là một người hâm mộ (chưa được mời) của Yahoo! Thư viện giao diện người dùng. They have a nice menubar system dễ thực hiện. Hỗ trợ trình duyệt chéo tuyệt vời.

Bạn có thể có thể nhận được một cái gì đó tương tự từ các khung Javascript phổ biến khác, chẳng hạn như jQuery, là tốt.

+0

Đây là ví dụ về cách sử dụng YUI 3 để thực hiện trình đơn thả xuống: http://jsbin.com/udigof/1 – relipse

Các vấn đề liên quan