Flyout-Menüs! Sobald Sie ein Menü implementieren müssen, das ein Hover-Ereignis verwendet, um weitere Menüpunkte anzuzeigen, geraten Sie in kniffliges Terrain. Zum einen sollten sie auch mit Klicks und Taps funktionieren. Ohne dies haben Sie das Menü für alle, die keine Maus haben, unbrauchbar gemacht. Das bedeutet nicht, dass Sie :hover nicht *auch* verwenden können. Wenn Sie einen Hover-Zustand verwenden, um weitere Inhalte anzuzeigen, bedeutet dies, dass ein *nicht*-Hover-Zustand diese ausblenden muss. Darin liegt das Problem.
Das Problem ist, dass, wenn ein Untermenü beim Hovern irgendwo auftaucht, das Überfahren mit der Maus das Bewegen durch einen ziemlich schmalen Korridor erfordern kann. Wenn Sie versehentlich diesen Bereich verlassen, kann sich das Menü schließen, und das kann ein extrem frustrierendes UX-Erlebnis sein.
Wir haben dies bereits in unserem Artikel „Dropdown-Menüs mit fehlerverzeihenderen Mausbewegungspfaden“ behandelt.
:hover ist, oder wenn ein mouseleave- oder ein mouseout-Ereignis auftritt.Die überzeugendsten Beispiele, die dieses Problem lösen, sind diejenigen, die zusätzliche versteckte „Trefferbereiche“ beinhalten. Amazon hat solche Menüs eigentlich nicht mehr (soweit ich sehen kann), und vielleicht ist dies einer der Gründe dafür. Aber in der Vergangenheit haben sie diese Trefferbereich-Technik verwendet. Wir könnten sie „dynamische Trefferbereiche“ nennen, da sie basierend auf der Position des übergeordneten Elements und der Untermenüs gezeichnet wurden.
Ich habe in letzter Zeit nicht viele Implementierungen davon gesehen, aber erst kürzlich hat Hakim El Hattab eine moderne Implementierung davon in seinem Vortrag bei der CSS Day 2019 aufgenommen. Die Implementierung nutzt das dynamische Zeichnen der Bereiche mit SVG. Man sieht die Trefferbereiche nicht wirklich, aber sie sehen so aus und bilden somit Pfade, die Hover-Abbrüche verhindern.
Ich werde hier einen YouTube-Embed des Vortrags einfügen, der an diesem Punkt beginnt.
Die Art und Weise, wie er den Trefferbereich zeichnet, ist so raffiniert, dass es mich auf vielfältige Weise glücklich macht.
Die Live-Demo davon ist im Slides.com Pattern Library Dingens verfügbar.
Tolle Lösung! Gibt es das irgendwo als fertige Bibliothek? Ich habe Probleme damit, menuAim mit Mega-Menüs (300px Breite in einem Beispiel) zum Laufen zu bringen, aber ohne Erfolg. Dieses hier scheint aber gut zu funktionieren :)
(Anmerkung des Redakteurs: Diese Person hat einen sehr relevanten Link hinterlassen
https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown
Dann hat sie eine Menge unnötig unhöflicher Sachen gesagt, also entferne ich diese Sachen und lasse den Link.)
Viele Menüs verwenden eine Zeitverzögerung. Wenn Sie also den Trefferbereich verlassen, wartet das Untermenü eine Sekunde, bevor es einklappt. Das ist auch eine sehr gute Lösung.
Entschuldigung, ich hätte den ganzen Artikel lesen sollen ;)
Es gibt eine Möglichkeit, einen ähnlichen Effekt nur mit CSS und Pseudo-Elementen zu erzielen.
Verwenden Sie die Hover-Intent-Bibliothek. Problem behoben.
Ich habe ein kleines Plugin gefunden, das so etwas Ähnliches macht.
https://github.com/kamens/jQuery-menu-aim