JavaScript multilevel ajax dropdown menu?

[lordfritte]

Hallo ich bin auf der Suche nach einer kostenlosen Lösung ein DropDown menu zu bauen.
Ich habe mir hier und hier schon einige angeschaut, aber ich habe da noch nichts passendes gefunden.
Was mir fehlt sind 1. die Möglichkeit die Menü-Flächen frei zu stylen, sprich auch vor den Text ein Image, oder direkt ganz andere Elemente(checkboxen, textboxen, etc.) einfügen zu können.
Und 2. ich möchte ich, dass sub items und sub sub items und sub sub sub items.... bei anforderung per ajax geholt werden.

 

[dekom]

Wie groß soll das Menü den werden?
Ich seh keinen Sinn drin es mit ajax zu machen, außer du willst etwas mit ajax spielen und testen.
Ein DropDown kannst du doch auch ganz einfach mit CSS aufbauen und falls sich was nach aktiviern der Checkbox ändern soll, kannst du das ja immer noch mit Ajax machen.

 

[Daaron]

Sieh immer erstmal zu, wie weit du mit reinem CSS kommst... und halt dich an einfache Usability-Regeln. Dazu gehört: Nie mehr als 3 Level verwenden, denn tiefer geht eh kein Besucher.

Außerdem bringt es dir nix, blind irgendwo Code zusammen zu grabbeln. Denk lieber selbst über die HTML-Semantik nach, wenn du das klar vor Augen hast, dann kriegst du automatisch auch die Hand voll CSS-Zeilen hin, die nötig sind.

 

[lordfritte]

Also, es sollen auch maximal nur 3 levels werden, Root, child 1, child 2.

Die Idee mit dem Ajax hat einen einfachen Grund: Das Root-Level Menu ist immer gleich, aber child1 und child2 sollen abhängig sein von Zugriffsregeln, ein Benutzer sieht nur die Links, die er auch sehen darf.(Das menu wird mit php zusammen gebaut).

Und deswegen Ajax, weil warum immer das ganze Menu bauen, ständig alle Zugriffsregeln prüfen, wenn ich diese doch eigentlich nur dann prüfen brauche, wenn das jeweilige Root-Menu auch aufgeklappt wird?

 

[Lawnmower]

Dropdown-Menü fixfertig: http://jqueryui.com/menu/

Das ist nur ne verschachtelte ul Liste die da umgestaltet wird, musst dann einfach noch die entsprechenden li Einträge mit Schema onclick="loadSubMenu(this)" (o.ä.) ausstatten und für Ajax kannst ajax() (Menü nachladen) und append() (nachgeladene Daten an bestehende Menüstruktur anhängen) vom jquery Framework verwenden das Du für UI sowiso benötigst. Checkboxen und Co solltest da auch reinkriegen da im Prinzip nur ne ul Liste.

 

[Daaron]

Und deswegen Ajax, weil warum immer das ganze Menu bauen, ständig alle Zugriffsregeln prüfen, wenn ich diese doch eigentlich nur dann prüfen brauche, wenn das jeweilige Root-Menu auch aufgeklappt wird?

Weil es performanter ist? AJAX hängt immer am Request-Response - Modell, du erzeugst Unmengen an Overhead, sowohl beim Client als auch beim Server.
Für dein PHP-Script ist es (wenn du sauber gearbeitet hast) eine Kleinigkeit, das vollständige Menü in Abhängigkeit der User-Rechte aufzubauen.

Außerdem hast du auch User, die gar nicht eingeloggt sind, und die sicher auch in den einen oder anderen Unterpunkt sollen. Dazu gehören insbesondere Suchmaschinen... und die sprechen kein JS.
Dein Plan mit der AJAX-Navigation ist nicht barrierefrei, SEO-technischer Selbstmord und im Endeffekt für alle beteiligten langsamer als eine rein serverseitige Lösung mit etwas CSS-Magie.

 

[lordfritte]

Also das mit den nicht eingeloggten User ist kein Problem, es gibt einen default Gast-Konto, denen werden diese Benutzer automatisch zugeordnet.

Aber ich werde mir dann mal superfish anschauen.

 

[Daaron]

Also gibt es ja doch "nicht eingeloggte" User. Ob du die jetzt in ne Gast-Gruppe wirst spielt keine Rolle.
Bau deine Navigation serverseitig in Abhängigkeit der Berechtigungen auf, anstatt 1001 AJAX-Event zu feuern und endlos viel Overhead zu erzeugen. Dann brauchst du auch kein Superfish (das dir da eh nicht weiter hilft), denn das ist nix anderes als ne CSS-Navi mit Touch-Support

 

[lordfritte]

Aber nur CSS wie geht das denn? ich habe bisher solche Navis nur mit CSS und JS(jQuery) gesehen.

 

[Hancock]

http://de.selfhtml.org/css/layouts/anzeige/nav_modern.htm
Wenn man es mal verstanden hat, echt nicht so kompliziert.

 

[Daaron]

Kurz und knapp:
ul ul {display:none;}
li:hover ul {display:block;}

Man kann das natürlich auch weiter ausführen. Indem man statt mit display:none; mit animierbaren Attributen wie Position und Opacity arbeitet kann man sehr geile Navigationen in reinem CSS3 bauen.