nicht angemeldet
Frage zum Wiki-Artikel „Flyout-Menü“
Gunnar Bittersmann
Matthias ScharwiesNeben '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)
-
@@peterdd
IMHO Menü und ähnliche Sachen [lassen sich] auch in CSS/HTML mit Hilfe von <input> checkbox und/oder radio realisieren.
Das sollte man tunlichst unterlassen.
Motivation ist meist, dass eine Seite/Anwendung trotz abgeschaltetem JS gut benutzbar bleibt
Nein, ein mit Checkbox-Hack umgesetztes Menü ist eben gerade nicht gut benutzbar.
Siehe Kasten „The checkbox hack“ (unter The open method) in Inclusive Components: Menus & Menu Buttons.
Kwakoni Yiquan
--
Ad astra per aspera -
Guten Morgen!
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.
Gunnar hat Recht, wir haben im Wiki eine ausführliche Erklärung:
sondern z.B. um Ebenen in SVG ein/auszuschalten
Ja, da geht kein details. Ich würde einen Toggle und Schalterklassen verwenden.
oder 'modale' Dialoge einzublenden
Da braucht man zwei Zeilen JS ohne Rückmeldung zum Server; zukünftig funktioniert es ohne JavaScript:[1] [2] [3]
<button command="show-modal" commandfor="my-dialog"> This opens a dialog </button> <dialog id="my-dialog">This is the dialog</dialog>oder bei komplexeren Formularen untergeordnete Eingaben abhängig anzuzeigen oder Hinweise einzublenden.
Dann wird das Ergebnis der Checkbox mit gesendet - sauberer wäre ein Toggle, der eingegebene Daten und Bedienung trennt.
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)
Ja, aber das läuft ja alles im Browser; Verbindung und Bandbreite sind da egal.
Herzliche Grüße
Matthias Scharwies
--
Das wirksamste Mittel gegen Sonnenbrand
ist Urlaub am Ostseestrand!
https://open-ui.org/components/invokers.explainer/
Addingcommandforandcommandattributes to<button>... would allow authors to assign behaviour to buttons in a more accessible and declarative way, while reducing bugs and simplifying the amount of JavaScript pages are required to ship for interactivity. ↩︎https://utilitybend.com/blog/an-update-on-invokers-invoker-commands-in-html
Why care about an experimental feature?
The reason you should be interested in this feature is that talking about it does help to move things forward. If we notice a big interest from people, it gets placed on top of the pile by the different working groups out there. ↩︎caniuse sieht aus wie Blendax Anti-Belag, das wird aber schon! ↩︎