Abo
  • Services:

Vorbild Amazon: Dropdown-Menüs fürs Web, wie sie sein sollten

Aufklappende Untermenüs in Webseiten sind oft langsam oder verlangen eine sehr präzise Mausführung. Ben Kamens hat eine clevere Idee von Amazon aufgegriffen und ein jQuery-Plugin daraus gemacht, um das zu ändern.

Artikel veröffentlicht am ,
Bessere Dropdown-Menüs fürs Web
Bessere Dropdown-Menüs fürs Web (Bild: Ben Kamens)

Ben Kamen, Chefentwickler der Khan Academy, hat mit jQuery-menu-aim ein jQuery-Plugin für Dropdown-Menüs mit Untermenüs entwickelt, das unterscheiden kann, ob ein Nutzer den nächsten Kategoriepunkt oder einen Link im danebenliegenden Untermenü ansteuern will. Auf die Idee brachte ihn Amazon, dessen großes Kategorie-Menü besser funktioniert als die meisten Dropdown-Menüs im Web.

Stellenmarkt
  1. Controlware GmbH, Meerbusch
  2. Controlware GmbH, Meerbusch bei Düsseldorf

Das Problem: Je nachdem, über welchem Menüpunkt gerade der Mauszeiger ist, wird daneben ein anderes Untermenü angezeigt, das seinerseits mehrere Punkte enthält. Will der Nutzer nun einen dieser Menüpunkte aufrufen und nimmt mit der Maus den direkten Weg, berührt der Mauszeiger oft zwischendurch eine andere Kategorie und das Untermenü ändert sich. Der Nutzer ist also gezwungen, den Mauszeiger horizontal ins Untermenü zu bewegen und dann vertikal zum gewünschten Menüpunkt.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, zwischen den Untermenüs nur mit einer Zeitverzögerung umzuschalten. Fährt der Nutzer dann versehentlich über eine andere Kategorie, erreicht aber vor Ablauf der gegeben Zeit das jeweilige Untermenü, wird die Kategorie und damit auch das Untermenü nicht gewechselt.

In welche Richtung bewegt sich die Maus?

Eine solche Zeitverzögerung vereinfacht es zwar deutlich, einzelne Punkte im Untermenü anzusteuern, macht das gesamte Dropdown-Menü aber langsam.

Amazon macht das in seinem Kategorien-Menü besser: Hier wird schnell umgeschaltet, wenn der Nutzer mit der Maus vertikal über die Kategorien fährt. Steuert er aber einen Punkt in dem danebenliegenden Untermenü an, wechselt die Kategorie nicht, auch wenn der Mauszeiger zwischendurch über eine andere Kategorie fährt.

Dieses Verhalten hat Kamens so fasziniert, dass er sich die Funktionsweise von Amazons Menü genauer angesehen und letztendlich übernommen hat: Amazon und so auch Kamens jQuery-Plugin erkennen, in welche Richtung die Maus bewegt wird. Findet die Bewegung im Dreieck zwischen dem Ausgangspunkt des Mauszeigers und der rechten oberen und rechten unteren Ecke des Hauptmenüs statt, wird nur verzögert umgeschaltet, da der Nutzer vermutlich einen Punkt im Untermenü ansteuert. Bei Bewegungen außerhalb dieses Dreiecks wird sofort reagiert.

So entsteht ein Menü, das sehr schnell reagiert, aber einfach zu benutzen ist. Kamens nutzt es im "Lern-Menü" der Khan-Academy-Website. Das dafür entwickelte jQuery Plugin "jQuery-menu-aim" hat Kames auf Github als Open Source unter der MIT-Lizenz veröffentlicht.



Anzeige
Top-Angebote
  1. 389€ (Vergleichspreis 488€)
  2. 99,99€ + USK-18-Versand (Die Bestellbarkeit könnte sich jederzeit ändern bzw. kurzfristig...
  3. 587,37€ für Prime-Mitglieder (Vergleichspreis 696,11€)
  4. 529€ (Bestpreis!) - Das Galaxy Tab E erhalten Sie im Rahmen der Superdeals-Aktion von Samsung.

redmord 11. Mär 2013

Ja, man muss auch immer sehen wie die strukturelle Trennung sinnvoll ist. Natürlich kann...

redmord 09. Mär 2013

Einige Funktionen werden sehr häufig benutzt. Im Grunde ist es ja auch nur eine Sammlung...

RcRaCk2k 08. Mär 2013

Genial, dass es solch einen Beitrag gibt und man darüber diskutiert ;) Für mich ist das...

meshuggah 08. Mär 2013

Also mir war es nicht bewusst / kannte es nicht, daher habe ich es mir bei Amazon mal...

cry88 08. Mär 2013

mit chrome geht das relativ gut, man muss halt gedrückt halten damit das kontextmenü...


Folgen Sie uns
       


Sony Xperia XZ3 - Hands on (Ifa 2018)

Das neue Xperia XZ3 von Sony kommt mit Oberklasse-Hardware und interessanten Funktionen, die dem Nutzer den Alltag erleichtern können. Außerdem hat das Gerät einen OLED-Bildschirm, eine Premiere bei einem Smartphone von Sony.

Sony Xperia XZ3 - Hands on (Ifa 2018) Video aufrufen
Grafikkarten: Das kann Nvidias Turing-Architektur
Grafikkarten
Das kann Nvidias Turing-Architektur

Zwei Jahre nach Pascal folgt Turing: Die GPU-Architektur führt Tensor-Cores und RT-Kerne für Spieler ein. Die Geforce RTX haben mächtige Shader-Einheiten, große Caches sowie GDDR6-Videospeicher für Raytracing, für Deep-Learning-Kantenglättung und für mehr Leistung.
Ein Bericht von Marc Sauter

  1. Tesla T4 Nvidia bringt Googles Cloud auf Turing
  2. Battlefield 5 mit Raytracing Wenn sich der Gegner in unserem Rücken spiegelt
  3. Nvidia Turing Geforce RTX 2080 rechnet 50 Prozent schneller

iOS 12 im Test: Auch Apple will es Nutzern leichter machen
iOS 12 im Test
Auch Apple will es Nutzern leichter machen

Apple setzt mit iOS 12 weniger auf aufsehenerregende Funktionen als auf viele kleine Verbesserungen für den Alltag. Das erinnert an Google und Android 9, was nicht zwingend schlecht ist.
Ein Test von Tobias Költzsch

  1. Apple iOS 12.1 verrät neues iPad Pro
  2. Apple Siri-Kurzbefehle-App für iOS 12 verfügbar

Lenovo Thinkpad T480s im Test: Das trotzdem beste Business-Notebook
Lenovo Thinkpad T480s im Test
Das trotzdem beste Business-Notebook

Mit dem Thinkpad T480s verkauft Lenovo ein exzellentes 14-Zoll-Business-Notebook. Anschlüsse und Eingabegeräte überzeugen uns - leider ist aber die CPU konservativ eingestellt und ein gutes Display kostet extra.
Ein Test von Marc Sauter und Sebastian Grüner

  1. Thinkpad E480/E485 im Test AMD gegen Intel in Lenovos 14-Zoll-Notebook
  2. Lenovo Das Thinkpad P1 ist das X1 Carbon als Workstation
  3. Thinkpad Ultra Docking Station im Test Das USB-Typ-C-Dock mit robuster Mechanik

    •  /