Animiertes Accordion Menü mit Table-artiger Struktur

[Ferdinand]

Hallo again,

...okay, hoffe das wird nicht als Spam (weil quasi Doppelpost) gesehen, aber es stellt sich meines Erachtens nun ein viel grundlegenderes Problem, welches thematisch dann doch bereits ein Stück weit von meiner ursprünglichen Frage weg ist.

Meinen ursprünglichen Thread findet ihr hier, ist aber eigentlich für das Verständnis dieses Problems nicht weiter notwendig.

(Solltet ihr diesen "Doppelpost" als unangemessen empfinden, bitte ich die Moderatoren und deren Innen, die Threads vielleicht zusammenzuführen.)

Danke nochmal an Gunnar Bittersmann, Rolf B und MudGuard.

---

...und zwar war der ursprüngliche Gedanke, ein animiertes Accordion-Menü herzustellen, was mit einer Tablestruktur nicht ohne weiteres möglich scheint (da max-height (, etc.) für table Elemente ja nicht definiert ist, wie erwähnt, danke euch nochmals für diesen Hinweis)

Ich wollte also den Menüpunkt in <thead> zu packen und den animiert auf- und zuzuklappenden Teil in <tbody> zusammenzufassen - so nicht möglich.

Wenn ich hier aber schon per Hand skripte und auf WordPress, WIX und Stuxnet verzichte, sollte das Resultat dann doch semantisch halbwegs sauber daherkommen...

Die Idee war nun, das Menü als unordered List zu erstellen - semantisch handelt es sich aber einfach um eine Tabelle!

<header>Menüpunkt</header>
<ul>
	<li><div>SPALTE1</div><div>SPALTE2</div><div>SPALTE3</div></li>
	<li>...</li>
</ul>

wobei ich dann mit ul li div:nth-child(...) die Spalten einheitlich stylen kann. Wirkt ein bisschen abenteuerlich auf mich.

Sollte ich das Problem besser so angehen?:

<header>Menüpunkt</header>
<div>
	<table>
		<tbody>
			<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
		</tbody>
	</table>
</div>

...wobei ich hier dann das die Tabelle umgebende div mit max-height animieren können sollte (, oder?)...

Was meint ihr dazu?

Danke nochmals!

Ferdinand

[JürgenB]

Hallo Ferdinand,

irgendwie habe ich noch nicht verstanden, wie dein Menü aussehen soll. Kann es sein, dass du so etwas suchst?

Gruß
Jürgen

[Ferdinand]

Hallo,

Nein, es handelt sich in dem Fall um kein verschachteltes Hauptmenü, sondern um eine aufklappbare Tabelle, mehr oder weniger nach dem Schema

<ÜBERSCHRIFT ZU TABELLE />
<KLAPPBARER BEREICH>
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
</KLAPPBARER BEREICH>

[Ferdinand]

Okay, vielleicht noch deutlicher :)

Die zwei Modi

<*ÜBERSCHRIFT ZU TABELLE* HIER KLICKEN, UM ZUZUKLAPPEN! />
<KLAPPBARER BEREICH>
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
Spalte 1	Spalte 2	Spalte 3
</KLAPPBARER BEREICH>

<*ÜBERSCHRIFT ZU TABELLE* HIER KLICKEN, UM AUFZUKLAPPEN! />
<KLAPPBARER BEREICH>
</KLAPPBARER BEREICH>

und den Spaß animiert.

[JürgenB]

Hallo Ferdinand,

für das Auf- und Zuklappen bietet sich details/summary an. Ob für die tabellarische Anordnung jetzt eine Tabelle oder ein Grid-Konstrukt besser geeignet ist, kann ich, ohne mehr über dein Projekt zu wissen, nicht sagen.

Gruß
Jürgen

[Ferdinand]

Hm... okay, danke.

Werde das vermutlich zu einem Grid umarbeiten.

Oder was hältst du von

<header>Menüpunkt</header>
<div>
	<table>
		<tbody>
			<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
		</tbody>
	</table>
</div>

