Dropdown-Navigation mit 4 Ebenen

Ich muss ein vorgegebenes Layout umsetzen, das auf ein Dropdown-Menü mit 4 Leveln setzt. MenuMatic, Suckerfish und Co. steigen da anscheinend alle schon vorher aus. Kennt jemand ein 4-Level Dropdown-Menü das mit Contao funktioniert (bitte ohne jquery) und auch recht browserkompatibel ist?

Ich trage hier meine Ergebnisse ein, falls auch mal andere Nutzer sowas suchen.
Aus Usability-Sicht ist von so stark verschachtelten Dropdown-Menüs übrigens abzuraten, da sie für viele Leute schlecht bedienbar sind.

Bisher habe ich nur dieses 5-Level CSS-Menü von Stu Nicholls gefunden. Da müsste ich aber erstmal nachhaken was seine Bedingungen für den Einsatz auf einer komerziellen Website sind.

// Nachtrag:
Diese CSS Multilevel-Navigation von Webdesignerwall (nur CSS-Demo) hier sieht auch vielversprechend aus.

Hm, das wundert mich allerdings. Ich verwende in meinem akt. Projekt für das horizontale Dropdown MenuMatic und es stellt anscheinend beliebig viele Sublevel dar, soweit je nach Position des Hauptpunkts dafür genügend Platz im Viewport vorhanden ist. Also eben die Seitenstruktur wie sie ist, sofern man die Zahl der mögl. Level nicht begrenzt.

Weil ich die Usability zuvieler Subebenen bei einem Dropdown auch eher bescheiden finde, schachtele ich natürlich nur im Ausnahmefall so tief - doch zum Testen hab ich an einer Stelle der Seitenstruktur sogar 5 Ebenen angelegt. Die werden von MenuMatic alle korrekt angezeigt. Falls Du es bezweifelst, kann ich einen Screenshot davon posten. Kann es vielleicht sein, dass Du versehentlich einen Stoplevel eingezogen hast? Ich denke mir jedenfalls, dass evtl. ein Konfigurationsfehler vorliegt. Welchen Grund sollte es denn sonst haben, nicht beliebig viele Level anzeigen zu können. Das kann doch eigentlich auch eine ganz normale CSS-Navi, oder?

Oder hab ich vielleicht irgendwas an dem Problem falsch verstanden?

Hallo Nina,

wie schon gesagt ist das mit MenuMatic problemlos machbar. Hier findest du eine Anleitung dazu: http://de.contaowiki.org/Navigation#...3.BC_MenuMatic
Allerdings habe ich erst vor kurzen in einem Projekt das Problem gehabt, dass die Nutzer einfach zu "nervös" über die Navigation wischen, sodass MenuMatic bei mehr als 2 Ebenen schnell statt der erhofften Funktionalität für viel Frust sorgte. Mehr als 2 Unterebenen würde ich dir auf keinen Fall empfehlen.

Hi Nina,

die Isotope-Demoinstallation (die ich Dir vor ein paar Tagen als C2G geschickt habe) hat sowas drin. Aufgeteilt in Standard-CSS für die Funktionalität und andere für's Layout. Damit kannst Du sogar festlegen, dass z.B. die 3. Ebene nicht nach rechts, sondern nach links ausklappen soll - wenn der Platz mit 4,5,6,7,8 Ebenen dann doch etwas knapp wird :D .

Grüße,

Christian

Zitat:

---

Zitat von Nils Riel

Allerdings habe ich erst vor kurzen in einem Projekt das Problem gehabt, dass die Nutzer einfach zu "nervös" über die Navigation wischen, sodass MenuMatic bei mehr als 2 Ebenen schnell statt der erhofften Funktionalität für viel Frust sorgte.

---

