Abo
  • Services:
Anzeige
Bessere Dropdown-Menüs fürs Web
Bessere Dropdown-Menüs fürs Web (Bild: Ben Kamens)

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

Bessere Dropdown-Menüs fürs Web
Bessere Dropdown-Menüs fürs Web (Bild: Ben Kamens)

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.

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.

Anzeige

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.


eye home zur Startseite
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ü...


Technologie4web / 03. Apr 2013



Anzeige

Stellenmarkt
  1. BG-Phoenics GmbH, Hannover
  2. über JobLeads GmbH, Berlin
  3. Sonntag & Partner Partnerschaftsgesellschaft mbB, Augsburg
  4. Bundeskriminalamt, Wiesbaden


Anzeige
Hardware-Angebote
  1. (täglich neue Deals)
  2. täglich neue Deals
  3. und bis zu 60€ Steam-Guthaben erhalten

Folgen Sie uns
       


  1. ZTE

    Chinas großes 5G-Testprojekt läuft weiter

  2. Ubisoft

    Far Cry 5 bietet Kampf gegen Sekte in und über Montana

  3. Rockstar Games

    Waffenschiebereien in GTA 5

  4. Browser-Games

    Unreal Engine 4.16 unterstützt Wasm und WebGL 2.0

  5. Hasskommentare

    Bundesrat fordert zahlreiche Änderungen an Maas-Gesetz

  6. GVFS

    Windows-Team nutzt fast vollständig Git

  7. Netzneutralität

    Verbraucherschützer wollen Verbot von Stream On der Telekom

  8. Wahlprogramm

    SPD fordert Anzeigepflicht für "relevante Inhalte" im Netz

  9. Funkfrequenzen

    Bundesnetzagentur und Alibaba wollen Produkte sperren

  10. Elektromobilität

    Qualcomm lädt E-Autos während der Fahrt auf



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Tado im Langzeittest: Am Ende der Heizperiode
Tado im Langzeittest
Am Ende der Heizperiode
  1. Speedport Smart Telekom bringt Smart-Home-Funktionen auf den Speedport
  2. Tapdo Das Smart Home mit Fingerabdrücken steuern
  3. Mehr Möbel als Gadget Eine Holzfernbedienung für das Smart Home

Blackberry Keyone im Test: Tolles Tastatur-Smartphone hat zu kurze Akkulaufzeit
Blackberry Keyone im Test
Tolles Tastatur-Smartphone hat zu kurze Akkulaufzeit
  1. Blackberry Keyone kommt Mitte Mai
  2. Keyone Blackberrys neues Tastatur-Smartphone kommt später
  3. Blackberry Keyone im Hands on Android-Smartphone mit toller Hardware-Tastatur

The Surge im Test: Frust und Feiern in der Zukunft
The Surge im Test
Frust und Feiern in der Zukunft
  1. Computerspiele und Psyche Wie Computerspieler zu Süchtigen erklärt werden sollen
  2. Wirtschaftssimulation Pizza Connection 3 wird gebacken
  3. Mobile-Games-Auslese Untote Rundfahrt und mobiles Seemannsgarn

  1. Re: Zwei Fragen fallen mir dazu ein

    Strongground | 22:54

  2. Re: Diese ganzen Online DLCs nerven langsam!

    WalterWhite | 22:34

  3. Re: Deutschland

    Prinzeumel | 22:33

  4. Re: Induktionsladung = schlechter Wirkungsgrad

    fg (Golem.de) | 22:24

  5. Der Beitrag von Rohde & Schwarz...

    alf0815 | 22:24


  1. 17:40

  2. 16:40

  3. 16:29

  4. 16:27

  5. 15:15

  6. 13:35

  7. 13:17

  8. 13:05


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel