Auswahl unter dem Cursor

[Gunnar Bittersmann]

@@Chico_wau

Ich möchte, wenn ich mit dem Cursor über die Elemente eines vertikalen Menus fahre, dass dann unter dem vertikalen Menuelement, auf dem sich der Cursor gerade befindet, ohne Cursorclick automatisch eine Auswahlliste erscheint.

Ich nehme an, das soll nicht nur so sein, wenn du mit dem Cursor über die Elemente eines vertikalen Menus fährst, sondern auch, wenn andere das tun. Nur: manch andere haben gar keinen Cursor, weil sie gar keine Maus o.ä. Zeigegerät haben. Viele haben ein Touchscreen; wieder andere bedienen ihr System mit der Tastatur. Deshalb darf Hover nur eine mögliche Bedienung des Menüs sein, aber nicht die einzige.

Hierzu suche ich entsprechende HTML Codierbeispiele.

In diesem Codepen habe ich zwei mal zwei Varianten aufgeschrieben. Die ersten beiden davon (die mit :focus-within) funktionieren in etlichen Browsern nicht (darunter IE und auch noch Edge), sind also für die allgemeine Verwendung untauglich. Ein funktionstüchtiges Auflappmenü geht nur mit JavaScript. Eine Beschreibung gibt’s auch dazu.

Und ja, ich hab nicht überlesen, dass du die Hauptmenüpunkte nicht horizontal, sondern vertikal anordnen willst. Das sind nur kleine Änderungen im Stylesheet, bspw. Hinzufügen von nav ul { flex-direction: column }.

LLAP 🖖