CSS-Kniffliges zum Wochenende

[Gunnar Bittersmann]

@@1unitedpower

Meine Entwickelrtools zeigen 5 net::ERR_INSECURE_RESPONSE-Fehler an, liegt vermutlich am fehlenden https.

Ja, das hab ich auf dem Schirm. Nicht öffentlich Wein (HTTPS) predigen und heimlich Wasser (HTTP) saufen. Ich muss meinen Kram endlich mal umstellen.

Wenn es daran nicht liegt

Nein, die von CodePen nicht mehr eingebundenen Scripte wären für den Backlink vom Codepen hier ins Forum und für hanging punctuation, haben also mit der Sache hier nichts zu tun.

was funktioniert nicht wie erwartet?

In Nicht-Füchsen ist das Layout zerschossen: das geöffnete Menü steht (außer bei mittelbreiten Viewports) neben der Überschrift anstatt darunter.

Wäre hier nicht eigentlich <details> angebracht?

Dann müsste man aber die Abfrage, ob das Menü initial geöffnet oder geschlossen sein soll (open-Attribut gesetzt oder nicht), ins JavaScript verlagern anstatt per media query im CSS zu machen. Finde ich unschön.

Und ggfs. noch einen Polyfill für Edge/IE bauen, die details noch nicht unterstützen.

Die Elementstruktur wäre dieselbe: Steuerelement und Liste als Geschwister im Container.

<nav>
  <button>…<button>
  <ul>…</ul>
</nav>

vs.

<details>
  <summary>…</summary>
  <ul>…</ul>
</details>

(Bei letzterem kommt nav noch außenrum.)

Das Stylingproblem wäre also auch dasselbe.

Nur dass sich summary vielleicht in Browsern als störrisch erweisen könnte.

LLAP 🖖