nicht angemeldet
Neben 'details' lassen sich IMHO Menü und ähnliche Sachen auch in CSS/HTML mit Hilfe von <input> checkbox und/oder radio realisieren. Dabei wird die checkbox als Zustandsspeicher verwendet.
Über 'label' (auch mehrere pro Checkbox möglich) kann dann geschaltet werden.
Das ermöglicht auch verschachtelte 'Logik' (man muss es ja nicht übertreiben).
Trick ist die Verwendung von '~'
<html>
<head>
<style>
#input1, #input2, #input3 { display:none; }
label {cursor:pointer;}
label {border:1px solid #666; padding:0.5em;display:inline-block;margin:0.5em;}
label#input2lsub { display:none; }
#contentA { height:0; overflow:hidden; transition:0.5s;padding:1em;}
#contentA img { width:32px; transition:0.5s; box-shadow: 0 0 10px 2px #999;}
#input1:checked ~ label#input1l1 { background-color:#ff0; }
#input1:checked ~ label#input1l2 { background-color:#9f0; }
#input1:checked ~ #contentA { display:block; height:80vh; transition:0.5s;}
#input1:checked ~ label#input2lsub { display:inline-block; background-color:#fcc;}
#input2:checked ~ label#input2lsub { background-color:#ccf;}
#input1:checked ~ #input2:checked ~ #contentA img { width:60vh; max-width:100%; transition:0.5s; filter:hue-rotate(-90deg);}
}
</style>
</head>
<body>
<input type="checkbox" id="input1"/>
<input type="checkbox" id="input2"/>
<input type="checkbox" id="input3"/>
<label for="input1" id="input1l1">Text</label>
<label for="input1" id="input1l2"> anderer Text, gleiche Checkbox</label>
<label for="input2" id="input2lsub">Sublabel</label>
<div id="contentA">
<p>bla blubb</p>
<img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0$
<circle cx="50" cy="50" r="20" fill="red"/></svg>'
</div>
<p>mehr Text</p>
</body>
</html>
Ich verwende das inzwischen gerne und nicht nur für Navi, sondern z.B. um Ebenen in SVG ein/auszuschalten oder 'modale' Dialoge einzublenden oder bei komplexeren Formularen untergeordnete Eingaben abhängig anzuzeigen oder Hinweise einzublenden.
Grad nachgeguckt, bei einem meiner Sachen habe ich über 40 dieser Checkboxen am Anfang der Seite/App o_O
Motivation ist meist, dass eine Seite/Anwendung trotz abgeschaltetem JS gut benutzbar bleibt (besonders auf Handy ist sich im Netz zu bewegen sonst unerträglich, keine Ahnung wie die Leute das so ertragen. Und gerade da möchte man ohne Bloat sein, wenn Verbindung und Bandbreite gering)
Gunnar Bittersmann
Matthias Scharwies