...wobei das div geklappt wird?

[Matthias Scharwies]

Servus!

Hm... okay, danke.

Werde das vermutlich zu einem Grid umarbeiten.

Oder was hältst du von

...

Mach doch:

<details>
  <summary>Menüpunkt</summary>

 	<table>
 		<tbody>
 			<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
 		</tbody>
	</table>
</details>

Herzliche Grüße

Matthias Scharwies

[Ferdinand]

Mach doch:

<details>
  <summary>Menüpunkt</summary>

 	<table>
 		<tbody>
 			<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
 		</tbody>
	</table>
</details>

Herzliche Grüße

Matthias Scharwies

Hallo Matthias,

Ja, das wäre wohl die semantisch sauberste Variante.

Nun lässt sich aber eben ein Table nicht animiert auf- bzw. zuklappen, da max-height nicht für table definiert ist. (max-height: 0 funktioniert hier z.B. nicht)

...soll heißen, zur Animation des Elements brauche ich ein anderes Tag als Wrapper... ...oder eben überhaupt ein CSS-Grid (auch wenn die Art des darzustellenden Inhalts eindeutig tabellarisch ist)

Übersehe ich was bei deiner (wie gesagt, semantisch sicher einwandfreien) Lösung?

[Der Martin]

Hallo,

Nun lässt sich aber eben ein Table nicht animiert auf- bzw. zuklappen

hätte ich jetzt nicht gewusst, aber das ist doch dann ein Vorteil.
Ich finde Animationen meist sowieso störend, sie nerven einfach.

Immer eine Handbreit Wasser unterm Kiel
 Martin

[Matthias Scharwies]

Servus!

Mach doch:

<details>
  <summary>Menüpunkt</summary>

 	<table>
 		<tbody>
 			<tr><td>Spalte1</td><td>Spalte2</td><td>Spalte3</td></tr>
 		</tbody>
	</table>
</details>

Herzliche Grüße

Matthias Scharwies

Hallo Matthias,

Ja, das wäre wohl die semantisch sauberste Variante.

Nun lässt sich aber eben ein Table nicht animiert auf- bzw. zuklappen, da max-height nicht für table definiert ist. (max-height: 0 funktioniert hier z.B. nicht)

...soll heißen, zur Animation des Elements brauche ich ein anderes Tag als Wrapper... ...oder eben überhaupt ein CSS-Grid (auch wenn die Art des darzustellenden Inhalts eindeutig tabellarisch ist)

Stimmt! Hier wäre es ein div:

HTML/Tutorials/details#Akkordeon

Übersehe ich was bei deiner (wie gesagt, semantisch sicher einwandfreien) Lösung?

Herzliche Grüße

Matthias Scharwies

[Rolf B]

Hallo Ferdinand,

es ist nicht so einfach, den open-Ablauf von details zu animieren.

Aber bei CSS Tricks beschreibt jemand, wie es gehen kann:

https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

Der Inhalt sollte dann egal sein. Das ist aber was für Fortgeschrittene, würde ich sagen. Ich habe das noch nicht ausprobiert.

Rolf

[Matthias Scharwies]

Servus!

Hallo Ferdinand,

es ist nicht so einfach, den open-Ablauf von details zu animieren.

Aber bei CSS Tricks beschreibt jemand, wie es gehen kann:

https://css-tricks.com/how-to-animate-the-details-element-using-waapi/

Dieses Tutorial wurde bereits im Nov 2020 hier diskutiert: https://forum.selfhtml.org/self/2020/nov/07/details-passendes-element-fur-content/1777642#m1777642

Ich hatte daraufhin unsere beiden Tutorials überarbeitet:

• HTML/Tutorials/details#Akkordeon
  • die CSS-Lösung benötigt Magic Numbers
  • gleich unter der CSS-Lösung gibt es einen Link auf:
• JavaScript/Tutorials/Akkordeon mit details
  • ohne WAAPI, die benötigte Höhe wird mit getBoundingClientRect()ermittelt

Herzliche Grüße

Matthias Scharwies