Anzeige
Anzeige
E-Commerce
Artikel merken

Die Mutter aller Dropdown-Menüs: Warum Amazons Menü so schnell ist

Rasend schnell, präzise und trotz schierer Informationsmengen übersichtlich: Das ist das Dropdown-Menü der Amazon-Seiten. Heute zeigen wir euch, wie ihr ein ähnliches Navigationsmenü selbst bauen könnt.

Von Mario Janschitz
3 Min. Lesezeit
Anzeige
Anzeige

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?

Nicht das :hover-Event ist entscheidend, sondern die Bewegungsrichtung der Maus

Anzeige
Anzeige

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.

Anzeige
Anzeige

Die Theorie hinter diesem Dropdown-Menü

Quelle: Screenshot Amazon.de (Montage)

Alle Bewegungen innerhalb des grünen Dreiecks lassen den Schluss zu, dass der User in dieses Sub-Menü wechseln will. (Bild: Screenshot Amazon.de/Montage)

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.

Anzeige
Anzeige

Wie könnt ihr dieses Plugin nutzen?

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:

Anzeige
Anzeige
.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?

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
12 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Andreas Becker

Bisher wurden von mir immer nur ein „Pure-CSS-Dropdwon-Menu“ verwendet. Mittlerweile werden aber in den Menüs nicht nur die Links zu den Seiten abgebildet, sondern auch weitere Infos (Stichwort „Megadropdown“)… und da sich diese in den meisten Fällen nur mit JS lösen lassen, ist das angesprochene jQuery-Plugin natürlich gold wert. Danke für die Infos :-)

Antworten
dotfly

Das ist wirklich eine tolle Idee. Mega-Drop-Downs oder Fly-Outs leiden viel zu oft unter der umständlichen und unkomfortablen Bedienung.
Oft werden zudem noch optische Effekte, Slides und Animationen genutzt, die die Bedienung zum Horror werden lassen. Diese Umsetzung ist wirklich genial und findet hoffentlich viele Nachahmer – wir werden uns das auf jeden Fall einmal näher ansehen!

Antworten
marc.tissler

Auf jeden Fall eine sehr clevere Idee! Danke für den Tipp, lässt sich sicherlich auch auf andere Situationen übertragen. Frag mich nur wie es das macht? Ist dort nen handler an das mousemove event gekoppelt? meiner erfahrung nach macht dieses eine webapp schnell langsam, weil es nahezu durchgehend feuert :-/

Klar amazon ist schnell, aber was wenn man das in verbindung mit vielen anderen einsetzt?

Antworten
Mario Janschitz

Hi @dotfly
Für viele Nachahmer bitte sharen ;)

@Marc.tissler
Es wird nur gefeuert, sollte sich der Maus-Cursor, getriggert durch ein Eltern-Element, in Richtung (also innerhalb des Dreiecks) des Sub-Menüs bewegen :)

Schön, dass ich euch weiterhelfen konnte!

Antworten
Alexander Vey

Wirklich ziemlich clever die Lösung und mal wieder ein Beleg dafür, dass es auf die Details ankommt, wenn es um die Optimierung von User Experience geht. Dinge, bei denen sich „Otto-Normalverbraucher“ keine Gedanken drum macht, weil es einfach einwandfrei funktioniert. Daumen Hoch an die Jungs von Amazon oder wer auch immer auf diese Technik gekommen ist und danke t3n für den Artikel und Hinweis darauf.

Antworten
Ben Mueller

Clever, sehr clever! Danke für den Tipp. Ich hatte mir zwar vorher darüber noch nie Gedanken gemacht, aber nun merke ich plötzlich dass ich das auch „brauche“…

Antworten
Johanna

Finde die Idee auch sehr gut. Allerdings finde ich wiederum etwas schade, dass das Klicken vollkommen an Bedeutung verloren hat. Um zum Beispiel anzuzeigen, dass man sich doch für etwas entscheiden hat. Eine gute Idee finde ich hier die Lösung von dieser Website: http://www.flyacts.com
bei der das Dropdown Menü offen bleibt, sobald man es angeklickt hat. Eine Kombination aus beiden wäre wohl nahezu perfekt.

Antworten
Marcus Graf

Also der Artikel ist mal wieder gut geschrieben, aber neuerdings neigt ihr dazu Überschriften fast 1 zu 1 aus dem Englischen zu übernehmen und sowas wie „Die Mutter aller Dropdowns“ liest sich zwar im Englischen gut, im Deutschen allerdings eher weniger.

Antworten
Florian Blaschke

Was genau spricht für Dich gegen die Überschrift, Marcus?

Antworten
Marcus Graf

Ist rein Subjektiv, aber der Titel wirkt einfach so zwanghaft 1 zu 1 übersetzt :)

Antworten
Danny

@Johanna? Schleichwerbung? ;)

Finde die Lösung von Amazon ziemlich clever und sollte doch bestimmt auch woanders Anwendung finden. Zumindest bietet es einen Anstoß neue Techniken zur Optimierung zu entwickeln.

Antworten
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige