dynamisches Dropdown Menü

[Gunnar Bittersmann]

@@J o

Auch das geht, Dropdown Menüs.

Aber nicht so! Der Abschnitt Submenü ausblenden und das dortige Beispiel sind grob fehlerhaft:

tabindex="0" auf die li zu setzen, damit diese den Tastaturfokus erhalten können, ist ein eher mittelguter Hack.

Und was tun Browser, die :focus-within nicht verstehen, mit folgender Regel?

nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu,
nav li:focus-within .submenu
{ 
  visibility: visible;
  height: auto;
}

Gar nichts! Sie wird komplett ignoriert. In IE und Edge geht das Menü nicht einmal bei Hover auf. Das hätte dem Ersteller des Beispiels eigentlich auffallen sollen.

Damit Browser wenigstens den ihnen verständlichen Teil verarbeiten, muss der Selektor dafür für sie vollständig verständlich sein. Man müsste die Regel also aufteilen:

nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu
{ 
  visibility: visible;
  height: auto;
}

nav li:focus-within .submenu
{ 
  visibility: visible;
  height: auto;
}

Ich hab das in diesem Testbeispiel mal gegenübergestellt: Menü 1 vs. Menü 2.

Menü 2 öffnet sich zwar auch in Browsern, die :focus-within nicht verstehen. Man kommt aber mit Tastatursteuerung nicht an die Unterpunkte heran.

Ein CSS-only-Dropdown-Menü funktioniert nur mit :focus-within. Man darf in Browsern, die :focus-within nicht verstehen, das Ding nicht verstecken. Wie bei Menü 3 umgesetzt: in IE und Edge ist das Ding immer offen.

Und den Hack mit tabindex braucht man auch nicht.

Wenn es auch ohne :focus-within auf-/zuklappen soll, kommt man an einer JavaScript-Lösung nicht vorbei. Auch dann gilt: Ohne JavaScript muss das Ding immer offen sein; erst mit JavaScript zuklappen.

LLAP 🖖