Bestes Javascript Dropdown-Menü?

Question

Ich bin auf der Suche nach einem Dropdown-JavaScript-Menü.

Es sollte das einfachste und eleganteste zugängliche Menü sein, das auch in IE6 und Firefox 2 funktioniert. Es wäre in Ordnung, wenn es auf einer unnummerierten Liste (ul) funktioniert, so dass der Benutzer die Seite ohne JavaScript-Unterstützung verwenden kann.

Welchen empfehlen Sie und wo finde ich den Code für ein solches Menü?

Answer 1

ich denke, das jquery Superfish Menü ist fantastisch und einfach zu bedienen:

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

Javascript ist nicht erforderlich, und es basiert auf einfachen gültig ul unorder Listen.

Answer 2

A List Apart - Dropdowns

ich eine CSS-only Lösung wie die oben verwenden würde, so erhält der Anwender immer noch Drop-Down-Menü auch mit Javascript deaktiviert.

Answer 3

Ich mag stickmans accordion, die je nachdem, wie Sie es verhalten möchten, kann ein schöner Effekt sein.

Answer 4

Hier ist meine Antwort mit 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; 
}; 

Und dann in Ihrem onready Handler:

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

Aber ich möchte darauf hinweisen, dass diese für die Benutzerfreundlichkeit sind schrecklich. Es empfiehlt sich, eine Liste zu verwenden und den Benutzern alle Optionen auf einmal anzuzeigen, und es ist besser, nach einer Auswahl nicht zu navigieren und/oder eine andere Schaltfläche zu verwenden, um an die gewünschte Stelle zu gelangen.

Ich glaube, du bist am besten dran die oben nie verwenden (und ich schrieb den Code!)

Answer 5

Für Puristen: http://www.grc.com/menudemo.htm Absolut kein JavaScript, pure-css nur - und arbeitet mit nahezu allen Browsern.

Ein wenig Gefummel kann sie so gut wie die schicken Menüs (jQuery, etc.)

Aber wir haben auch jQuery, YUI verwendet aussehen! und andere. YUI! hat großartige Eingabehilfen, wenn dies für JavaScript-gesteuerte Menüs erforderlich ist.

- Andrew

Answer 6

Ich benutze diese:

http://www.tanfa.co.uk/css/examples/menu/vs7.asp

in vertikalen und horizontalen Aromen kommt.

Answer 7

Ich war ein (unverschämter) Fan von Yahoo! Benutzeroberflächenbibliothek. They have a nice menubar system das ist einfach zu implementieren. Große browserübergreifende Unterstützung.

Sie können wahrscheinlich etwas ähnliches von den anderen gängigen Javascript-Frameworks, wie zum Beispiel jQuery, bekommen.