Mauszeiger-Bewegung in Dropdown-Menüs – so kann das ungewollte Einklappen minimiert werden
Kommentare

Dropdown-Menüs werden in zahlreichen Navigationen genutzt, um möglichst viele Navigationselemente unterzubringen, ohne den User bei der Betrachtung des Website-Contents allzu sehr zu beeinträchtigen. Allerdings sorgt so manches Dropdown-Menü beim User vor allem für Frustration, wenn das aufgeklappte Menü ständig verschwindet, weil man mit der Maus unbeabsichtigt zu weit abgedriftet ist.

CSS bietet einige Möglichkeiten, wie sich der Mauspfad bei Dropdown-Menüs anpassen lässt, um dem User die Bedienung zu vereinfachen. Chris Coyier zeigt in seinem Artikel Dropdown Menus with More Forgiving Mouse Movement Paths, welche das sind.

Dropdown-Menü mit Pseudo-Elementen erweitern

Das Hauptproblem vieler Dropdown-Menüs ist, dass mit dem Mauszeiger einer engen Passage gefolgt werden muss, um in das Untermenü zu gelangen. Verlässt man diesen vorgegebenen Mauspfad, schließt sich in den meisten Fällen das Menü, in dem sich das gewünschte Item befindet. Der Grund dafür liegt vor allem an der Art und Weise wie Dropdown-Menüs typischerweise designt werden, nämlich meist mit :hover auf einem Parent-Element in CSS oder einem mouseenter beziehungsweise mouseover in JavaScript.

Die Lösung des Problems dürfte auf der Hand liegen: die Passage zwischen den dem Parent-Element und dem Untermenü muss erweitert werden. Das lässt sich mit verschiedenen Methoden erreichen. So können dem Untermenü beispielsweise mehrere Pseudo-Elemente hinzugefügt werden. Wird die Maus über diese geführt, klappt das Menü nicht ein, weil die Pseudo-Elemente den Anschein erwecken, als befände sich der Mauszeiger noch im entsprechenden Untermenü.

Der Vorteil dieser Methode ist vor allem, dass nur CSS benötigt wird und sie so besonders leichtgewichtig ist. Einzig bei der Größe der Pseudo-Elemente ist ein wenig Fingerspitzengefühl gefragt. Sie dürfen weder zu klein sein, um überhaupt einen Effekt zu haben, allerdings sollten sie auch nicht so groß sein, dass andere klickbare Items im Menü überdeckt werden.

Alle Menüs mit Extra-Raum um sie herum zu versehen, ist eine weitere Möglichkeit, Usern die Navigation zu vereinfachen, indem bei der Steuerung mit der Maus mehr Spielraum bleibt, ohne dass der frustrierende hover-off-Effekt eintritt. Auch ein sogenannter „unhover intent“ – also eine beabsichtigte Verzögerung, wenn der User den benötigten hover-Bereich verlässt – kann die Navigation eines Dropdown-Menüs für den User angenehmer gestalten. Umsetzen lässt es sich entweder mit dem visibility– und transition-Attributen in CSS oder mit einer setTimeout-Funktion in JavaScript.

Größe der Passage ändern

Die bisher vorgestellten Methoden haben vor allem eins gemeinsam: sie vergeben dem User ein kurzes Abweichen von der benötigten Mausposition. Es gibt allerdings noch einen weiteren Ansatz, der die Navigation des Drop-Down-Menüs vereinfacht, ohne dass der User peinlich genau auf seine Mausbewegung achten muss.

Dabei wird die Größe der Passage in das Untermenü in der Größe verändert, beispielsweise indem das Menü nicht zur Seite, sondern nach unten aufgeklappt wird. So kommt es gar nicht erst zu den engen Passagen, die für ein unbeabsichtigtes Einklappen des Menüs sorgen.

Genauso spielt der Winkel, in dem das neugeöffnete Untermenü angesteuert wird, eine große Rolle. Bleibt der Mauszeiger in dem entsprechenden Bereich, werden die anderen Menü-Items nicht ausgelöst. Erreichen lässt sich ein solcher Bereich beispielsweise mit JavaScript; es gibt zudem ein jQuery-Plug-in, das genau diese Funktion übernimmt.

Das Problem des ungewollten Einklappens des Dropdown-Menüs beschränkt sich allerding nicht nur auf User, die eine Maus nutzen, sondern betrifft auch die Navigation mit Touch oder Keyboard und sollte somit bei der Gestaltung im Hinterkopf behalten werden. Trotzdem dürften die vorgestellten Methoden einige gute Ansätze liefern, um bei Dropdown-Menüs die Navigation mit der Maus zu vereinfachen und so für weniger Frustration bei den Nutzern der eigenen Website sorgen.

Aufmacherbild: Stone path on the green grass. von Shutterstock / Urheberrecht: TrotzOlga

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -