Frage

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

Es sollte die einfachste und eleganteste zugänglich Menü sein, die auch in IE6 und Firefox 2 arbeitet. Es wäre schön, wenn es auf einer nicht nummerierten Liste (ul) gearbeitet, so kann der Benutzer die Seite ohne JavaScript-Unterstützung verwenden.

Welches würden Sie empfehlen und wo kann ich den Code auf ein solches Menü finden?

War es hilfreich?

Lösung

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.

Andere Tipps

A List Apart - Auswahlmenüs

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

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. Besser eine Liste zu verwenden, und alle Optionen Menschen auf einmal zeigen, und es ist besser, nicht weg zu navigieren nach einer Auswahl und / oder eine andere Taste erfordert geschoben werden, um zu bekommen, wo sie wollen.

Ich glaube, Sie am besten sind weg nie die oben mit (und ich schrieb den Code!)

Für die 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 aussehen wie die schicken Menüs (jQuery usw.)

Wir haben aber auch verwendet, jQuery, YUI! und andere. YUI! große Zugangsoptionen eingebaut haben, wenn es das ist eine Voraussetzung für die JavaScript-angetriebene Menüs.

- Andrew

Ich benutze diese:

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

Kommt in vertikalen und horizontalen Aromen.

Ich mag stickman Akkordeon , die je nachdem, wie Sie es wünschen ein schönes zu verhalten sein Wirkung.

Ich habe ein (unverfroren) Fan von Yahoo! gewesen Utzerschnittstellenbibliothek. Sie ein schönes menubar System haben das ist einfach zu implementieren. Große Cross-Browser-Unterstützung.

Sie können sich wahrscheinlich etwas Ähnliches von dem anderen beliebten JavaScript-Frameworks wie jQuery, sowie bekommen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top