Reines HTML- und CSS-Toggel-Dropdownmenü

[Snugel]

Hallo Forum!

Nach dem ich mich eine Weile mit der Suche beschäftigt hatte, habe ich festgestellt das ich nichts passendes finde. Ob der Thread in dem Forum richtig ist, weil er neben HTML auch CSS mit Thematisiert weiß ich nicht. Also bitte gegebenenfalls verschieben.

Nun zur Problemstellung: Ich will ein Dropdown-Menü für Mobildevices. erstellen. Ich habe dafür ein 1 KB großes png-File, mit drei Linien und einem Hintergrund. Wenn ich nun die Maus über das png-File bewege (:hover) oder via Touch das Image fokussiere (:focus), dann soll sich das Menü öffnen und die Hauptmenüeinträge sollen erscheinen. Wenn ich dann einen Eintrag selektiere soll mit der Pseudoklasse :active der Punkt der selektiert wurde hervorgeheben werden und gegebenenfalls Submenüs angezeigt werden. Dabei ist zu berücksichtigen das max. drei Menüebenen geben soll. Bsp.:

Hauptmenü (1te. Ebene) = hl (HL)

	Submenü (2te. Ebene) = s1l (S1L)

		Submenü des Submenüs (3te. Ebene) = s2l (S2L)

Nun habe ich auch in die Richtung schon was vorbereitet an HTML-Code, den ich Euch in keinem Fall vorenthalten will.

Eventuell von Bedeutung: Der nachfolgende section Tag, ist Teil des Strukturelements header. Im Header (ID = a) gibt es auch weitere section- und span-Tags. Dabei gibt es die IDs aa, ab, ac und ad. Die section-ID ad beinhaltet das Mobdev-Menü und eine Statusleiste. Die Statusleiste ist, da sie über eine andere ID und class angesprochen wird noch nicht relevant. Sie bekommt eventuell eine extra section, je nach Inhaltsumfang.

Zur Lösung: Die Lösung soll rein auf dem Prinzip von HTML und CSS basieren ohne JavaScript oder anderweitigen Programmier- Script- etc. Sprachen.

Der (mein) HTML-Teil:

`<section id="ad" class="ad" title="container">

	<nav  id="ad-1" class="ad-1" title="mobdev-navbar">

		<img src="image/statusbar/Mobildev.png" alt="Bild" title="mobildevice-menü-picture"/>

		<ul  id="ad-1h" class="ad-12h" title="hauptmenü">

			<hr>

			<li  id="ad-12hl" class="ad-12hl" title="mobdev-hauptmenüliste>

				<a href="#">

					Linktext

				</a>

				<ul  id="ad-12s1" class="ad-12s1" title="submenü">

					<hr>

					<li  id="ad-12s1l" class="ad-12s1l" title="mobdev-submenüliste>

						<a href="#">

							Linktext

						</a>

						<ul  id="ad-12s2" class="ad-12s2" title="submenü">

							<hr>

							<li  id="ad-12s2l" class="ad-12s2l" title="mobdev-submenüliste>

								<a href="#">

									Linktext

								</a>

							</li>

						</ul>

					</li>

				</ul>

			</li>

		</ul>

	</nav>

	<section id="statusbar" class="statusbar" title="statusbar">

	</section>

</section>`

Mein CSS-Teil war nur Müll. Ich kam selber derweil durcheinander und habe in gelöscht. Ich wäre froh, wenn nur die Funktion von :hover und :focus sowohl beim Image, als auch bei den Submenüeinträgen funktionieren würde. Irgendwie sehe ich den Wald vor lauter... CSS nicht mehr.

Vielen Dank,

Snugel

[Gunnar Bittersmann]

@@Snugel

Zur Lösung: Die Lösung soll rein auf dem Prinzip von HTML und CSS basieren ohne JavaScript oder anderweitigen Programmier- Script- etc. Sprachen.

Das wird kaum möglich sein.

Wann immer Interaktion und „rein CSS“ aufeinandertreffen, bleibt irgendwas auf der Strecke – nämlich die allgemeine Bedienbarkeit.

Ich hab da mal einen Anfang gemacht …

LLAP 🖖

[beatovich]

hallo

Ich hab da mal einen Anfang gemacht …

hab was gelernt:

aria-expanded='false'

[Snugel]

@Gunnar Bittersmann,
@beatovich,

Hallo,

vielen Dank für Eure Beiträge und verweise.

Allerdings nutzten der Lösungsvorschlag auf den es hinaus läuft JavaScript, was ich nicht nutzen will. Darum erstellte ich den Betreff Reines HTML- und CSS-Toggle-Dropdownmenü.

