Ein benutzungsfreundliches Megadropdown mit dem JQuery Plugin dcmegamenu

Megadropdown-Navigations-Menüs sind sehr beliebt für Hauptnavigationen. Sie geben einen guten Überblick über den Inhalt einer Webseite, ohne dass man in einzelne Bereiche der Webseite gehen muss. Probleme kann es geben, wenn man die Maus diagonal bewegen muss wie es Jakob Nielsen in einem Artikel erwähnt hat. Ein spezielles JQuery Plugin kann diese Probleme verhindern.

Beispiel-Megadropdown von der Seite actionenvelope.com
Beispiel-Megadropdown von der Webseite actionenvelope.com

Problem

Dieses Animierte GIF zeigt das Problem auf:

Problem: Wenn man über einen nebenstehenden Navigationspunkt fährt verschwindet das Dropdown.
Problem: Wenn man über einen nebenstehenden Navigationspunkt fährt verschwindet das Dropdown. (Beispiel von foodnetwork.com)

 

Lösung

Ein gutes JQuery Plugin, welches dieses Problem löst ist das  „Jquery Mega Drop Down Menu Plugin“ von Design Chemical (dcmegamenu).

Dieses Animierte GIF zeigt auf wie sich das Megadropdown verhält:

Lösung: Das Plugin verhindert, dass das Dropdown verschwindet wenn man über einen nebenstehenden Navigationspunkt fährt.
Lösung: Das Plugin verhindert, dass das Dropdown verschwindet wenn man über einen nebenstehenden Navigationspunkt fährt.

 

Link zum „Jquery Mega Drop Down Menu Plugin“ von Design Chemical: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/
Link zu einer Beispiel-Seite wo man das Plugin ausprobieren kann: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

Kennen Sie weitere Plugins um benutzbare Megadropdown Navigationen zu erzeugen? Schreiben Sie einen Kommentar!

Andreas Bossard

7 Kommentare zu “Ein benutzungsfreundliches Megadropdown mit dem JQuery Plugin dcmegamenu

  1. Salut.

    Vielleicht habe ich so früh am Morgen noch Tomaten auf den Augen, aber ich suche den Link zu einer Beispielseite, wo das Plugin bereits in Verwendung ist. Würde das Verhalten gern mal vor allem auf einem Touch Device ausprobieren.

    Arbeitet das Plugin mit onclick oder MouseOver? Barrierefrei sollte es ja sein, da es HTML-Listen-basiert ist.

    Danke für Feedback.

  2. Hallo @Achtr

    Danke für dein Feedback.

    Es ging uns gleich wie dir. Auf der Seite von Design Chemical findet man sich nicht so einfach zurecht.
    Hier ist die Beispiel-Seite des Plugins: http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/
    Ich habe diesen Link auf noch im Artikel oben hinzugefügt.

    onlick oder Mouseover: Die in diesem Artikel besprochenen Probleme treten nur bei Mouseover-Megadropdowns auf, nicht bei onclick-Dropdowns.

  3. Danke für den Link.

    Cool übrigens, dass sich endlich mal jemand dieser Problematik angenommen hat – mich nervt es auch immer, wenn ich die „Grenze“ überschreite mit dem Mauszeiger und dann sofort alles weg ist, was ich noch sehen wollte.

    Grenzüberschreitungen – da sind wir Berliner ja Fan von.

    Aber auf Touch Devices ist der ganze Spass vollkommen zweckfrei. Ist er dann überhaupt noch relevant?

  4. Danke für deinen Input.

    Auch wir haben uns gefreut diesen Blog-Artikel zu publizieren. Wir finden man muss nicht nur auf die Problematik hinweisen (wie im Artikel von Jakob Nielsen), sondern auch eine Lösung aufzeigen. Das Plugin ist vorhanden. Je mehr Frontend-Entwickler davon wissen, umso besser.

    Genau, das beschriebene „Diagonale Problem“ ist kein Problem auf Touch-Devices, da man dort ein onClick-Megadropdown machen muss.

    Aber auch wenn man Mobile First macht und auf Touch Devices ein onClick-Megadropdown hat, kann es trotzdem Sinn machen auf der Desktop-Variante daraus ein Mouseover-Megadropdown zu machen. Wenn man nur drüberfahren muss mit der Maus (und nicht klicken muss) kann man sich schneller eine Übersicht über die Unternavigationspunkte verschaffen.

    Von dem her wird es weiterhin wichtig und relevant sein darauf zu achten, dass wenn man ein Mouseover-Megadropdown einsetzt, dieses auch benutzungsfreundlich ist.

  5. Hallo „Stiftung Zugang für alle“
    Vielen Dank für den Input! Welches Plugin wäre geeigneter für Screenreader und Tastaturanwender?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.