Stimmt, in der Standardeinstellung ist das sehr lästig, weil die Submenüboxen sofort wieder schließen, sobald der Mauszeiger aus dem Fokus gerät. Man kann aber im JS von MenuMatic den Verzögerungswert ändern. Hab nicht mehr in Erinnerung, welcher Parameter das ist - allerdings leicht zu finden. Mit einem Wert, der einer Verzögerung von ca. 1,5 Sek. entspricht, ist dieses Problem beseitigt. Das die Boxen beim "Drüberwischen" verschwinden, liegt ja daran, dass man keine Lust hat, mit der Maus um die Ecken zu fahren, sondern den Mauszeiger oft diagonal über die Boxen zieht und dadurch kurz den Fokus verliert, bevor der Mauszeiger in der Zielbox angelangt ist, oder halt, wenn man mal daneben rutscht. Mit der Verzögerung passiert das nicht mehr, und dass das Menu noch einen kurzen Augenblick stehenbleibt, wenn es der Mauszeiger verlässt, stört nicht im Geringsten. Normalerweise klickt man ja auf einen Navipunkt, um einen neuen Inhalt zu laden und das braucht ebenfalls einen Moment.

Aber okay, ich bin diesbezüglich sowieso eher puristisch orientiert und sehe z. B. keinen Sinn darin, den Verzögerungswert bis zur Unbrauchbarkeit runterzusetzen, stattdessen aber die Reaktionszeit der Container mit Fadingspielereien zu verlängern. Für schlechte Bedienbarkeit kann mich auch kein optischer Reiz entschädigen.

Hallo Nina,

ich benutze MenuMatic auf meiner Seite, allerdings nur bis zur 2. Ebene. Habe es testweise bis zur 4. Ebene ausgebaut und es funktioniert.

Grüße
varix

Zitat:

---

Zitat von Nils Riel

Allerdings habe ich erst vor kurzen in einem Projekt das Problem gehabt, dass die Nutzer einfach zu "nervös" über die Navigation wischen, sodass MenuMatic bei mehr als 2 Ebenen schnell statt der erhofften Funktionalität für viel Frust sorgte. Mehr als 2 Unterebenen würde ich dir auf keinen Fall empfehlen.

---

Ja, in der Standardeinstellung ist das sehr lästig, weil die Submenüboxen sofort wieder schließen, sobald der Mauszeiger aus dem Fokus gerät. Man kann aber im JS von MenuMatic den Verzögerungswert ändern. Hab nicht mehr in Erinnerung, welcher Parameter das ist - allerdings leicht zu finden. Mit einem Wert, der einer Verzögerung von ca. 1,5 Sek. entspricht, ist dieses Problem beseitigt. Das die Boxen beim "Drüberwischen" verschwinden, liegt ja daran, dass man keine Lust hat, mit der Maus um die Ecken zu fahren, sondern den Mauszeiger oft diagonal über die Boxen zieht und dadurch kurz den Fokus verliert, bevor der Mauszeiger in der Zielbox angelangt ist, oder halt, wenn man mal daneben rutscht. Mit der Verzögerung passiert das nicht mehr, und dass das Menu noch einen kurzen Augenblick stehenbleibt, wenn es der Mauszeiger verlässt, stört nicht im Geringsten. Normalerweise klickt man ja auf einen Navipunkt, um einen neuen Inhalt zu laden und das braucht ebenfalls einen Moment.

Aber okay, ich bin diesbezüglich sowieso eher puristisch orientiert und sehe z. B. keinen Sinn darin, den Verzögerungswert bis zur Unbrauchbarkeit runterzusetzen, stattdessen aber die Reaktionszeit der Container mit Fadingspielereien zu verlängern. Für schlechte Bedienbarkeit kann mich auch kein optischer Reiz entschädigen.

Danke für den Hinweis, dass MenuMatic doch auch tiefere Levels mitmacht. Da ich selbst nie tiefer als zum 2. Level gegangen bin und auch die Demo es nicht tiefer zeigt, ging ich fälschlicherweise davon aus, dass es auch nicht tiefer geht :D

@Nils: Wie ich schon in meinem Eingangsbeitrag geschrieben habe, finde ich auch, dass ein Dropdown mit so vielen Ebenen mies ist. Aber in dem Fall ist es eine reine Auftragsarbeit, bei der ich in Bezug auf Usability nix zu sagen habe ;)