Link nur als Hover für Flyout Menü nutzen

Post non-phpwcms related topics here - but I don't want to see "hey check this or that other cms". Post if you have a point or worthwhile comment, don't post just to increase you post count!
Post Reply
User avatar
Uwe367
Posts: 990
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Link nur als Hover für Flyout Menü nutzen

Post by Uwe367 » Wed 5. Jun 2019, 06:43

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?

User avatar
top
Posts: 462
Joined: Fri 11. Aug 2006, 15:03
Location: Eutin

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

Post by top » Wed 5. Jun 2019, 11:38

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.

Post Reply