Page 1 of 1

Link nur als Hover für Flyout Menü nutzen

Posted: Wed 5. Jun 2019, 06:43
by Uwe367
Hi allerseits,
Wie würde man in der heutigen Zeit des modernen Webdesigns einen Link erstellen der nur als Hover für ein Flyoutmenü dienen soll?
Der Link soll bei einem Klick darauf gar nichts machen, er soll nur dazu dienen daß sich das Flyoutmenü öffnet.
Momentan habe ich das noch mittels javascript:void(0) gelöst was aber nicht so wirklich die saubere Art sein soll.
Gibts da mittlerweile etwas eleganteres?

Re: Link nur als Hover für Flyout Menü nutzen

Posted: Wed 5. Jun 2019, 11:38
by top
Für mein letztes Dropdown-Menü habe ich eine Lösung ohne JavaScript genutzt. Der Trick dabei ist, dass man eine Checkbox etwas zweckentfremdet nutzt. Das dazugehörige Label lässt sich bequem stylen und die Checkbox selbst wird für den Besucher unsichtbar gemacht.

Im Prinzip so wie hier: https://www.cssscript.com/responsive-pu ... tion-menu/

Wenn man nur eine Unterebene zum Aufklappen hat, kann man mit :focus arbeiten um den Aufgeklappten Bereich zu markieren.
Will man auch Unterpunkte tiefer verzweigt aufklappbar haben, funktioniert das nicht mehr, da ja immer nur eine Checkbox den Zustand "focus" besitzen kann. Da kann man dann auch :checked zurückgreifen. Ist dann aber nicht mehr ganz so elegant, da die Navi nicht mehr automatisch zuklappt, wenn man in einen neutralen Bereich klickt.

Die neue Seite auf der ich das genutzt habe, ist leider noch nicht vom Kunden freigegeben. Wenn du möchtest schicke ich dir mal einen Link zur Testumgebung per PN.