Verschachtelte Submenüs mit Hilfe von :target ein-/ausblenden

[ebody]

Hallo,

ich versuche hier gerade ein Menü zu basteln, welches nur mit HTML, CSS funktioniert: https://codepen.io/ebody/pen/povbMxm

Nach einem Klick auf einen Menüpunkt, soll das Submenü jeweils solange angezeigt werden, bis man erneut auf den Menüpunkt klickt. Ich bin hier auf eine Möglichkeit gestoßen. Der Zustand "geöffnet/geschlossen" wird mit :target geregelt.

Bei einem Submenü lässt es sich umsetzen, soll dieses Submenü aber ein weiteres Submenü öffnen, funktioniert es nicht. Zumindest ist das gerade der Punkt, wo ich nicht weiter weiß.

Klickt man hier auf "B" und dann auf "B1", schließt sich das ganze Menü. Es soll sich aber das nächste Submenü öffnen.

Ich vermute :target kann es nur einmal auf einer Seite geben und daher lässt es sich nur mit einem Submenü umsetzen, aber nicht mit mehreren oder?

Gruß ebody

[Rolf B]

Hallo ebody,

:target kann es nur einmal auf einer Seite geben

So ist das. Target MacLeod gestattet keine Konkurrenz.

Selbst wenn Du mit zwei Mäusen gleichzeitig herumklickst (oder mit zwei Händen gleichzeitig auf den Touchscreen patschst).

Rolf

[Matthias Apsel]

Hallo ebody,

ich versuche hier gerade ein Menü zu basteln, welches nur mit HTML, CSS funktioniert: https://codepen.io/ebody/pen/povbMxm

Ich würde sagen, diesen Versuch solltest du aufgeben.

Ich vermute :target kann es nur einmal auf einer Seite geben und daher lässt es sich nur mit einem Submenü umsetzen, aber nicht mit mehreren oder?

:target selektiert dasjenige Element, was gerade aktiv als Verweisziel ausgewählt wird. :target ist eine Pseudoklasse und die gibt es eigentlich überhaupt nicht auf der Seite (vergleiche https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/target). Ein großer Nachteil ist, dass :target die History zumüllt.

Bis demnächst
Matthias

[ebody]

Danke euch beiden für die Infos.

Leider habe ich den Code zuletzt überschrieben und vergessen unter einer neuen URL zu speichern. Daher findet man ihn hier https://codepen.io/ebody/pen/povbMxm nicht mehr.

Mich würde noch interessieren, was das genau bedeutet?:

Ich würde sagen, diesen Versuch solltest du aufgeben.

1. Der Aufbau/Code war so schlecht, dass das eh nichts geben kann.
2. Es ist sehr schwierig, das Menü nur mit HTML, CSS umzusetzen, wenn sich mehrere Menü Ebenen per Klick öffnen/schließen sollen.

Gruß ebody

[Matthias Apsel]

Hallo ebody,

Mich würde noch interessieren, was das genau bedeutet?:

Ich würde sagen, diesen Versuch solltest du aufgeben.

1. Der Aufbau/Code war so schlecht, dass das eh nichts geben kann.
2. Es ist sehr schwierig, das Menü nur mit HTML, CSS umzusetzen, wenn sich mehrere Menü Ebenen per Klick öffnen/schließen sollen.

2.

Ich würde sagen, unmöglich.

Vor allem, wenn das Menu wirklich zugänglich sein soll.

Bis demnächst
Matthias

[Matthias Scharwies]

Servus!

Mich würde noch interessieren, was das genau bedeutet?:

Ich würde sagen, diesen Versuch solltest du aufgeben.

2. Es ist sehr schwierig, das Menü nur mit HTML, CSS umzusetzen, wenn sich mehrere Menü Ebenen per Klick öffnen/schließen sollen.

2.

Ich würde sagen, unmöglich.

Vor allem, wenn das Menu wirklich zugänglich sein soll.

Evtl. ist dies eine Alternative: Navigationsmenü mit details / summary

Es geht mit Maus und Tastatur!

Bis demnächst
Matthias

Herzliche Grüße

Matthias Scharwies

[JürgenB]

Hallo Matthias,

Evtl. ist dies eine Alternative: Navigationsmenü mit details / summary

mann kommt ohne Javascript schon sehr weit, aber für etwas Komfort, wie z.B. „Nur ein Submenü offen“ oder „alle schließen bei <ESC>“ braucht man dann doch JS. Wie es aber mit A11Y aussieht, weiß ich auch nicht. Ich habe etwas gesucht und auch Tests gefunden, in denen Details/Summary Zugänglichkeit bescheinigt wurde, aber nur in einem Accordeon, nicht in einer Navigation. Andere Tests haben als Fazit so etwas wie „im Prinzip ok aber vielleicht doch noch nicht“. Ich finde an Details/Summary reizvoll, das für das Auf- und Zuklappen von Teilen des Inhalts das Element genommen wird, das zum Auf- und Zuklappen von Teilen des Inhalts geschaffen wurde.

Gruß
Jürgen

[Matthias Scharwies]

Servus!

Hallo Matthias,

Evtl. ist dies eine Alternative: Navigationsmenü mit details / summary

mann kommt ohne Javascript schon sehr weit, aber für etwas Komfort, wie z.B. „Nur ein Submenü offen“ oder „alle schließen bei <ESC>“ braucht man dann doch JS. Wie es aber mit A11Y aussieht, weiß ich auch nicht. Ich habe etwas gesucht und auch Tests gefunden, in denen Details/Summary Zugänglichkeit bescheinigt wurde, aber nur in einem Accordeon, nicht in einer Navigation. Andere Tests haben als Fazit so etwas wie „im Prinzip ok aber vielleicht doch noch nicht“. Ich finde an Details/Summary reizvoll, das für das Auf- und Zuklappen von Teilen des Inhalts das Element genommen wird, das zum Auf- und Zuklappen von Teilen des Inhalts geschaffen wurde.

Danke für die Erklärung! Ich würde das Beispiel gerne ins Wiki übernehmen - warte aber noch auf die Kommentare der Profis.

Herzliche Grüße

Matthias Scharwies