Beim Nutzen von Dropdown Menüs kennt man die Situation: Kurz bevor man zum gewünschten Subelement kommt, streift man noch versehentlich ein falsches Parentelement und das falsche Submenü geht auf. Mit CSS kann man dies natürlich einschränken, indem man eine Verzögerung einbaut, damit auch wirklich das richtige Subelement ausgewählt wird.
Aber mit dieser Verzögerung geht das schnelle Aufpoppen und Anzeigen des Submenüs verloren.
Jetzt stellt sich natürlich die Frage, wie bekommen es die Usabillity Überflieger von bspw. Amazon hin ?
Dieser Screenshot stammt von Amazon.de
Betrachtet man dort bspw. das “Alle Kategorien”-Drop Down, und man lässt die Maus durch das Menü gleiten, aktualisiert sich das Sub Menü in sekundenschnelle.
Also wie macht das Amazon ?
Offensichtlich verwendet Amazon keine Verzögerung im :hover-Event. Der Trick bei der Sache liegt nicht dabei festzustellen, wo der Cursor sich momentan befindet, sondern herauszufinden in welche Richtung er sich wahrscheinlich bewegen wird.
Hierzu gibt es ein JQuery-Plugin namens menu-aim. Das Plugin kann unterscheiden, ob ein User durch das Parentmenü einfach nur durch fährt oder ob der User zu einem Submenü navigieren möchte.
Die Theorie dahinter ist denkbar simpel: Wird ein Element im Parentmenü erfasst, wird ein Dreieck zwischen dem ausgewähltem Element im Parentmenü und der oberen und unteren Ecke des Submenüs aufgespannt.
Das sieht dann ungefähr so aus:
Dieser Screenshot stammt von Amazon.de
Bewegt der Nutzer jetzt den Cursor in das Dreieck hinein, bleibt das Submenü aktiv, denn die Bewegungsrichtung läst darauf schließe, dass das Submenü anvisiert wird.
Bewegt sich der User nach unten, um beispielsweise ein anderes Parentmenü auszuwählen, wird das Submenü ersetzt.
Dadurch kommt das Menü ganz ohne jede Verzögerung aus.
Um das Menü zu verwenden, muss das jQuery-menu-aim mit folgendem Code initialisieren:
| $("#menu").menuAim({ activate: $.noop, // fired on row activation deactivate: $.noop // fired on row deactivation }); |
Außerdem gibt auch zahlreiche optinale Parameter die 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" }); |
Wenn Sie es selbst einmal ausprobieren möchten können Sie das hier machen: Link
Viel Spaß beim Coden
Author: Andreas Enk
Keine Kommentare:
Kommentar veröffentlichen