Dropdown-Menüs sind nicht immer einfach zu benutzen. Bewegt man die Maus von einem Hauptelement des Dropdown-Menüs weg, schließt sich im schlimmsten Fall das Sub-Menü wieder, und als User muss man noch mal die gleiche Interaktion durchführen. Der gängige Vorgang, um dieses Problem zu verhindern ist, eine Verzögerung des Schließvorgangs einzubauen, damit der User auch Zeit hat, um in das Untermenü wechseln zu können. Aber diese Verzögerung verhindert auch ein unglaublich schnelles „Aufploppen“ und Anzeigen eines Sub-Menüs. Wie hat Amazon also dieses Problem gelöst?

Wenn wir ein Dropdown-Menü bedienen, kann es passieren, dass wir beim Wechseln in das Sub-Menü ungewollt ein weiteres Eltern-Element berühren, was wiederum dazu führt, dass sich ein anderes Sub-Menü öffnet. Ärgerlich. Die oben angesprochene Verzögerung kann so etwas verhindern, aber das Geheimnis liegt nicht im :hover-Event. Stattdessen gilt es herauszufinden, wohin sich der Maus-Cursor bewegen wird.

Das Plugin jQuery-menu-aim kann genau das. Dieses Plugin kann zwischen einem User, der über das Dropdown-Menü fährt, und einem User, der zu einem Untermenü möchte, unterscheiden. Durch diese Fähigkeit kann auf eine Verzögerung gänzlich verzichtet werden, da das Plugin die Richtung der Mausbewegung entsprechend erfassen und auswerten kann.

Die Funktionsweise ist in der Theorie denkbar einfach: Sobald ein Dropdown-Menü-Element von der Maus erfasst ist, wird ein Dreieck zwischen dem berührten Dropdown-Element und der oberen und unteren Ecke des Sub-Menüs aufgezogen. Bewegt sich die Maus jetzt innerhalb diesen Dreiecks weiter, bleibt das Sub-Menü offen, denn die Bewegungsrichtung der Maus lässt den Schluss zu, dass sich die Maus mit Sicherheit in Richtung Sub-Menü bewegen wird. Sollte sich die Maus jedoch von diesem Dreieck weg bewegen, steht fest, dass der User ein weiteres Dropdown-Element berühren möchte.

Um also in den Genuss einer ähnliche Funktionalität wie der des Amazon-Dropdown-Menüs zu kommen, müsst ihr jQuery-menu-aim mit folgendem Code initialisieren:

$("#menu").menuAim({
     activate: $.noop,  // fired on row activation
     deactivate: $.noop  // fired on row deactivation
 });

Das jQuery-Plugin stellt euch auch einige optionale Parameter zur Verfügung, die euch das Verhalten genauer bestimmen lassen:

.menuAim({
     // Function to call when a row is purposefully activated. Use this
     // to show a submenu's content for the activated row.
     activate: function() {},

     // Function to call when a row is deactivated.
     deactivate: function() {},

     // Function to call when mouse enters a menu row. Entering a row
     // does not mean the row has been activated, as the user may be
     // mousing over to a submenu.
     enter: function() {},

     // Function to call when mouse exits a menu row.
     exit: function() {},

     // Function to call when mouse exits the entire menu. If this returns
     // true, the current row's deactivation event and callback function
     // will be fired. Otherwise, if this isn't supplied or it returns
     // false, the currently activated row will stay activated when the
     // mouse leaves the menu entirely.
     exitMenu: function() {},

     // Selector for identifying which elements in the menu are rows
     // that can trigger the above events. Defaults to "> li".
     rowSelector: "> li",

     // You may have some menu rows that aren't submenus and therefore
     // shouldn't ever need to "activate." If so, filter submenu rows w/
     // this selector. Defaults to "*" (all elements).
     submenuSelector: "*",

     // Direction the submenu opens relative to the main menu. This
     // controls which direction is "forgiving" as the user moves their
     // cursor from the main menu into the submenu. Can be one of "right",
     // "left", "above", or "below". Defaults to "right".
     submenuDirection: "right"
 });

Das Plugin gibt euch auch die Möglichkeit, die Richtung des aufgehenden Sub-Menüs zu bestimmen. Mit submenuDirection könnt ihr zwischen „links“, „darüber“, „darunter“ oder „rechts“ entscheiden.

Im Test verhielt sich das Plugin wie beschrieben, die Dropdown-Demo gibt euch einen guten Überblick über seine Funktionalität. Wenn ihr nach einem Weg sucht, euer Dropdown-Menü zu optimieren, seid ihr bei jQuey-menu-aim richtig. Sucht ihr aber nach einem Plugin, das ein Dropdown-Menü „Out of the box“ liefert, werdet ihr mit diesem Plugin kaum glücklich werden. In diesem Fall hilft euch vielleicht der Artikel „10 Dropdown Menus mit CSS3 und HTML5 inkl. Tutorials“ weiter.

Verwendet ihr Dropdown-Menüs in euren Projekten? Und wenn ja: Wie habt ihr sie gelöst?