Snugel

[beatovich]

hallo

@Gunnar Bittersmann,
@beatovich,

Hallo,

vielen Dank für Eure Beiträge und verweise.

Allerdings nutzten der Lösungsvorschlag auf den es hinaus läuft JavaScript, was ich nicht nutzen will. Darum erstellte ich den Betreff Reines HTML- und CSS-Toggle-Dropdownmenü.

Snugel

Wenn du wirklich auf Javascript verzichten willst, wirst du wohl den grausamen radio button hack verwenden müssen.

Ich korrigiere mich: für Menus möchte ich ihn gar nicht empfehlen, da Radio Buttons nicht alle erforderlichen Funktionen bereitstellen.

[JürgenB]

Hallo,

Wenn du wirklich auf Javascript verzichten willst, wirst du wohl den grausamen radio button hack verwenden müssen.

und auch damit, bzw. mit dem Checkbox-Hack, geht es nicht ganz ohne JS.

@Snugel Ohne Javascript kriegst du ein funktionierendes Klapp-Menü nicht hin.

Gruß
Jürgen

[Gunnar Bittersmann]

@@beatovich

Wenn du wirklich auf Javascript verzichten willst,

Will er/sie nicht, weil kann er/sie nicht.

wirst du wohl den grausamen radio button hack verwenden müssen.

Wo wie gesagt die allgemeine Bedienbarkeit auf der Strecke bleibt.

Ich korrigiere mich: für Menus möchte ich ihn gar nicht empfehlen, da Radio Buttons nicht alle erforderlichen Funktionen bereitstellen.

Du kannst dich noch mal korrigieren und „für Menüs“ streichen.

LLAP 🖖

[Gunnar Bittersmann]

@@Snugel

Allerdings nutzten der Lösungsvorschlag auf den es hinaus läuft JavaScript, was ich nicht nutzen will.

Hatte ich „geht nicht ohne JavaScript“ nicht deutlich genug ausgedrückt‽

LLAP 🖖

[Snugel]

Hallo!
Zunächst sorry das ich mich so spät melde. Hatte eine ziemlich lässtige Grippe.

OK, ja ich wollte es vermeiden aus ganz verschiedenen Gründen.
Zum einen bin ich der Sprache nicht nennens Wert mächtig, was mit 2,5 Punkten wenig relevant ist, denn die kann man lernen. Zum anderen weil ich es einfach nicht wollte. Mit 7,5 Punkten ist der letztere Grund einfach der höher priorisiertere Grund gewesen.

Wenn Ihr jetzt die Aufgabe hättet das in die Tat umzusätzen, wie ich das Anfangs beschrieben habe, wie würdet Ihr das mit bestehnedem HTML-Code Umsetzen?

Es mag sein das es elegentere Lösungen gibt. Aber das ist eben ein Kriterium was ich mir auferlegt habe. Ich würde mich freuen wenn Ihr mir dabei helfen könntet, auch wenn es Euch wiederstrebt.

Vielen Dank,
Snugel

[Gunnar Bittersmann]

@@Snugel

Wenn Ihr jetzt die Aufgabe hättet das in die Tat umzusätzen, wie ich das Anfangs beschrieben habe

Die Aufgabe ist unlösbar.

wie würdet Ihr das mit bestehnedem HTML-Code Umsetzen?

Also gar nicht.

LLAP 🖖

[beatovich]

hallo

Wenn Ihr jetzt die Aufgabe hättet das in die Tat umzusätzen, wie ich das Anfangs beschrieben habe, wie würdet Ihr das mit bestehnedem HTML-Code Umsetzen?

Unter der Voraussetzung dass der Draft https://drafts.csswg.org/selectors-4/#relational bezüglich :has() auch implementiert ist, ist eine reine CSS Umsetzung möglich über

.menuitem:has( :target ), 
.menuitem:target 
   {display:block}

Ansonsten nur mit einer Pistole an der Schläfe über radio buttons, also gar nicht.

[Gunnar Bittersmann]

@@beatovich

Unter der Voraussetzung dass der Draft https://drafts.csswg.org/selectors-4/#relational bezüglich :has() auch implementiert ist,

😄 Der war gut.

ist eine reine CSS Umsetzung möglich

Aus der nichterfüllten Voraussetzung kannst du alles mögliche folgern; die Implikation ist immer wahr.

Dass eine reine CSS-Umsetzung^[1] möglich wäre, glaube ich auch erst, wenn ich sie sehe. Magst du mal eben mit Houdini :has() implementieren?

LLAP 🖖

---

1. nicht mit Deppenleerzeichen, bitte ↩︎