tag:forum.selfhtml.org,2005:/self Untermenu aufklappen - Anfängerfrage – SELFHTML-Forum 2018-06-07T22:06:35Z https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723189#m1723189 Gerhard1 2018-05-29T09:52:05Z 2018-05-29T09:52:05Z Untermenu aufklappen - Anfängerfrage <p>Hallo, was habe ich bei folgendem falsch gemacht? Das Untermenu ist nicht unsichtbar.</p> <p>CSS</p> <pre><code class="block language-css"><span class="token selector"># Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar li.menu ul li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"># Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen li.menu:hover, li.menu:focus, li.menu:active ul li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723191#m1723191 marctrix self@mhis.de https://www.mhis.de 2018-05-29T10:03:53Z 2018-05-29T10:04:20Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <blockquote> <p>was habe ich bei folgendem falsch gemacht? Das Untermenu ist nicht unsichtbar.</p> </blockquote> <p>Natürlich nicht. Schau mal Deinen Kommentar an:</p> <blockquote> <pre><code class="block language-css"># Wenn li unter ul und ul unter li der Klasse <span class="token string">"menu"</span><span class="token punctuation">,</span> dann dieses unsichtbar li.menu ul li </code></pre> </blockquote> <p>Und jetzt dein HTML:</p> <blockquote> <p>HTML</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Hat das Element mit der Klasse <code>menu</code> denn eine <code>ul</code> <strong>und</strong> darin weitere <code>li</code>? </p> <p>Besser wäre folgendes HTML:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>Dann kannst du so selektieren und brauchst gar keine Klassen mehr:</p> <pre><code class="block language-css">nav li li </code></pre> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723193#m1723193 Martl 2018-05-29T10:08:17Z 2018-05-29T10:08:17Z Untermenu aufklappen - Anfängerfrage <p>Hallo Gerhard1,</p> <ol> <li>In CSS gibt es nur /* Kommentar */ als Kommentarzeichen</li> <li><code>li.menu ul li</code> für die Nicht-Anzeige, also muß</li> <li><code>li.menu:hover ul li</code> die Anzeige wieder herstellen.</li> </ol> <p>Bezüglich der Verwendung von <code>dispaly:none</code> für diesen Zweck kommen wahrscheinlich noch ein paar Kommentare. :)</p> <p>Grüße, Martl</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723196#m1723196 Felix Riesterer http://felix-riesterer.de 2018-05-29T10:25:36Z 2018-05-29T10:25:36Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gerhard1,</p> <p>ich fasse mal zusammen was schon gesagt wurde:</p> <ol> <li>Kaputte Kommentare können die Funktionalität Deines CSS-Codes zerstören. Verwende <code class="language-css"><span class="token comment">/* Kommentar (auch mehrzeilig) */</span></code> stattdessen.</li> <li>Deine Navigation gehört in ein <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span></code>-Element</li> </ol> <p>Desweiteren ist mir aufgefallen, dass Du die Klasse <code>.menu</code> verwendest. Wenn Du Deine Liste in ein <code><nav></code> kapselst, dann genügt Dir den Nachfahrenselektor ganz ohne Klasse:</p> <pre><code class="block language-css"><span class="token comment">/* grundsätzlich Untermenüs verbergen */</span> <span class="token selector">nav ul ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Untermenü eines gehoverten Listenpunkts anzeigen */</span> <span class="token selector">nav li:hover > ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dazu das passende Markup:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Navigation<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <blockquote> <p>was habe ich bei folgendem falsch gemacht? [...]</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Du hast einen Listenpunkt geschlossen und dann eine neue Liste begonnen. Damit ist sie kein Kind des Listenpunktes mehr, was sie aber sein muss, damit Deine Technik funktioniert.</p> <p>Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine <code>:hover</code>-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723203#m1723203 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T10:45:53Z 2018-05-29T10:45:53Z Untermenu aufklappen - Anfängerfrage <p>@@Gerhard1</p> <blockquote> <p>was habe ich bei folgendem falsch gemacht?</p> </blockquote> <p>Worauf Marc schon hinwies: Dein Markup ist fehlerhaft. Der <a href="https://validator.w3.org/nu/" rel="nofollow noopener noreferrer">Markup Checker</a> spürt solche Fehler auf; <a href="https://speakerdeck.com/gunnarbittersmann/test-driven-html-development" rel="nofollow noopener noreferrer">visuelle Tests</a> sind dafür auch ein gutes Werkzeug.</p> <blockquote> <p>Das Untermenu ist nicht unsichtbar.</p> </blockquote> <p>Und das bleibt es auch für alle Nutzer, die im Web anders navigieren sind als mit einer Maus (o.ä. Zeigergerät).</p> <p>In einem Fall, wo auch die Unterpunkte zur selben Seite führen (aber zu anderen Stellen auf dieser), mag das verschmerzbar sein, wenn man auf der anderen Seite zu den einzelnen Stellen navigieren kann.</p> <p>Allgemein ist es das aber nicht; <strong>jedes Menü muss auch mit der Tastatur bedienbar sein.</strong></p> <p>Una Kravets hat da eine <a href="https://css-tricks.com/solved-with-css-dropdown-menus/" rel="nofollow noopener noreferrer">Lösung mit <code>:focus-within</code></a> vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den <a href="https://css-tricks.com/solved-with-css-dropdown-menus/#comment-1631964" rel="nofollow noopener noreferrer">Kommentar von Marcy Sutton</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723215#m1723215 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T11:43:18Z 2018-05-29T11:43:18Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <p>was habe ich bei folgendem falsch gemacht?</p> </blockquote> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Tipp: Zähl mal in deinem Quelltext die Vorkommen von <code></li></code>. Da ist eins zu viel.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723222#m1723222 Gerhard1 2018-05-29T12:25:47Z 2018-05-29T12:25:47Z Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte <p>Hallo an alle Selfhtmler! Ich erinnere daher an meinen Beitrag <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723213#m1723213" rel="noopener noreferrer">Au secours!</a> und hoffe auf Eure Hilfe</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723375#m1723375 Rolandi 2018-05-31T07:27:37Z 2018-05-31T07:27:37Z Untermenu aufklappen - Was für eine Diskussion! <p>Hi all, ich habe gerade diesen thread entdeckt und teilweise durchgelesen. Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.</p> <p>Es gibt doch kaum einen Internetauftritt, der nicht solche Menus enthält. Also müsste es doch genügend Beispiele geben</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723837#m1723837 marctrix self@mhis.de https://www.mhis.de 2018-06-05T11:10:00Z 2018-06-05T11:10:32Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <p>schau mal, was ich bisher habe. Der enstcheidende Nachteil (und dann wieder womöglich Vorteil) dieses Menüs ist: es ist nicht generisch, kann also nciht für jeden beliebigen Zweck eingesetzt werden, passt aber genau auf den von dir beschriebenen Fall.</p> <p>Was mir noch nicht gefällt: Wird das Menü geöffnet, verschieben sich die Inhalte darunter. Das muss kein Problem sein. Mitunter ist das auch gewünscht. Man kann das verhindern, dafür brauche ich aber eigentlich weitere Angaben. Wenn du beispielsweise eine Bühne hast mit einem Schmuckbild, kann man den Platz für das aufgeklappte Menü nutzen. Funktioniert dann aber auch wieder nur in einem speziellen Projekt (finde ich eigentlich nicht so gut).</p> <p>Ich werde es mit einem Bild noch etwas hübscher machen.</p> <p>Wenn es gewünscht ist, dass die Inhalte nicht nach unten verschoben werden (was vielleciht komisch aussieht, aber den Vorteil hat, dass diese sichtbar und somit lesbar bleiben, sag mir das bitte. Dann muss ich da noch mal ran. Du darfst das Menü gerne nutzen unter einer einzigen Bedingung: du schaust es dir genau an und versuchst zu verstehen, was da passiert. </p> <p>Hier der Link: <a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">https://github.com/MarcHaunschild/accessible-nav</a></p> <p>Wer immer Fehler findet, darf sich gerne beteiligen. Es ist OpenSource und es ist auf Github. Also keine Scheu beim Melden von Issues, beim forken usw…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723197#m1723197 Gerhard1 2018-05-29T10:26:12Z 2018-05-29T10:26:12Z Untermenu aufklappen - Anfängerfrage <p><a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@marctrix</a></p> <p>Mein Kommentar: <em>Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar li.menu ul li</em></p> <p>Meine Struktur:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p>Das (letzte) li unter ul und (dieses) ul unter li der Klasse "menu".</p> <p>Dies entspricht doch meinem Kommentar.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723195#m1723195 Gerhard1 2018-05-29T10:20:56Z 2018-05-29T10:20:56Z Untermenu aufklappen - Anfängerfrage <p>@Martl Du schreibst: <em>li.menu ul li für die Nicht-Anzeige</em> So habe ich es doch angegeben und die beiden Zeilen des Untermenus sind trotzdem sichtbar.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723198#m1723198 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T10:28:03Z 2018-05-29T10:28:03Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Hallo Gerhard1,</p> <ol> <li>In CSS gibt es nur /* Kommentar */ als Kommentarzeichen</li> <li><code>li.menu ul li</code> für die Nicht-Anzeige, also muß</li> <li><code>li.menu:hover ul li</code> die Anzeige wieder herstellen.</li> </ol> <p>Bezüglich der Verwendung von <code>dispaly:none</code> für diesen Zweck kommen wahrscheinlich noch ein paar Kommentare. :)</p> </blockquote> <p>Genau, nämlich, dass man da bereits mit Javascript arbeiten muss, um zugängliches zu produzieren.</p> <p>Deshalb verlinke ich mal hier mein Eigenprodukt für alles was klappern soll. <a href="https://beat-stoecklin.ch/klapperlogic.html" rel="nofollow noopener noreferrer">https://beat-stoecklin.ch/klapperlogic.html</a></p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723211#m1723211 Martl 2018-05-29T11:23:13Z 2018-05-29T11:23:13Z Untermenu aufklappen - Anfängerfrage <p>Hallo Gerhard1,</p> <blockquote> <p>...sind trotzdem sichtbar.</p> </blockquote> <p>das habe ich überlesen; es funktioniert, sobald Du Deine falschen <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723196#m1723196" rel="noopener noreferrer">'#'-Kommentare</a> (# bezieht sich auf eine ID) entfernst.</p> <p>Was aber dann nicht funktioniert, ist „die Anzeige wieder herstellen“, deshalb der Punkt drei. Infos zu Verwendung von <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Pseudoklasse/hover,_active,_focus" rel="nofollow noopener noreferrer">:active</a>.</p> <p>Grüße, Martl</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723200#m1723200 Gerhard1 2018-05-29T10:34:16Z 2018-05-29T10:44:31Z Untermenu aufklappen - Anfängerfrage <p>@all: Danke für Eure Tipps.</p> <p><a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a></p> <blockquote> <p>Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine <code>:hover</code>-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.</p> </blockquote> <p>Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.</p> <p>Muss man dann zweierlei Methoden realisieren, abhängig vom verwendeten Gerät?</p> <p>Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723201#m1723201 marctrix self@mhis.de https://www.mhis.de 2018-05-29T10:34:42Z 2018-05-29T10:34:42Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <blockquote> <p>Mein Kommentar: <em>Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar li.menu ul li</em></p> <p>Meine Struktur:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p>Das (letzte) li unter ul und (dieses) ul unter li der Klasse "menu".</p> <p>Dies entspricht doch meinem Kommentar.</p> </blockquote> <p>Nein du hast kommentiert (und selektiert), dass da zwei <code>ul</code> unterhalb der Klasse <code>menu</code> sein sollen. Ist aber nur eine.</p> <p>Mach es dir daher einfacher: <code>li li</code> reicht vollkommen aus um die zweite Ebene zu selektieren. Wenn es um die zweite Ebene einer Hauptnavigation geht, setze noch ein <code>nav</code> davor.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723212#m1723212 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T11:28:57Z 2018-05-29T11:28:57Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.</p> </blockquote> <p>Ja aber Elemente werden nicht fokusierbar, indem man im CSS element:focus schreibt.</p> <p>Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723229#m1723229 Felix Riesterer http://felix-riesterer.de 2018-05-29T12:42:02Z 2018-05-29T12:42:02Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gerhard1,</p> <blockquote> <blockquote> <p>Bitte beachte, dass Deine Navigation mit Touchgeräten unbedienbar ist! Dort gibt es keine <code>:hover</code>-Zustände. Daher bräuchte es eigentlich eine Klapp-Navi mit Buttons.</p> </blockquote> <p>Das, dachte ich, hätte ich mit den Angaben focus und active erledigt.</p> </blockquote> <p>auf einem Touch-Gerät kann ich mit dem Finger das Menü auklappen wollen, indem ich den passenden Punkt (also den sichtbaren Link) mit dem Finger berühre. Dabei kann ich kurz darauf tippen (wird als Klick mit der linken Maustaste interpretiert) oder eben etwas länger (wird als Klick mit der rechten Maustaste interpretiert). Ein Klick würde den Link aufrufen und die Seite verlassen. Ein Rechtsklick würde ein Kontextmenü aufrufen.</p> <p>Du kannst auf Touchgeräten nicht hovern! Das gibt es dort nicht! Also kann auch der "Hover-Zustand" nicht eintreten, auf den mit der Pseudoklasse <code class="language-css"><span class="token punctuation">:</span>hover</code> reagiert werden soll.</p> <blockquote> <p>Muss man dann zweierlei Methoden realisieren, abhängig vom verwendeten Gerät?</p> </blockquote> <p>Ja. Wenn Du "Gerät" schreibst, dann solltest Du das Eingabegerät (Maus/Touchfeld) damit meinen.</p> <blockquote> <p>Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?</p> </blockquote> <p>Ich habe mich <a href="https://jsfiddle.net/Laberwurschd/zs4cs6Lc/" rel="noopener noreferrer">an einem solchen versucht</a>. Probiere es aus und entscheide selbst, ob es Deinen Anforderungen genügt.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723251#m1723251 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T14:08:35Z 2018-05-29T14:08:35Z Untermenu aufklappen - Anfängerfrage <p>@@Gerhard1</p> <blockquote> <p>Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?</p> </blockquote> <p>Das Problem ist, dass ein aufklappbares Menu, das überall funktioniert, eben nicht so einfach ist.</p> <p>Da gibt es einiges zu bedenken; nicht unbedingt Stoff für blutige Anfänger.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723214#m1723214 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T11:42:21Z 2018-05-29T11:42:21Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <p>Mach es dir daher einfacher: <code>li li</code> reicht vollkommen aus um die zweite Ebene zu selektieren. Wenn es um die zweite Ebene einer Hauptnavigation geht, setze noch ein <code>nav</code> davor.</p> </blockquote> <p>Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <code><li></code> bereits zugemacht, nur deshalb greift der Selektor nicht.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723204#m1723204 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T10:57:41Z 2018-05-29T10:57:41Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Una Kravets hat da eine <a href="https://css-tricks.com/solved-with-css-dropdown-menus/" rel="nofollow noopener noreferrer">Lösung mit <code>:focus-within</code></a> vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den <a href="https://css-tricks.com/solved-with-css-dropdown-menus/#comment-1631964" rel="nofollow noopener noreferrer">Kommentar von Marcy Sutton</a>.</p> </blockquote> <p>Jup. Für umfangreiche Navigationen oder Inhalte, die viele fokusierbare Elemente enthalten, ist das tatsächlich nicht optimal, weil man nun einen zusätzlichen Skip-Link braucht.</p> <p>Reine CSS-Lösungen sind zudem nicht in der Lage, aria-attribute umzuschreiben, weshalb man hier nie mit display:none arbeiten darf.</p> <p>Da man aber nicht mit display:none arbeiten soll, besteht die Gefahr/Möglichkeit, mit dem Cursor in Content hinein zu wandern, der visuell immer noch ausgeblendet ist, weil nie ein focus stattfand.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723207#m1723207 marctrix self@mhis.de https://www.mhis.de 2018-05-29T11:07:11Z 2018-05-29T11:07:11Z Untermenu aufklappen - Anfängerfrage <p>Hej Gunnar,</p> <blockquote> <p>@@Gerhard1</p> <blockquote> <p>was habe ich bei folgendem falsch gemacht?</p> </blockquote> <p>Worauf Marc schon hinwies: Dein Markup ist fehlerhaft. Der <a href="https://validator.w3.org/nu/" rel="nofollow noopener noreferrer">Markup Checker</a> spürt solche Fehler auf; <a href="https://speakerdeck.com/gunnarbittersmann/test-driven-html-development" rel="nofollow noopener noreferrer">visuelle Tests</a> sind dafür auch ein gutes Werkzeug.</p> <blockquote> <p>Das Untermenu ist nicht unsichtbar.</p> </blockquote> <p>Und das bleibt es auch für alle Nutzer, die im Web anders navigieren sind als mit einer Maus (o.ä. Zeigergerät).</p> </blockquote> <p>Persönlich bin ich ja auch der Meinung, dass <code>display: none</code> nicht die beste Lösung ist.</p> <p>Ich würde die unteren Menüpunkte nur aus dem Viewport schieben, dann bleiben Sie für Blinde schon mal erreichbar.</p> <p>So wie man es mit Skiplinks macht.</p> <blockquote> <p>Allgemein ist es das aber nicht; <strong>jedes Menü muss auch mit der Tastatur bedienbar sein.</strong></p> </blockquote> <p>Full ACK</p> <blockquote> <p>Una Kravets hat da eine <a href="https://css-tricks.com/solved-with-css-dropdown-menus/" rel="nofollow noopener noreferrer">Lösung mit <code>:focus-within</code></a> vorgestellt.</p> </blockquote> <p>So weit war ich schon vor Jahren, wenn auch ohne die Möglichkeiten von <code>focus-within</code>. Das ist IMHO gar nicht nötig, denn man sieht ja am aufgeklappten Untermenü, welcher obere Menü-Punkt dazu gehört.</p> <p>Warum ich eine reine CSS-Lösung aber für ungut halte, erkläre ich unten.</p> <blockquote> <p>Für kleine Menüs mag die durchaus brauchbar sein; für größere siehe den <a href="https://css-tricks.com/solved-with-css-dropdown-menus/#comment-1631964" rel="nofollow noopener noreferrer">Kommentar von Marcy Sutton</a>.</p> </blockquote> <p>Probleme gibt es beim schrägen Überfahren um Untermenü-Punkte zu erreichen, wobei (kurzzeitig) das Eltern-li verlassen wird. Hier ist JS nötig um eine kurze Verzögerung zu erreichen, bevor sich das Menü wieder zuklappt. Habe da mit Delay und so romprobiert, das aber mit CSS allein nicht hinbekommen. Vielleicht hatte ich einen schlechten Tag?</p> <p>Jedenfalls ist nicht die Tastatur-Bedienung die große Herausforderung, wie in dem Artikel behauptet (und dann "gelöst" wird - ist längst gelöst), sondern die Bedienung mit der Maus ist das größere Problem. Das habe ich mi reinem CSS nicht lösen können.</p> <p>Kannst es ja selber mal probieren, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> ,denn bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723209#m1723209 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T11:10:09Z 2018-05-29T11:10:09Z Untermenu aufklappen - Anfängerfrage <p>@@Gunnar Bittersmann</p> <blockquote> <p>Una Kravets hat da eine <a href="https://css-tricks.com/solved-with-css-dropdown-menus/" rel="nofollow noopener noreferrer">Lösung mit <code>:focus-within</code></a> vorgestellt. Für kleine Menüs mag die durchaus brauchbar sein</p> </blockquote> <p>In Browsern, die <a href="https://caniuse.com/#feat=css-focus-within" rel="noopener noreferrer"><code>:focus-within</code> unterstützen</a>. Für Edge (und IE, falls der noch ein Thema sein sollte) und einige Mobilbrowser braucht man einen Polyfill.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723255#m1723255 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T14:22:32Z 2018-05-29T14:22:32Z Untermenu aufklappen - Anfängerfrage <p>@@marctrix</p> <blockquote> <p>sondern die Bedienung mit der Maus ist das größere Problem.</p> </blockquote> <p>Man könnte den Unterpunkt-<code>ul</code> Padding verpassen – und transparenten Hintergrund. Die Hintergrundfarbe bekommen die <code>li</code> oder <code>a</code> darin. Das vergrößert die Fläche und sollte auch schräge Mausbewegungen ermöglichen.</p> <blockquote> <p>bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.</p> </blockquote> <p>Das sollte mit <code>transition</code> möglich sein – wenn man denn das Ausblenden über animierbare Eigenschaften realisiert.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723213#m1723213 Gerhard1 2018-05-29T11:41:50Z 2018-05-29T11:41:50Z Untermenu aufklappen - Anfängerfrage <p>@alle: Au secours! Hilfe!</p> <p>Jetzt kamen so viele Vorschläge mit Varianten, die nur ein Insider versteht. Da bin ich nun jedenfalls total überfordert. Ich suche eine gute Lösung nur für folgendes:</p> <pre><code class="block language-html">Item1 (ruft Seite1 auf) Item2 Item3 </code></pre> <p>Wenn Item1 überfahren wird mit Maus oder berührt wird (und was sonst noch in Frage kommt für die Auswahl dieses Items), soll das Untermenu aufklappen:</p> <pre><code class="block language-html"> Item1 (ruft Seite1 auf) Item11 (ruft Kapitel1 auf Seite 1 auf) ...… Item14 (ruft Kapitel4 auf Seite 1 auf) Item2 Item3 </code></pre> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723230#m1723230 Felix Riesterer http://felix-riesterer.de 2018-05-29T12:43:49Z 2018-05-29T12:43:49Z Untermenu aufklappen - Anfängerfrage <p>Lieber beatovich,</p> <blockquote> <p>Ja aber Elemente werden nicht fokusierbar, indem man im CSS element:focus schreibt.</p> </blockquote> <p>es geht nicht darum, ob ein Element prinzipiell fokussierbar ist, sondern ob ein Touchfeld einen Hover-Zustand auslösen kann, um ein Element zu hovern. Der Focus-Zustand kommt bei Toucheingabe bei einem Klick zustande, was aber den Link der übergeordneten Hierarchie auslöst.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723238#m1723238 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T13:07:02Z 2018-05-29T13:07:02Z Untermenu aufklappen - Anfängerfrage <p>@@beatovich</p> <blockquote> <p>Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.</p> </blockquote> <p>Es reicht nicht, irgendein Element per <code>tabindex</code> fokussierbar zu machen. Es muss dem Nutzer auch erkenntlich gemacht werden, dass das Element nun interaktiv sein soll (<code>role</code>), wie es sich verhält, welchen Status es gerade hat und und und … da kommen einige ARIA-Attribute zusammen.</p> <p>TL;DR: Nicht machen. <code>button</code> verwenden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723242#m1723242 marctrix self@mhis.de https://www.mhis.de 2018-05-29T13:09:24Z 2018-05-29T13:09:24Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <p>Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> : Beitrag wieder auf ungelesen setzen).</p> <p>Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723236#m1723236 marctrix self@mhis.de https://www.mhis.de 2018-05-29T13:02:14Z 2018-05-29T13:02:46Z Untermenu aufklappen - Anfängerfrage <p>Hej Camping_RIDER,</p> <blockquote> <p>Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <code><li></code> bereits zugemacht, nur deshalb greift der Selektor nicht.</p> </blockquote> <p><strong>Du hast vollkommen recht!</strong> Habe ich übersehen!</p> <p>Dennoch würde ich empfehlen auf die Klasse zu verzichten und die Liste in ein <code>nav</code> zu packen.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723216#m1723216 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T11:45:37Z 2018-05-29T11:45:37Z Untermenu aufklappen - Anfängerfrage <p>@@Camping_RIDER</p> <blockquote> <p>Tipp: Zähl mal in deinem Quelltext die Vorkommen von <code></li></code>. Da ist eins zu viel.</p> </blockquote> <p>Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723218#m1723218 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T11:54:02Z 2018-05-29T11:54:02Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <blockquote> <p>Tipp: Zähl mal in deinem Quelltext die Vorkommen von <code></li></code>. Da ist eins zu viel.</p> </blockquote> <p>Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.</p> </blockquote> <p>Genau 1. <a href="https://forum.selfhtml.org/users/243" rel="noopener noreferrer">Das von Felix</a>. Alle anderen enthalten Andeutungen, die man in diese Richtung verstehen kann. Aber zum Beispiel <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723201#m1723201" rel="noopener noreferrer">war Marc mit dem Hinweis auf den vermeintlich falschen Selektor irgendwie auf dem Holzweg</a> und du <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723203#m1723203" rel="noopener noreferrer">hast dich auf Marc bezogen</a>. Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt), dann sind wir bei 2.</p> <p>Also: 2 Postings, in denen aber neben dem Flüchtigkeitsfehler, den der TO gesucht hat, noch viele andere richtige (und wichtige) Anmerkungen standen, die den TO aber <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723213#m1723213" rel="noopener noreferrer">offensichtlich</a> ziemlich überfahren haben. Deshalb dachte ich, ich versuchs nochmal ohne das Drumrum.</p> <p>Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723219#m1723219 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T12:10:49Z 2018-05-29T12:10:49Z Untermenu aufklappen - Anfängerfrage <p>@@Camping_RIDER</p> <blockquote> <blockquote> <blockquote> <p>Tipp: Zähl mal in deinem Quelltext die Vorkommen von <code></li></code>. Da ist eins zu viel.</p> </blockquote> <p>Tipp: Zähl mal in diesem Thread die Vorkommen von Postings, die das schon erwähnten.</p> </blockquote> <p>Genau 1. <a href="https://forum.selfhtml.org/users/243" rel="noopener noreferrer">Das von Felix</a>. Alle anderen enthalten Andeutungen, die man in diese Richtung verstehen kann. Aber zum Beispiel <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723201#m1723201" rel="noopener noreferrer">war Marc mit dem Hinweis auf den vermeintlich falschen Selektor irgendwie auf dem Holzweg</a> und du <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723203#m1723203" rel="noopener noreferrer">hast dich auf Marc bezogen</a>.</p> </blockquote> <p>Marc stellte <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723191#m1723191" rel="noopener noreferrer">vorher</a> schon die entscheidende Frage <em>„Hat das Element mit der Klasse <code>menu</code> denn eine <code>ul</code> <strong>und</strong> darin weitere <code>li</code>?“</em> Darauf hatte ich mich bezogen.</p> <blockquote> <p>Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt)</p> </blockquote> <p>Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.</p> <blockquote> <p>Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.</p> </blockquote> <p>Sarkartisch wäre gewesen, wenn ich <em>„Da ist eins zu viel“</em> aus deinem Tipp mit in meinen Tipp übernommen hätte.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723221#m1723221 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T12:25:02Z 2018-05-29T12:25:02Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <p>Marc stellte <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723191#m1723191" rel="noopener noreferrer">vorher</a> schon die entscheidende Frage <em>„Hat das Element mit der Klasse <code>menu</code> denn eine <code>ul</code> <strong>und</strong> darin weitere <code>li</code>?“</em> Darauf hatte ich mich bezogen.</p> </blockquote> <p>Aus Sicht des Anfängers führt das zwar in die richtige Richtung, aber über einen Umweg. Der Anfänger kann da jetzt auch Antworten, ja, da mach ich ja ein li auf und nach der ul mach ichs wieder zu. Die Einrückung lässt das ja auch so als Intention erahnen.</p> <p>Dass der Selektor nicht selektiert weil irgendwas falsch ist, ist ja eigentlich schon klar. Auch dem TO. Dass es explizit das eine schließende <code></li></code> zu viel ist, dazu braucht man schon einen gewisses Überblick, der u.U. gerade am Anfang, wenn sowieso alles auf einen einprasselt, nur schwierig zu erlangen ist.</p> <blockquote> <blockquote> <p>Wenn ich mal noch mitrechne, dass du den Markup Checker erwähnt hast (was ja auch zum selben führt)</p> </blockquote> <p>Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.</p> </blockquote> <p>ACK. Ich hab dich ja schon mitgerechnet. Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt und mit recht viel (korrektem und wichtigem, aber ablenkendem) Drumrum umgeben.</p> <blockquote> <blockquote> <p>Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt.</p> </blockquote> <p>Sarkartisch wäre gewesen, wenn ich <em>„Da ist eins zu viel“</em> aus deinem Tipp mit in meinen Tipp übernommen hätte.</p> </blockquote> <p>Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723225#m1723225 Felix Riesterer http://felix-riesterer.de 2018-05-29T12:32:53Z 2018-05-29T12:32:53Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gunnar,</p> <blockquote> <p>Marc stellte <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723191#m1723191" rel="noopener noreferrer">vorher</a> schon die entscheidende Frage <em>„Hat das Element mit der Klasse <code>menu</code> denn eine <code>ul</code> <strong>und</strong> darin weitere <code>li</code>?“</em> Darauf hatte ich mich bezogen.</p> </blockquote> <p>ist diese Frage und die dahinter steckende Absicht dazu geeignet, von einem Anfänger sofort zielführend verstanden zu werden? Wie sich gezeigt hat: Nein.</p> <blockquote> <p>Und den visuellen Test. Gleich der erste dort vorgestellte bezieht sich auf falsch verschachtelte Listen.</p> </blockquote> <p>Warum ist es so schwer, einem Anfänger einfach zu sagen, dass er seine Elemente falsch verschachtelt hat?</p> <blockquote> <p>Sarkartisch wäre gewesen, wenn ich <em>„Da ist eins zu viel“</em> aus deinem Tipp mit in meinen Tipp übernommen hätte.</p> </blockquote> <p>Ich fürchte, es ist für den Empfänger Deiner Nachricht genau dann sarka[s]tisch, wenn er es als solches empfindet. Wenn Du es nicht sarkastisch gemeint hast, dann war es anhand der pointierten Formulierungen in Deiner Antwort nicht eindeutig erkennbar. Vielleicht hättest Du weniger pointiert formulieren können? Dann wäre eine sarkastische Lesart und damit das Missverständnis bestimmt weniger möglich gewesen.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723226#m1723226 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T12:34:29Z 2018-05-29T12:34:29Z Untermenu aufklappen - Anfängerfrage <p>@@Camping_RIDER</p> <blockquote> <p>Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt</p> </blockquote> <p>Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?</p> <blockquote> <blockquote> <blockquote> <p>Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt. Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.</p> </blockquote> </blockquote> </blockquote> <p>Du erwartest doch nicht, dass ich eine solche Vorlage nicht ausnutze? </p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723223#m1723223 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T12:29:31Z 2018-05-29T12:29:31Z Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte <p>Aloha ;)</p> <blockquote> <p>Ich erinnere daher an meinen Beitrag <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723213#m1723213" rel="noopener noreferrer">Au secours!</a> und hoffe auf Eure Hilfe</p> </blockquote> <p>Hast du deinen ursprünglichen Flüchtigkeitsfehler denn jetzt gefunden? Ich hab versucht, dir da einen <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723215#m1723215" rel="noopener noreferrer">Schubs in die richtige Richtung</a> zu geben, nur leider hat Gunnar das gleich gekapert. Das war so nicht in meinem Sinn.</p> <p>Natürlich sind die anderen Dinge, die gesagt wurden, richtig, und du sollst auch dein funktionierende Beispiel bekommen.</p> <p>Vielleicht hattest du deinen Fehler schon vor meinem Posting gefunden.</p> <p>Ich finds nur - gerade für einen Anfänger - auch wichtig, dass man versteht wo genau man was konkret falsch gemacht hat, wenn was nicht so tut wie es soll - selbst wenn vielleicht der Ansatz auch korrigiert werden muss.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723243#m1723243 Martl 2018-05-29T13:11:44Z 2018-05-29T13:11:44Z Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte <p>Hallo Gerhard1,</p> <p>Dein CSS bereinigt:</p> <pre><code class="block language-css"><span class="token comment">/* Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar */</span> <span class="token selector">li.menu ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen. Das wird nicht gebraucht: li.menu:active ul li*/</span> <span class="token selector">li.menu:hover ul, li.menu:focus ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Dein HTML bereinigt:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Den <code>tabindex="0"</code> wie beatovich schon <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723212#m1723212" rel="noopener noreferrer">schrieb</a>.</p> <p>Grüße, Martl</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723239#m1723239 Gerhard1 2018-05-29T13:08:42Z 2018-05-29T13:09:37Z Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte <p>Hallo Camping_RIDER,</p> <p>mit meinem ursprünglichen Beispiel habe ich mich gar nicht mehr auseinandergesetzt, da wie Du selbst geschrieben hast:</p> <p><em>Nun, um ganz ehrlich zu sein halte ich die dadurch ausgelöste Diskussion a) für nicht sinnvoll und b) für den TO verwirrend.</em></p> <p>Da wir einmal "nan" vorgeschlagen, an anderer Stelle "display: none;" in Frage gestellt, dann sei das Beispiel nicht für Touchscreen-Geräte geeignet, dann wird auf eine Lösung mit ":focus-within" verwiesen, und, und, und. Welchen Weg sollte ich daher einschlagen? Mein Beispiel weiterverfolgen? Ich bin total frustriert darüber, wie hier - postiv formuliert - um die richtige Lösung gestritten wird, der Fragende aber dümmer herausgeht als er heringekommen ist.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723227#m1723227 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T12:38:44Z 2018-05-29T12:38:44Z Untermenu aufklappen - Anfängerfrage <p>@@Felix Riesterer</p> <blockquote> <p>Warum ist es so schwer, einem Anfänger einfach zu sagen, dass er seine Elemente falsch verschachtelt hat?</p> </blockquote> <p>Es ist nicht schwer, aber in die Zukunft gedacht auch <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723226#m1723226" rel="noopener noreferrer">nicht besonders hilfreich</a>.</p> <blockquote> <p>Vielleicht hättest Du weniger pointiert formulieren können?</p> </blockquote> <p>Och menno. Der Witz hier war doch gerade, dass ich gar nicht groß formuliert habe, sondern Riders Formulierung leicht abgewandelt zurückgegeben habe.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723228#m1723228 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T12:40:33Z 2018-05-29T12:40:33Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <blockquote> <p>Trotzdem war auch in deinem Posting die rettende Erkenntnis hinter einem link versteckt</p> </blockquote> <p>Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?</p> </blockquote> <p>Beides ist sinnvoll. Das Werkzeug mit an die Hand zu geben kann im ersten Moment aber auch überfordern. Mein Ansatz wäre der, dem Fragenden zunächst beim konkreten Problem den Fehler zu verraten und ihm dann das Werkzeug fürs nächste Mal an die Hand zu geben.</p> <p>Dein Weg hat auch seinen Charme, ohne Frage, aber er birgt auch die Gefahr, dass der Fragende gar nicht versteht was du von ihm willst, und auch nicht versteht, was er mit dem Werkzeug tun soll - denn er hat vielleicht noch gar nicht verstanden welcher Art sein Fehler war. Überforderung ist die Folge.</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Du solltest dich fragen, ob das deinen sarkastischen Kommentar rechtfertigt. Ich versichere dir, dass es so oder so gleich wirkt - nur vielleicht in einer anderen Intensität.</p> </blockquote> </blockquote> </blockquote> <p>Du erwartest doch nicht, dass ich eine solche Vorlage nicht ausnutze? </p> </blockquote> <p>Nun, um ganz ehrlich zu sein halte ich die dadurch ausgelöste Diskussion a) für nicht sinnvoll und b) <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723222#m1723222" rel="noopener noreferrer">für den TO verwirrend</a>.</p> <p>Demnach, ja, es wäre besser gewesen du hättest die Vorlage nicht ausgenutzt und meinen Tipp einfach so stehen lassen wie er war. Er war weder falsch noch nicht zielführend noch anderweitig eines Kommentars bedürftig.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723257#m1723257 Felix Riesterer http://felix-riesterer.de 2018-05-29T14:27:58Z 2018-05-29T14:27:58Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gunnar,</p> <blockquote> <p>Was ist wohl wertvoller: den Fehler zu verraten oder dem Fragenden Werzeuge in die Hand zu geben, solche Fehler aufzuspüren – womit sie auch für den nächsten Fehler gerüstet wäre?</p> </blockquote> <p>das eine schließt das andere nicht aus! Je nach Wissensstand des Fragenden ist das Vermitteln eines Werkzeugs nicht immer möglich, weil er es deshalb vielleicht noch nicht zu nutzen versteht. Aber den Fehler nachvollziehen können, wenn er ihn selbst gemacht hat, ist dagegen durchaus auch dazu geeignet, künftige Fehler dieser Art zu vermeiden.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723231#m1723231 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T12:45:06Z 2018-05-29T12:47:30Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <p>Nur der Korrektheit halber:</p> <blockquote> <p>Du kannst auf Touchgeräten nicht hovern! Das gibt es dort nicht! Also kann auch der "Hover-Zustand" nicht eintreten, auf den mit der Pseudoklasse <code class="language-css"><span class="token punctuation">:</span>hover</code> reagiert werden soll.</p> </blockquote> <p>Ich kann schon hovern, auch auf einem Touchgerät. Nur muss man davon ausgehen, dass die Mehrheit der User das a) nicht kann und b) nicht tut. De facto bleibt das damit bei deiner Aussage, dass man das <code>:hover</code> für wichtige Seitenelemente (oder auch: die ganze Seite) am besten vergisst.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723233#m1723233 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T12:52:00Z 2018-05-29T12:52:40Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <blockquote> <p>Kannst Du mir ein einfaches Beispiel empfehlen für ein aufklappbares Menu, das überall funktiniert?</p> </blockquote> <p>Ich habe mich <a href="https://jsfiddle.net/Laberwurschd/zs4cs6Lc/" rel="noopener noreferrer">an einem solchen versucht</a>. Probiere es aus und entscheide selbst, ob es Deinen Anforderungen genügt.</p> </blockquote> <p>Ich find das Beispiel gut. Als <em>progressive enhancement</em> könnte es jetzt auch zusätzlich zur überall funktionierenden Basisfunktionalität noch eine Reaktion auf <code>:hover</code> für die Geräte anbieten, die hovern können, um das Menü mit Maus intuitiver zu machen. Für Mobilgeräte ist es bereits intuitiv.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723252#m1723252 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T14:13:50Z 2018-05-29T14:13:50Z Untermenu aufklappen - Anfängerfrage <p>@@Felix Riesterer</p> <blockquote> <p>Ich habe mich <a href="https://jsfiddle.net/Laberwurschd/zs4cs6Lc/" rel="noopener noreferrer">an einem solchen versucht</a>.</p> </blockquote> <p>Wenn man da mit JavaScript im DOM rummacht, sollte man wohl auch ARIA-Attribute entsprechend setzten. Und wenn der Zustand des Untermenüs schon im <code>aria-expanded</code>-Attribut festgehalten ist, dann braucht man auch gar keine Klasse "open" mehr.</p> <p>Ich hatte da auch mal einen <a href="https://codepen.io/gunnarbittersmann/pen/vpmBLW" rel="noopener noreferrer">Anlauf</a> gemacht. Welcher noch ein gutes Stück von der Zielgerade entfernt ist.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723240#m1723240 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T13:08:45Z 2018-05-29T13:08:45Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Ich find das Beispiel gut. Als <em>progressive enhancement</em></p> </blockquote> <p>Ich frage mich, wie man in Zeiten von aria noch von progressive enhancement sprechen kann. Entweder du machst eine statische Nav oder du erforderst JS.</p> <p>Progressives Verbesserung wäre in etwa das</p> <p><nav useragent-automation="true"> ... </nav></p> <p>Ich glaube ich habe eine Idee für ein Browser-Plugin.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723237#m1723237 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T13:03:52Z 2018-05-29T13:03:52Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <blockquote> <p>Ich glaub du bist auf dem Holzweg! Sein Selektor war schon korrekt, nur sein HTML war falsch. Er hat das äußere <code><li></code> bereits zugemacht, nur deshalb greift der Selektor nicht.</p> </blockquote> <p><strong>Du hast vollkommen recht!</strong> Habe ich übersehen!</p> <p>Dennoch würde ich empfehlen auf die Klasse zu verzichten und die Liste in ein <code>nav</code> zu packen.</p> </blockquote> <p>Klar, FACK!</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723245#m1723245 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T13:14:42Z 2018-05-29T13:14:42Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>@@beatovich</p> <blockquote> <p>Entweder ein Element ist von Haus aus fokusierbar (Buttons, Links, Formularelemente) oder ihm wurde diese Eigenschaft über das Attribut tabindex="0" explizit gegeben.</p> </blockquote> <p>Es reicht nicht, irgendein Element per <code>tabindex</code> fokussierbar zu machen. Es muss dem Nutzer auch erkenntlich gemacht werden, dass das Element nun interaktiv sein soll (<code>role</code>), wie es sich verhält, welchen Status es gerade hat und und und … da kommen einige ARIA-Attribute zusammen.</p> </blockquote> <p>Die Beispiele der WAI-ARIA-Seite selbst verwenden des öfteren tabindex ohne role Attribut weil das Element eben nicht immer eine eigene interaktive Rolle hat, ausser den Fokus zu verschieben.</p> <p>Und doch, technisch betrachtet reicht tabindex </p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723247#m1723247 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-29T13:27:44Z 2018-05-29T13:34:02Z Kleine Führung durch die unverständlichen Diskussionen! <p>Aloha ;)</p> <blockquote> <p>Ich bin total frustriert darüber, wie hier - postiv formuliert - um die richtige Lösung gestritten wird, der Fragende aber dümmer herausgeht als er heringekommen ist.</p> </blockquote> <p>Das kann ich gut verstehen!</p> <p>Ich versuche mal, dich durch den Wirrwar zu führen. Mein Vorschlag für dich (bitte nur die jeweils einzelnen Postings, nicht die darauf folgenden Postings):</p> <p>Wenn du verstehen willst, warum dein ursprüngliches Beispiel aus technischer Sicht nicht funktioniert hat, dann <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723215#m1723215" rel="noopener noreferrer">hier entlang</a>.</p> <p>Wenn du wissen willst, wie du solche Fehler in Zukunft leicht aufspürst, dann lies den <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723203#m1723203" rel="noopener noreferrer">ersten Absatz hier</a>.</p> <p>Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte, und wie eine rein tastatur- und klickbedienbare Navigation aussehen könnte, <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723229#m1723229" rel="noopener noreferrer">hier entlang</a> (Vorsicht: Felix' Vorschlag enthält recht viel sinnvolles, aber nicht ganz triviales Javascript - ganz ohne Javascript wirds aber sowieso nicht gehen).</p> <p>Ich kann dir leider grad selbst kein Beispiel geben - alles was ich auf Lager hätte ist zwar klickbedienbar, aber nicht tastaturbedienbar (da wenig / nur optionales Javascript) - deshalb möchte ich dir dazu nicht explizit raten. Außerdem weiß ich schon was passiert, wenn ich das hier verlinke, dann arten die Diskussionen wieder aus. Das ist nicht in deinem Sinn, also lass ich das.</p> <p>Im Wiki gibt es ein <a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/zug%C3%A4ngliche_Dropdown-Navigation" rel="nofollow noopener noreferrer">Tutorial, in dem ein Menü, wie du es suchst, zusammengebaut wird</a>. Leider ist der Artikel noch nicht ganz vollständig, du solltest aber aus dem letzten darin zu findenden Live-Beispiel schon einiges sinnvolles ziehen können.</p> <p>Marc ist sehr kompetent darin, zugängliche und gleichzeitig möglichst minimale Beispiele zu liefern. Ich würde an deiner Stelle also auch an <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723242#m1723242" rel="noopener noreferrer">diesem Angebot</a> dranbleiben!</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723244#m1723244 dedlfix 2018-05-29T13:14:28Z 2018-05-29T13:14:28Z Untermenu aufklappen - Anfängerfrage <p>Tach!</p> <blockquote> <p>[...] die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> : Beitrag wieder auf ungelesen setzen).</p> </blockquote> <p>Du könntest ihn als interessant markieren, also den Beitrag.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723246#m1723246 Christian Kruse https://wwwtech.de/about 2018-05-29T13:16:22Z 2018-05-29T13:16:22Z Untermenu aufklappen - Anfängerfrage <p>Hallo marctrix,</p> <blockquote> <p>Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> : Beitrag wieder auf ungelesen setzen).</p> </blockquote> <p>Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723248#m1723248 Gerhard1 2018-05-29T13:33:31Z 2018-05-29T13:33:31Z Untermenu aufklappen - Anfängerfrage <p>OK, ich freue mich!</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723283#m1723283 Gerhard1 2018-05-29T20:28:45Z 2018-05-29T20:28:45Z Untermenu aufklappen - Anfängerfrage <blockquote> <p>Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.</p> </blockquote> <p>Was hiermit geschieht.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723250#m1723250 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T13:53:53Z 2018-05-29T13:53:53Z Schön wäre es, wenn man die für mich unverständlichen Diskussionen beenden könnte <p>@@Martl</p> <blockquote> <pre><code class="block bad language-css"><span class="token comment">/* Wenn li unter ul und ul unter li der Klasse "menu", dann dieses unsichtbar */</span> <span class="token selector">li.menu ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/* Wenn z.B Maus über li der Klasse "menu" fährt, dann das unter dem darunerligenden ul liegende li anzeigen. Das wird nicht gebraucht: li.menu:active ul li*/</span> <span class="token selector">li.menu:hover ul, li.menu:focus ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 0.9em<span class="token punctuation">;</span> <span class="token property">font-style</span><span class="token punctuation">:</span> italic<span class="token punctuation">;</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> 2em<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Getestet hast du das aber nicht‽ Das kann überhaupt nicht funktionieren.</p> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Den <code>tabindex="0"</code> wie beatovich schon <a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723212#m1723212" rel="noopener noreferrer">schrieb</a>.</p> </blockquote> <p>Und dann? Dann kannst du das <code>li</code>-Element fokussieren; das Untermenü geht auf. Um dorthin zu gelangen: [Tab] – das <code>a</code>-Element „Über uns“ erhält den Fokus.</p> <p>Das heißt: das <code>li</code>-Element verliert den Fokus; das Untermenü geht zu, bevor man dahin gelangt.</p> <p><a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723203#m1723203" rel="noopener noreferrer">Wie ich schon schrieb</a>, geht’s mit <code>:focus-within</code>. Dann ist es auch überhaupt nicht notwendig (sondern störend), dass das <code>li</code>-Element fokussierbar ist (weil das „Über uns“ ja fokussierbar ist).</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723273#m1723273 marctrix self@mhis.de https://www.mhis.de 2018-05-29T17:01:14Z 2018-05-29T17:01:14Z Untermenu aufklappen - Anfängerfrage <p>Hej dedlfix,</p> <blockquote> <blockquote> <p>[...] die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> : Beitrag wieder auf ungelesen setzen).</p> </blockquote> <p>Du könntest ihn als interessant markieren, also den Beitrag.</p> </blockquote> <p>Davon habe ich schon viele - was ich daran mal interessant fand, weiß kein Mensch mehr. Am wenigsten ich selber. </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723296#m1723296 marctrix self@mhis.de https://www.mhis.de 2018-05-30T08:32:40Z 2018-05-30T08:32:40Z Untermenu aufklappen - Anfängerfrage <p>Hej Christian,</p> <blockquote> <p>Hallo marctrix,</p> <blockquote> <p>Da hast du ein gutes Konzept! Ich werde dir gerne dabei später helfen. Allerdings habe ich jetzt keine Zeit und die „Neu“—Markierung ist jetzt von dem Beitrag auch futsch. (Feature-Wunsch <a href="/users/1" class="mention registered-user" rel="noopener noreferrer">@Christian Kruse</a> : Beitrag wieder auf ungelesen setzen).</p> </blockquote> <p>Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). </p> </blockquote> <p>Dann kommt das wohl nicht zurück?</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723363#m1723363 Auge 2018-05-31T06:24:38Z 2018-05-31T06:24:38Z Kleine Führung durch die unverständlichen Diskussionen! <p>Hallo</p> <p>+1 für dein auseinanderdröseln der Diskussion. Dennoch ein Kontra. Wer behauptet denn sowas?</p> <blockquote> <p>Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte …</p> </blockquote> <p>We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:</p> <p>„Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723297#m1723297 marctrix self@mhis.de https://www.mhis.de 2018-05-30T08:53:55Z 2018-05-30T08:55:13Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <p>Also habe ich das richtig verstanden, dass du nur wenige Seiten hast. Die erste Ebene der Navigation entspricht daher einer Seite, die Unterpunkte gehen auf bestimmte Stellen (Kapitel) auf derselben Seite?</p> <p>Dann muss nur die erste Ebene der Navigation zugänglich sein. Da ich <strong>immer</strong> die einfachste Lösung für die beste halte, würde ich ich persönlich so vorgehen:</p> <p>Die Links der ersten Ebene sind immer verfügbar. Die Links in der zweiten Ebene sind nebensächlich. Setz sie um, wie du kannst (und mach das mit der Zeit und den hier erhaltenen Tipps) besser. <a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">Ich versuche mich gerade an einem zugänglichen Menü</a>, aber ich weiß weder, ob das erfolgreich wird, noch weiß ich, wann es fertig wird.</p> <p>Meine Lösung für Deinen Fall:</p> <p>#HTML</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Item 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Subitem 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> <p>#CSS</p> <pre><code class="block language-css"> <span class="token selector">nav > ul</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav ul</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span>relative<span class="token punctuation">;</span> <span class="token property">min-width</span><span class="token punctuation">:</span> 15em<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li li</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> -1<span class="token punctuation">;</span> <span class="token property">top</span><span class="token punctuation">:</span>0<span class="token punctuation">;</span> <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav li:focus-within li, nav li:hover li</span> <span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">nav a</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 1em<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> #fa0<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Warum reicht das erst mal? Weil alle Seiten erreichbar sind! Niemand wird so ausgeschlossen!</p> <p>Auf den Unterseiten solltest du die Seiteninterne Navigation noch mal einbauen, also so was in der Art wie:</p> <p>#HTML</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Name des Dokumentes<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#content<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>visuallyhidden focusable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Zum Hauptinhalt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>Name des Textes> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kapitel 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kapitel 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kapitel 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kapitel 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Kapitel 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Kapitel 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>section</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>Kapitel 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>section</span><span class="token punctuation">></span></span> [usw] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>article</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <p>Für den Skiplink (Damit kommen Tastatur-Nutzer sofort zum Inhalt) am Anfang des Body bräuchtest du noch die folgenden beiden Klassen.</p> <pre><code class="block language-css"><span class="token selector">.visuallyhidden</span> <span class="token punctuation">{</span> <span class="token property">border</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">clip</span><span class="token punctuation">:</span> <span class="token function">rect</span><span class="token punctuation">(</span>0 0 0 0<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> -1px<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> hidden<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> nowrap<span class="token punctuation">;</span> <span class="token comment">/* 1 */</span> <span class="token punctuation">}</span> <span class="token selector">.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus</span> <span class="token punctuation">{</span> <span class="token property">clip</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">overflow</span><span class="token punctuation">:</span> visible<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> static<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">white-space</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Damit kommt jeder auf alle Deine Seiten und kann dann an sinnvoller Stelle weiter navigieren. Das erfüllt alle Anforderungen an gute Zugänglichkeit (abgesehen davon dass die Navigation eh schon für fast alle erreichbar ist, denn die Links werden nie komplett entfernt; die zweite Ebene wird nur hinter die erste geschoben und so vor Sehenden verborgen. Blinde kommen jederzeit an alle Links, Sehende mit Maus und Nutzer moderner Browser mit Unterstützung von <code>focus-within</code> können sich die wieder zurück holen. Das von mir angesprochene Problem mit dem time-out werde ich noch versuchen zu lösen, aria-Attribute dürften so komplett überflüssig sein).</p> <p>Im wesentlichen habe ich den Code aus dem oben verlinkten GitHub-repository übernommen und empfehle dir, statt paste und copy den Code aus dem Repository zu nehmen. Dann wird es leichter, die Updates zu übernehmen, die sicher kommen werden.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723254#m1723254 Felix Riesterer http://felix-riesterer.de 2018-05-29T14:22:01Z 2018-05-29T14:22:01Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gunnar,</p> <blockquote> <p>Wenn man da mit JavaScript im DOM rummacht, sollte man wohl auch ARIA-Attribute entsprechend setzten.</p> </blockquote> <p>tja, wenn ich mich damit auskennen würde... zwischen welchen Attributen oder -Werten müsste ich da hin- und herschalten?</p> <blockquote> <p>Und wenn der Zustand des Untermenüs schon im <code>aria-expanded</code>-Attribut festgehalten ist, dann braucht man auch gar keine Klasse "open" mehr.</p> </blockquote> <p>Das leuchtet mir sofort ein.</p> <blockquote> <p>Ich hatte da auch mal einen <a href="https://codepen.io/gunnarbittersmann/pen/vpmBLW" rel="noopener noreferrer">Anlauf</a> gemacht. Welcher noch ein gutes Stück von der Zielgerade entfernt ist.</p> </blockquote> <p>Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723258#m1723258 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T14:30:12Z 2018-05-29T14:30:12Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.</p> </blockquote> <p>Warum willst du sie verlinkbar machen?</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723259#m1723259 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T14:33:46Z 2018-05-29T14:33:46Z Untermenu aufklappen - Anfängerfrage <p>@@Felix Riesterer</p> <blockquote> <p>tja, wenn ich mich damit auskennen würde... zwischen welchen Attributen oder -Werten müsste ich da hin- und herschalten?</p> </blockquote> <p>Ich schalte da <code>aria-expanded</code> zwischen <code>"false"</code> und <code>"true"</code> um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.</p> <blockquote> <p>Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.</p> </blockquote> <p>Das sollte in jenem Fall so sein. Das können aber auch – wie im hiesigen Fall – Links sein. Da müsste wohl im Eventhandler lediglich <code class="language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">===</span> <span class="token string">'BUTTON'</span><span class="token punctuation">)</span></code> entsprechend erweitert werden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723295#m1723295 marctrix self@mhis.de https://www.mhis.de 2018-05-30T08:31:46Z 2018-05-30T08:31:46Z Untermenu aufklappen - Anfängerfrage <p>Hej Gunnar,</p> <blockquote> <p>@@marctrix</p> <blockquote> <p>sondern die Bedienung mit der Maus ist das größere Problem.</p> </blockquote> <p>Man könnte den Unterpunkt-<code>ul</code> Padding verpassen – und transparenten Hintergrund. Die Hintergrundfarbe bekommen die <code>li</code> oder <code>a</code> darin. Das vergrößert die Fläche und sollte auch schräge Mausbewegungen ermöglichen.</p> <blockquote> <p>bei einem Menü muss man sicherstellen, dass es 0,3 Sekunden bis 0,5 dauert, bevor das Menü wieder geschlossen wird.</p> </blockquote> <p>Das sollte mit <code>transition</code> möglich sein – wenn man denn das Ausblenden über animierbare Eigenschaften realisiert.</p> </blockquote> <p>Die beiden Hinweise miteinander kombinieren, könnte zum Ergebnis führen (die vergrößerten Flächen könnten kurzzeitig, während der Mausbewegung und ganz kurz danach (eben die 0,3 Sekunden) noch Links nebenan überdecken. - Es sei denn, sie erhalten einen niedrigen z-index. Das würde dafür sorgen, dass man mit der Maus so lange über dem Elternelement bleibt, bis man das Kindelement erreicht und kann schon sofort auf das Kind-Element klicken, weil das Elternelement darunter gestapelt wird. Kommt auf einen Versuch an!</p> <p>Ich brauche aber Hilfe mit dem JS — wollen wir gemeinsam basteln, <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> ?</p> <p><a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">Ich stelle das mal auf GitHub bereit</a>. Wer will kann mitmachen.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723262#m1723262 Felix Riesterer http://felix-riesterer.de 2018-05-29T14:41:11Z 2018-05-29T14:41:11Z Untermenu aufklappen - Anfängerfrage <p>Lieber beatovich,</p> <blockquote> <p>Warum willst du sie verlinkbar machen?</p> </blockquote> <p>weil halt! Im Ernst: Der Op hat in seinem Code-Beispiel für alle <code><li></code> einen Link als Kindelement, egal, ob es noch eine verschachtelte Liste mit Unterkategorien darin gibt, oder nicht. Für meine Belange benötige ich auch so etwas, daher hatte ich das jsfiddle-Beispiel erstellt.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723263#m1723263 Felix Riesterer http://felix-riesterer.de 2018-05-29T14:49:05Z 2018-05-29T14:49:05Z Untermenu aufklappen - Anfängerfrage <p>Lieber Gunnar,</p> <blockquote> <p>Ich schalte da <code>aria-expanded</code> zwischen <code>"false"</code> und <code>"true"</code> um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.</p> </blockquote> <p>die Attributwerte <code>true</code> und <code>false</code> sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt? Vergleiche:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>expand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> Text <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">aria-expanded</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>expand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> Text <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">aria-contracted</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>expand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> Text <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p>Das sähe für mich eher nach sinnvollen HTML-Attributnamen aus, als dass man Zustände über generische Attribut-Werte steuert. Ach ja, das <code>aria-expanded</code> wäre nach meinem Dafürhalten nicht notwendig, da es den Standardzustand repräsentieren sollte. Damit kann dann auch kein Konflikt entstehen, wenn man beide Attributnamen einsetzen würde:</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">aria-expanded</span> <span class="token attr-name">aria-contracted</span><span class="token punctuation">></span></span> </code></pre> <p>Vielleicht anstelle von <code>aria-contracted</code> auch <code>aria-collapsed</code>?</p> <p>Aber was weiß ich schon.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723284#m1723284 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-29T20:45:33Z 2018-05-29T20:45:33Z Untermenu aufklappen - Anfängerfrage <p>@@Gunnar Bittersmann</p> <blockquote> <blockquote> <p>Mich würde daran nur stören, dass die Spaltenüberschriften (lies: aufklappbare Überbegriffe) bei diesem Konzept selbst nicht verlinkbar sind.</p> </blockquote> <p>Das sollte in jenem Fall so sein. Das können aber auch – wie im hiesigen Fall – Links sein.</p> </blockquote> <p>Äh nein, das können sie nicht so einfach. Ich hatte das ja so gebaut, dass sich das Untermenü nicht beim Hovern bzw. Fokussieren öffnet, sondern beim Click. Das geht natürlich bei Links so nicht, da ein Click ja zur verlinkten Seite führen soll.</p> <p>Es müsste tatsächlich das Konzept geändert werden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723264#m1723264 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T14:52:58Z 2018-05-29T14:52:58Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>die Attributwerte <code>true</code> und <code>false</code> sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt? Vergleiche:</p> </blockquote> <p>Du kannst mit JS Verhalten registrieren, indem du allein auf [aria-expanded] eine query durchführst.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723266#m1723266 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T15:00:44Z 2018-05-29T15:00:44Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p><button>expand</button></p> </blockquote> <p>Und jetzt kennzeichne den Schalterzustand.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723957#m1723957 at 2018-06-07T01:05:49Z 2018-06-07T01:05:49Z Untermenu aufklappen - Anfängerfrage <p>Hallo Felix.</p> <blockquote> <blockquote> <p>Ich schalte da <code>aria-expanded</code> zwischen <code>"false"</code> und <code>"true"</code> um. Ich müsste aber auch nochmal genauer nachlesen/testen, ob das schon reicht.</p> </blockquote> <p>die Attributwerte <code>true</code> und <code>false</code> sind meiner Meinung nach ein echtes Design-Versagen bei einer beschreibenden Sprache wie HTML. Warum wird da am Wert geschraubt, anstatt dass man das Vorhandensein eines Attributs alleine nimmt?</p> </blockquote> <p>In erster Linie weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.</p> <p>MfG, at</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723268#m1723268 Felix Riesterer http://felix-riesterer.de 2018-05-29T15:04:22Z 2018-05-29T15:04:22Z Untermenu aufklappen - Anfängerfrage <p>Lieber beatovich,</p> <blockquote> <blockquote> <p><button>expand</button></p> </blockquote> <p>Und jetzt kennzeichne den Schalterzustand.</p> </blockquote> <p>nach meinem Dafürhalten ist er automatisch expandiert. Nur wenn er es nicht sein sollte, braucht es ein Attribut.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723269#m1723269 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-29T15:08:12Z 2018-05-29T15:08:12Z Untermenu aufklappen - Anfängerfrage <blockquote> <blockquote> <blockquote> <p><button>expand</button></p> </blockquote> <p>Und jetzt kennzeichne den Schalterzustand.</p> </blockquote> <p>nach meinem Dafürhalten ist er automatisch expandiert. Nur wenn er es nicht sein sollte, braucht es ein Attribut.</p> </blockquote> <p>Und woran erkennst du, dass er expandiert ist? Wir sind noch nicht bei css :has() angekommen.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723270#m1723270 Felix Riesterer http://felix-riesterer.de 2018-05-29T15:08:40Z 2018-05-29T15:08:40Z Untermenu aufklappen - Anfängerfrage <p>Hallo Ingrid,</p> <p>eigentlich möchte ich das <code><li></code> expandieren oder kollabieren. Daher braucht der Schalter keinen eigenen Zustand:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">aria-collapsed</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>expand<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>Text<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> </code></pre> <p>Duch <code class="language-css">li[aria-collapsed] button</code> kann ich doch das Aussehen des Buttons steuern. Seine Eigenschaft wäre "aria-collapsed", weil er sie von seinem Elternelement erbt.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723300#m1723300 marctrix self@mhis.de https://www.mhis.de 2018-05-30T09:15:57Z 2018-05-30T09:15:57Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <blockquote> <blockquote> <p>Daher wäre es nett wenn du einfach heute Abend noch mal nachfragst, falls ich vergessen sollte, dir dafür etwas zu schreiben.</p> </blockquote> <p>Was hiermit geschieht.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723297#m1723297" rel="noopener noreferrer">Bin erst jetzt dazu gekommen.</a></p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723304#m1723304 Christian Kruse https://wwwtech.de/about 2018-05-30T09:31:28Z 2018-05-30T09:31:28Z Untermenu aufklappen - Anfängerfrage <p>Hallo marctrix,</p> <blockquote> <blockquote> <p>Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). </p> </blockquote> <p>Dann kommt das wohl nicht zurück?</p> </blockquote> <p>Es wurde halt entfernt als Vereinfachung und um das UI-Cluttering zu reduzieren. Ich hab per se auch kein Problem damit, dass in V5 wieder einzuführen. Müsste man sich halt dann überlegen, wie, damit nicht wieder 234234234 Icons vor jeder Nachricht stehen.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723298#m1723298 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-30T09:04:56Z 2018-05-30T09:05:30Z Untermenu aufklappen - Anfängerfrage <p>Ich verbessere mal</p> <pre><code class="block"> <nav> <ul> <li> <a href="#navgroup1">Item 1</a> <ul id="navgroup1"> <li><a href="">Subitem 4</a></li> <li><a href="">Subitem 5</a></li> </ul> </li> ... </code></pre> <p>Wenn man schon Links für labels verwendet, sollte man auch dessen Fähigkeiten nutzen.</p> <p>Deshalb werte ich hier auch :target aus.</p> <pre><code class="block">nav ul:target, nav a:focus + ul, nav a:hover + ul {height:auto} </code></pre> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723299#m1723299 marctrix self@mhis.de https://www.mhis.de 2018-05-30T09:15:04Z 2018-05-30T09:15:04Z Untermenu aufklappen - Anfängerfrage <p>Hej beatovich,</p> <blockquote> <pre><code class="block"> <nav> <ul> <li> <a href="#navgroup1">Item 1</a> <ul id="navgroup1"> <li><a href="">Subitem 4</a></li> <li><a href="">Subitem 5</a></li> </ul> </li> ... </code></pre> <p>Wenn man schon Links für labels verwendet, sollte man auch dessen Fähigkeiten nutzen.</p> </blockquote> <p>So war es nicht gemeint, sorry, mag missverständlich sein mit den ganzen Hashtags an stelle von Beispiel-Links. Hier noch mal:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723303#m1723303 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-30T09:22:56Z 2018-05-30T09:22:56Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>So war es nicht gemeint, sorry, mag missverständlich sein mit den ganzen Hashtags an stelle von Beispiel-Links. Hier noch mal:</p> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>seite1.html#kapitel5<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Erstes Dokument Kapitel 5<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> […] <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Gut, damit haben wir aber effektiv 2 Arten vn Navigationen, nämlich</p> <ul> <li>eine 1-level Navigation für alles was nicht hovert sondern nur focussiert&klickt.</li> <li>eine 2-Level Navigation für alle Geräte, die fokussieren von klicken trennen können oder hover erzeugen.</li> </ul> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723308#m1723308 marctrix self@mhis.de https://www.mhis.de 2018-05-30T09:55:10Z 2018-05-30T10:00:10Z Untermenu aufklappen - Anfängerfrage <p>Hej beatovich,</p> <blockquote> <p>Gut, damit haben wir aber effektiv 2 Arten vn Navigationen, nämlich</p> <ul> <li>eine 1-level Navigation für alles was nicht hovert sondern nur focussiert&klickt.</li> <li>eine 2-Level Navigation für alle Geräte, die fokussieren von klicken trennen können oder hover erzeugen.</li> </ul> </blockquote> <p>Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.</p> <p>Erfüllt werden die folgenden relevanten SCs der WCAG (Dein Hinweis bezog sich vermutlich auf SC 3.2.3?):</p> <p>#<a href="https://www.digitala11y.com/understanding-sc-2-1-2-no-keyboard-trap/" rel="nofollow noopener noreferrer">2.1.2 No Keyboard Trap</a></p> <p>##Begründung</p> <p>Die Seite lässt sich komplett durchtabben, der Tastaturfokus bleibt nirgends „hängen“.</p> <p><a href="https://www.digitala11y.com/category/web-accessibility/wcag/page/2/" rel="nofollow noopener noreferrer">2.4.1 Bypass Blocks</a></p> <p>##Begründung</p> <p>HTML wird bestimmungsgemäß verwendet, also beispielsweise Listen für die Navigation. Listen lassen sich für Screenreader-Nutzer per Tastendruck überspringen, so dass diese nciht komplett durchgehabt werden müssen.</p> <p>Was mein GitHub-Beispiel (noch) nicht enthält, aber mein ergänzender Beitrag für Gerhard1: für sehende Tastatur-Nutzer gehören da noch Skiplinks an den Seitenanfang.</p> <p>Hier habe ich mich erst mal ausschließlich um die Navigation gekümmert.</p> <p>#<a href="https://www.digitala11y.com/focus-order-understanding-sc-2-4-3/" rel="nofollow noopener noreferrer">2.4.3 Focus Order</a></p> <p>##Begründung</p> <p>Beim Durchtabben der Seite folgt der Fokus der natürlichen Leserichtung des Kulturbereiches, in dessen Sprache die Seite hauptsächlich verfasst ist (hier Deutsch mit einer typischen Leserichtung von links nach rechts, dann von oben nach unten)</p> <p>#<a href="https://www.digitala11y.com/link-purpose-in-context-understanding-sc-2-4-4/" rel="nofollow noopener noreferrer">2.4.4 Link Purpose (In Context)</a></p> <p>##Begründung</p> <p>Der programmatisch ermittelbare Linktext (also der <code>accessible name</code>, hier Name des HTML-Dokumentes und ggfs. Kapitelname) sind aussagekräftig, verständlich und eindeutig.</p> <p>#<a href="https://www.digitala11y.com/focus-visible-understanding-sc-2-4-7/" rel="nofollow noopener noreferrer">2.4.7 Focus Visible</a></p> <p>##Begründung</p> <p>Die Hervorhebung des fokussierten Elementes ist mindestens so deutlich wie die Hervorhebung beim Überfahren mit der Maus (tatsächlich sind meine Hervorhebungen immer besonders deutlich, da ich selber gerne mit der Tastatur navigiere).</p> <p>#<a href="https://www.digitala11y.com/3-2-4-consistent-identification/" rel="nofollow noopener noreferrer">3.2.4 Consistent Identification</a></p> <p>#<a href="https://www.digitala11y.com/3-2-3-consistent-navigation/" rel="nofollow noopener noreferrer">3.2.3 Consistent Navigation</a></p> <p>##Begründung</p> <p>Die Navigationselemente werden auf allen Seiten eingesetzt und verändern sich weder im Aussehen, noch in ihrer Position oder semantischen Auszeichnung. Sie können also aufgrund ihrer identischen Darstellung über das gesamte Angebot hinweg leicht identifiziert werden.</p> <p>#Nicht erfüllte SCs</p> <p>##<a href="https://www.digitala11y.com/category/web-accessibility/wcag/page/2/" rel="nofollow noopener noreferrer">2.4.5. Multiple ways to locate web pages</a></p> <p><strong>Begründung</strong></p> <p>Die einzelnen Seiten sind ausschließlich über die Hauptnavigation erreichbar. Alternative Zugangswege fehlen. Eine Sitemap und/oder Suche wären als Abhilfe geeignet und sollten daher in die reale Webseite noch integriert werden. In dem vorliegenden Beispiel lässt sich das prinzipbedingt (Ausschnitt aus einer Webseite, keine kompletten Dokumente) nicht umsetzen</p> <p>Wenn ich etwas nicht bedacht habe, <a href="/users/2153" class="mention registered-user" rel="noopener noreferrer">@beatovich</a> , bitte ich um Nachricht. Ich werde das dann mit berücksichtigen.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723309#m1723309 marctrix self@mhis.de https://www.mhis.de 2018-05-30T09:58:33Z 2018-05-30T09:58:33Z Untermenu aufklappen - Anfängerfrage <p>Hej Christian,</p> <blockquote> <blockquote> <blockquote> <p>Gab es. Wurde ersetzt durch die „Beitrag als interessant markieren“-Funktion (das Sternchen-Icon). </p> </blockquote> <p>Dann kommt das wohl nicht zurück?</p> </blockquote> <p>Es wurde halt entfernt als Vereinfachung und um das UI-Cluttering zu reduzieren. Ich hab per se auch kein Problem damit, dass in V5 wieder einzuführen. Müsste man sich halt dann überlegen, wie, damit nicht wieder 234234234 Icons vor jeder Nachricht stehen.</p> </blockquote> <p>Habe mir schon so etwas gedacht und ja: zu viele Optionen sind eine Barriere. Wenn das nicht zu aufwändig wäre, würde ich mir wünschen, dass es in den Einstellungen zwei Radio-Buttons „eingeschränkte Optionen“ und „alle Optionen“ gäbe.</p> <p>Dann kann das jeder selber ein- und ausschalten. Als default halte ich die wenigen Optionen für sinnvoll.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723310#m1723310 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-30T10:16:18Z 2018-05-30T10:16:18Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.</p> </blockquote> <p>Du willst sagen, weil die (für Mobiles unerreichbare) 2nd-Level Navigation eine redundante Funktion einnimmt (sie nimmt die seiteninterne Navigation der Zielseite vorweg), ist mein Einwand unwichtig?</p> <p>Dann wollen wir hoffen, dass das auch so bleibt.</p> <p>Ich kann mich übrigens mit dem Gedanken <em>Tastatur-User sehen schlecht</em> nicht so recht anfreunden.</p> <p>Aber ich habe auch schon Blinde auf der Strasse <em>angebrüllt</em>.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723314#m1723314 Christian Kruse https://wwwtech.de/about 2018-05-30T11:12:44Z 2018-05-30T11:12:44Z Untermenu aufklappen - Anfängerfrage <p>Hallo marctrix,</p> <blockquote> <p>Habe mir schon so etwas gedacht und ja: zu viele Optionen sind eine Barriere. Wenn das nicht zu aufwändig wäre, würde ich mir wünschen, dass es in den Einstellungen zwei Radio-Buttons „eingeschränkte Optionen“ und „alle Optionen“ gäbe.</p> </blockquote> <p>Hm. Was ich machen könnte wäre eine Klasse auf das Body- oder HTML-Element zu setzen und dann via CSS Bedienelemente auszublenden.</p> <p>Ein auslassen in den Templates wäre sehr aufwendig zu pflegen und noch aufwendiger zu testen…</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723311#m1723311 marctrix self@mhis.de https://www.mhis.de 2018-05-30T10:24:48Z 2018-05-30T10:24:48Z Untermenu aufklappen - Anfängerfrage <p>Hej beatovich,</p> <blockquote> <blockquote> <p>Jein, weil die zweite zusätzlich immer jedem zur Verfügung steht.</p> </blockquote> <p>Du willst sagen, weil die (für Mobiles unerreichbare) 2nd-Level Navigation eine redundante Funktion einnimmt (sie nimmt die seiteninterne Navigation der Zielseite vorweg), ist mein Einwand unwichtig?</p> </blockquote> <p>Nein. Ich glaubte, dein Einwand zielt auf verschiedene Darstellungen (SC 3.2.3) ab, die verwirren könnten. Ich meine aber das trifft nicht zu, weil das Erscheinungsbild konsistent ist.</p> <p>Das Anbieten von Navigationen über mehrere Stufen ist seit jeher Accessibility-Praxis und bei großen Sites oft unvermeidbar (um die Hauptnavigation nicht zu überfrachten, siehe Über-Kreuz-Navigation, wie z.B. hier auf <a href="https://www.ble.de/DE/Projektfoerderung/Foerderungen-Auftraege/foerderungen-auftraege_node.html" rel="nofollow noopener noreferrer">www.ble.de</a>)</p> <blockquote> <p>Dann wollen wir hoffen, dass das auch so bleibt.</p> </blockquote> <p>Niemand schaut in die Zukunft und oft sind Anpassungen nötig, wenn eine Seite wächst. Das hier gezeigte Konzept kann aber mitwachsen. Dann erscheinen an der Stelle, wo sich derzeit die Kapitel-Überschriften befinden halt verschachtelte Listen. Hier lässt sich eine dritte Navigationsebene prima unterbringen (würde ich aus der Kopf-Navi raushalten, aus diversen Gründen).</p> <blockquote> <p>Ich kann mich übrigens mit dem Gedanken <em>Tastatur-User sehen schlecht</em> nicht so recht anfreunden.</p> </blockquote> <p>Musst du auch nicht. Wer verlangt das denn von dir?</p> <blockquote> <p>Aber ich habe auch schon Blinde auf der Strasse <em>angebrüllt</em>.</p> </blockquote> <p>Kann nötig sein. </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723313#m1723313 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-30T11:06:03Z 2018-05-30T11:06:03Z Untermenu aufklappen - Anfängerfrage <p>hallo</p> <blockquote> <p>Nein. Ich glaubte, dein Einwand zielt auf verschiedene Darstellungen (SC 3.2.3) ab, die verwirren könnten. Ich meine aber das trifft nicht zu, weil das Erscheinungsbild konsistent ist.</p> </blockquote> <p>Na mach erst mal den mobile Test.</p> <blockquote> <p>Das Anbieten von Navigationen über mehrere Stufen ist seit jeher Accessibility-Praxis und bei großen Sites oft unvermeidbar (um die Hauptnavigation nicht zu überfrachten, siehe Über-Kreuz-Navigation, wie z.B. hier auf <a href="https://www.ble.de/DE/Projektfoerderung/Foerderungen-Auftraege/foerderungen-auftraege_node.html" rel="nofollow noopener noreferrer">www.ble.de</a>)</p> </blockquote> <p>Ich kann dem durchaus zustimmen. Deshalb verwenden wir ja Javascript, aria-expanded und aria-hidden für jene die auf Animationen nicht verzichten wollen. Auf jeden Fall will man die Überfrachtung einer Seite mit fokusierbaren Elementen vermeiden, gerade dann, wenn sich diese als redundant erweisen.</p> <blockquote> <blockquote> <p>Ich kann mich übrigens mit dem Gedanken <em>Tastatur-User sehen schlecht</em> nicht so recht anfreunden.</p> </blockquote> <p>Musst du auch nicht. Wer verlangt das denn von dir?</p> </blockquote> <p>Du hast versucht, meine Bemerkung betreffs Tab-Taste mit Screenreadern zu beantworten.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723341#m1723341 Gerhard1 2018-05-30T17:16:10Z 2018-05-30T17:16:10Z Untermenu aufklappen - Anfängerfrage <p><a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@marctrix</a> und beatovich: Vielen Dank für die Hilfe, für eure Mühe. Ich hoffe, dass ich die verschiedenen Korrekturen richtig in das Original einbaue. Da ich morgen für 2 Wochen verreise, wird es etwas dauern. Falls ich dann noch Fragen habe, soll ich diese in diesem thread stellen oder einen neuen anfangen?</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723319#m1723319 marctrix self@mhis.de https://www.mhis.de 2018-05-30T13:07:24Z 2018-05-30T13:07:24Z Untermenu aufklappen - Anfängerfrage <p>Hej Christian,</p> <blockquote> <p>Hm. Was ich machen könnte wäre eine Klasse auf das Body- oder HTML-Element zu setzen und dann via CSS Bedienelemente auszublenden.</p> <p>Ein auslassen in den Templates wäre sehr aufwendig zu pflegen und noch aufwendiger zu testen…</p> </blockquote> <p>Verstehe. Für mich allein ohnehin zu viel Aufwand. Es hat niemand „ich auch“ geschrien. Also würde ich vorschlagen, es zu lassen. Komisch. Ich habe mir das schon oft gewünscht…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723320#m1723320 Christian Kruse https://wwwtech.de/about 2018-05-30T13:24:29Z 2018-05-30T13:24:29Z Untermenu aufklappen - Anfängerfrage <p>Hallo marctrix,</p> <blockquote> <p>Verstehe. Für mich allein ohnehin zu viel Aufwand. Es hat niemand „ich auch“ geschrien. Also würde ich vorschlagen, es zu lassen. Komisch. Ich habe mir das schon oft gewünscht…</p> </blockquote> <p>Warum ist dir das ausblenden via CSS nicht genug? Das sähe so aus: du setzt die Konfigurations-Option und dementsprechend wird <code>enhanced</code> oder <code>simple</code> auf <code><html></code> gesetzt. Und für die Klasse <code>simple</code> gäbe es z.B. vordefiniert im Foren-Stylesheet solche Regeln:</p> <pre><code class="block language-css"><span class="token selector">.simple .thread .message .mark-interesting</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.simple .thread .message .mark-unread</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723342#m1723342 marctrix self@mhis.de https://www.mhis.de 2018-05-30T17:18:51Z 2018-05-30T17:19:38Z Untermenu aufklappen - Anfängerfrage <p>Hej Christian,</p> <blockquote> <p>Warum ist dir das ausblenden via CSS nicht genug? </p> </blockquote> <p>Weil ich nicht möchte, dass andere mehr Daten laden müssen, für etwas das ich mir wünsche aber sonst niemand braucht.</p> <p>Das fände ich unfair.</p> <p>Ein schnelles web ist ein gutes web.</p> <p>Datensparsamkeit (hier mal ohne den Bezug zur DSGVO) ist immer gut.</p> <p>Marc</p> <p>PS: Ich weiß aber das Angebot zu schätzen! Danke für deine Bereitschaft!</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723343#m1723343 marctrix self@mhis.de https://www.mhis.de 2018-05-30T17:23:18Z 2018-05-30T17:23:18Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <blockquote> <p><a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@marctrix</a> und beatovich: Vielen Dank für die Hilfe, für eure Mühe.</p> </blockquote> <p>Keine Ursache. Vielleicht entsteht dabei ein gutes Menü für das Wiki oder gar ein Tutorial — mal schauen.</p> <blockquote> <p>Ich hoffe, dass ich die verschiedenen Korrekturen richtig in das Original einbaue.</p> </blockquote> <p>Wenn es fertig ist, werde ich auch eine fünfzeilige Anleitung schreiben. Mehr braucht es hoffentlich nicht.</p> <blockquote> <p>Da ich morgen für 2 Wochen verreise, wird es etwas dauern.</p> </blockquote> <p>Viel Spaß und komm gesund zurück!</p> <blockquote> <p>Falls ich dann noch Fragen habe, soll ich diese in diesem thread stellen oder einen neuen anfangen?</p> </blockquote> <p>Vermutlich sind das dann konkretere Dinge zu speziellen Aspekten. Da macht dann meiner Meinung nach ein neuer Thread Sinn. Du siehst ja, die können schnell länglich werden hier </p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723367#m1723367 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T06:50:16Z 2018-05-31T06:50:16Z Kleine Führung durch die unverständlichen Diskussionen! <p>hallo</p> <blockquote> <p>We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:</p> <p>„Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“</p> </blockquote> <p>Aber wer hover falsch einsetzt (hallo heise.de), der macht es Mausbenutzern noch schwerer.</p> <p>Die Maus ist die zuletzt zu berücksichtigende Option. Nur wenige Elemente in der Browsereigenen GUI reagieren auf hover. Meist blenden sie nur title Info ein.</p> <blockquote> <p>-- Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett</p> </blockquote> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723368#m1723368 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-31T06:50:35Z 2018-05-31T06:50:35Z Kleine Führung durch die unverständlichen Diskussionen! <p>Aloha ;)</p> <blockquote> <p>+1 für dein auseinanderdröseln der Diskussion. Dennoch ein Kontra. Wer behauptet denn sowas?</p> <blockquote> <p>Wenn du wissen willst, warum eine Navigation heutzutage nicht mehr auf hover setzen sollte …</p> </blockquote> <p>We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:</p> <p>„Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“</p> </blockquote> <p>ACK, mit "setzen sollte" meinte ich "nicht allein setzen sollte" oder "nicht hauptsächlich setzen sollte" oder "nicht in der Grundfunktionalität setzen sollte". Da war ich unpräzise.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723372#m1723372 Auge 2018-05-31T07:17:12Z 2018-05-31T07:17:12Z Kleine Führung durch die unverständlichen Diskussionen! <p>Hallo</p> <blockquote> <blockquote> <p>We hover weglässt, macht es Mausbenutzern unnötig schwer. Und das war schon immer so. Die Formulierung sollte deshalb besser folgendermaßen lauten:</p> <p>„Wenn du wissen willst, warum eine Navigation nicht allein auf hover setzen sollte …“</p> </blockquote> <p>Aber wer hover falsch einsetzt (hallo heise.de), der macht es Mausbenutzern noch schwerer.</p> </blockquote> <p>Wer auf der Autobahn falsch herum fährt, macht es den anderen Verkehrsteilnehmern schwer.</p> <p>Dass man etwas falsch machen/benutzen kann ist per se kein Grund, dieses Etwas nicht zu benutzen.</p> <blockquote> <p>Die Maus ist die zuletzt zu berücksichtigende Option.</p> </blockquote> <p>Sie ist <em>eine</em> zu berücksichtigende Technik. Das reicht.</p> <blockquote> <p>Nur wenige Elemente in der Browsereigenen GUI reagieren auf hover. Meist blenden sie nur title Info ein.</p> </blockquote> <p>Nur um das klarzustellen, sowohl ich, als auch, wenn ich ihn denn nicht völlig falsch verstanden habe, <a href="/users/3905" class="mention registered-user" rel="noopener noreferrer">@Camping_RIDER</a>, reden von der CSS Pseudoklasse <code>:hover</code>. Title-Attribute haben damit nichts zu tun, Links aber sehr wohl. Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.</p> <p>Das ist ein sowohl als auch.</p> <pre><code class="block language-css"><span class="token selector">a:focus, a:hover</span> <span class="token punctuation">{</span> <span class="token comment">/* was auch immer */</span> <span class="token punctuation">}</span> </code></pre> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723377#m1723377 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T07:42:26Z 2018-05-31T07:43:28Z Kleine Führung durch die unverständlichen Diskussionen! <p>hallo</p> <blockquote> <p>Nur um das klarzustellen, sowohl ich, als auch, wenn ich ihn denn nicht völlig falsch verstanden habe, <a href="/users/3905" class="mention registered-user" rel="noopener noreferrer">@Camping_RIDER</a>, reden von der CSS Pseudoklasse <code>:hover</code>. Title-Attribute haben damit nichts zu tun, Links aber sehr wohl. Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.</p> </blockquote> <p>Da stimme ich natürlich zu</p> <pre><code class="block language-css"><span class="token selector">:focus, :hover</span> <span class="token punctuation">{</span><span class="token property">outline</span><span class="token punctuation">:</span>2px solid orange<span class="token punctuation">}</span> </code></pre> <p>Das heisst aber noch lange nicht, dass das auf</p> <pre><code class="block language-css"><span class="token selector">:focus, :hover</span> <span class="token punctuation">{</span><span class="token comment">/*anything*/</span><span class="token punctuation">}</span> </code></pre> <p>ausgedehnt werden soll.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723390#m1723390 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-31T09:31:43Z 2018-05-31T09:45:38Z Kleine Führung durch die unverständlichen Diskussionen! <p>@@Auge</p> <blockquote> <p>Es spricht absolut nichts dafür, Mausbenutzern die Hervorhebung, die für Tastaturbenutzer eingefordert wird, zu verweigern.</p> </blockquote> <p>Ja. Aber auch nichts dagegen.</p> <p>Der Mausnutzer verfolgt ja seinen Cursor. Und dieser ändert sich über einem Link. Eine zusätzliche Kennzeichnung „hier ist ein Link“ mag ein netter Effekt sein oder auch nur Effekthascherei – notwendig ist das nicht unbedingt.</p> <p>Man kann auch <a href="https://codepen.io/gunnarbittersmann/pen/rKVBXR" rel="noopener noreferrer">unterschiedliche Stile für <code>:focus</code> und <code>:hover</code></a> vorsehen:</p> <ul> <li> <p>einen subtilen für Mausnutzer</p> <p><a href="/images/d2f76161-8c45-4466-a4ef-ff5b7de5b6a8.png" rel="noopener noreferrer"><img src="/images/d2f76161-8c45-4466-a4ef-ff5b7de5b6a8.png?size=medium" alt="" loading="lazy"></a></p> </li> <li> <p>und einen deutlich erkennbaren für Tastaturnutzer:</p> <p><a href="/images/08b28427-df67-4608-8217-fb6184144d82.png" rel="noopener noreferrer"><img src="/images/08b28427-df67-4608-8217-fb6184144d82.png?size=medium" alt="" loading="lazy"></a></p> </li> </ul> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723387#m1723387 marctrix self@mhis.de https://www.mhis.de 2018-05-31T09:07:21Z 2018-05-31T09:07:21Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej Rolandi,</p> <blockquote> <p>Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.</p> </blockquote> <blockquote> <p>Also müsste es doch genügend Beispiele geben</p> </blockquote> <p>Das denke ich auch jedesmal, wenn ich mich mal wieder auf die Suche nach einem barrierefreien Menü mache, man bleibt aber immer an denselben wenigen Kandidaten hängen, die meist nicht alle Anwendungsfälle abdecken oder sich nicht so frei gestalten lassen, wie von einem Designer gewünscht.</p> <p>Wenn man dann etwas selber entwickelt, gibt man das dann nicht frei. Dann gibt es zwar u. U. etwas barrierefreies, man findet es aber nicht, weil es kein GitHub-Repository o.ä. Mit Anleitung usw gibt.</p> <p>Wenn es auf einem Webseite eines Autohauses ein barrierefreies Menü gibt, wirst du es nie finden, wenn du nach „barrierefreies Menü“ suchst.</p> <p>Es gibt mit compare eine Website, die solche Komponenten im web sucht, dann beurteilt und auch Links zu den Seiten bereits stellt, wo die Komponenten verwendet werden.</p> <p>Leider fallen die dort vorgestellten Kandidaten meist bei den Tests durch.</p> <p>Meine aktuelle Idee: die Seiten besuchen und analysieren, die vom wcag als vorzeige-Projekte für die Umsetzung der Wcag 2.1 herhalten sollen…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723388#m1723388 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T09:19:59Z 2018-05-31T09:19:59Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <blockquote> <p>Hi all, ich habe gerade diesen thread entdeckt und teilweise durchgelesen. Was mich wundert ist die Tatsache, dass man über ein Thema diskutiert, das doch millionenfach realisiert ist.</p> <p>Es gibt doch kaum einen Internetauftritt, der nicht solche Menus enthält. Also müsste es doch genügend Beispiele geben</p> </blockquote> <p>Das einzig erstaunliche ist doch, dass ich nicht schreiben kann</p> <pre><code class="block"><nav useragent="render"> <!-- Verschachtelte Liste --> </nav> </code></pre> <p>Offensichtlich wissen nicht mal User-Agents wie man eine Navigation für alle Fälle rendert. Sonst hätte man da einen Standard.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723651#m1723651 Rolandi 2018-06-02T19:25:40Z 2018-06-02T19:26:22Z Untermenu aufklappen - Was für eine Diskussion! <p>Hallo, auf die Gefahr hin, dass es Unfug ist, möchte ich fragen, ob das Beispiel <a href="http://wiki.selfhtml.org/wiki/CSS/Tutorials/Dropdown-Men%C3%BCs_mit_CSS_gestalten" rel="nofollow noopener noreferrer">Submenü ausblenden</a> dem Wunsch von Gerhard entsprechen könnte?</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723392#m1723392 Rolandi 2018-05-31T09:42:37Z 2018-05-31T09:42:37Z Untermenu aufklappen - Was für eine Diskussion! <p>Hi,</p> <blockquote> <p>Offensichtlich wissen nicht mal User-Agents wie man eine Navigation für alle Fälle rendert. Sonst hätte man da einen Standard.</p> </blockquote> <p>ich möchte zwar jetzt nicht eine erneute Spezialistndiskussion bzw. einen Disput auslösen. Der Themenstarter wollte sicher keine Standardlösung, die alles abdeckt, sondern, wenn ich es recht verstehe, ein Auswahlmenu mit einem darunterliegenden Menu ohne weitere Verschachtelungen.</p> <p>Dafür gibt es doch sicher mehrere empfehlenswerte Lösungen. Schön wäre es zu lesen:</p> <ul> <li>Laut Selfhtml-Testbericht 2018:</li> <li>Lösung a: +++</li> <li>. . .</li> <li>Lösung x: ---</li> </ul> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723395#m1723395 marctrix self@mhis.de https://www.mhis.de 2018-05-31T09:52:06Z 2018-05-31T09:52:06Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej Rolandi,</p> <blockquote> <p>Schön wäre es zu lesen:</p> <ul> <li>Laut Selfhtml-Testbericht 2018:</li> <li>Lösung a: +++</li> <li>. . .</li> <li>Lösung x: ---</li> </ul> </blockquote> <p>Die Idee finde ich cool. Das wäre eine Idee für den Blog!</p> <p><strong>Vielleicht</strong> mache ich mal so was: Vortstellubg verschiedener Menüs, die von sich behaupten barrierefrei zu sein und eine Bewertung der vor- und Nachteile.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723396#m1723396 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T09:52:47Z 2018-05-31T09:52:47Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <blockquote> <p>ich möchte zwar jetzt nicht eine erneute Spezialistndiskussion bzw. einen Disput auslösen. Der Themenstarter wollte sicher keine Standardlösung, die alles abdeckt, sondern, wenn ich es recht verstehe, ein Auswahlmenu mit einem darunterliegenden Menu ohne weitere Verschachtelungen.</p> </blockquote> <p>So wie ich es verstehe, ist seine Navigation (kein Label sondern ein Link) bereits als Spezialfall anzusehen.</p> <blockquote> <p>Dafür gibt es doch sicher mehrere empfehlenswerte Lösungen.</p> </blockquote> <p>Dafür muss man erst mal verbreitete Anwendungen finden.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723401#m1723401 Rolandi 2018-05-31T11:33:58Z 2018-05-31T11:38:13Z Untermenu aufklappen - Was für eine Diskussion! <p>Ich weiß zwar nicht, was hier mit einem label gemeint ist. Es handelt sich nach meiner Ansicht um den trivialen, <strong>alltäglichen</strong> Fall:</p> <ol> <li>Man klickt, hovert oder was auch immer auf "über uns" und wird zur entsprechenden Seite "Über uns" umgeleitet.</li> <li>Man klickt, hovert oder was auch immer auf eine Untermenü von "über uns" und wird zum entsprechenden Kapitel (z.B. "Was wir tun") auf der Seite "Über uns" umgeleitet.</li> </ol> <p>Mehr doch nicht?</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723402#m1723402 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T12:00:38Z 2018-05-31T12:00:38Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <blockquote> <ol> <li>Man klickt, hovert oder was auch immer auf "über uns" und wird zur entsprechenden Seite "Über uns" umgeleitet.</li> <li>Man klickt, hovert oder was auch immer auf eine Untermenü von "über uns" und wird zum entsprechenden Kapitel (z.B. "Was wir tun") auf der Seite "Über uns" umgeleitet.</li> </ol> <p>Mehr doch nicht?</p> </blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Über uns<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wws<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wer wir sind<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>/wir.shtml#wwt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Was wir tun<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> </code></pre> <p>Sobald dies ein Klappmenu sein soll, handelt es sich um einen Spezialfall. Klappmenues verlangen nach einem Button mit Label, welche die einzublendende Liste erst sichtbar macht.</p> <ul> <li>Der Spazialfall ligt vor, indem die Links der Untergruppe NUR Fragmente der Seite der Hauptgruppe sein dürfen.</li> <li>Der Spezialfall liegt vor, weil es mit mobiles keine Möglichkeit gibt, an die Untergruppe zu kommen.</li> </ul> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723411#m1723411 marctrix self@mhis.de https://www.mhis.de 2018-05-31T13:39:41Z 2018-05-31T13:40:48Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej beatovich,</p> <blockquote> <blockquote> <p>Mehr doch nicht?</p> </blockquote> </blockquote> <p>Sehe ich genauso, Rolandi.</p> <blockquote> <ul> <li>Der Spazialfall ligt vor, indem die Links der Untergruppe NUR Fragmente der Seite der Hauptgruppe sein dürfen.</li> </ul> </blockquote> <p>Das ist egal. Hier spart es die Notwendigkeit von extra-Button, die aber <strong>immer</strong> entfällt, wenn man eine Überkreuznavigation anbietet, oder etwas vergleichbares wobei die 2. und weitere Menü-Ebenen auf den Unterseiten angeboten werden, ohne dass irgendetwas erst aufgeklappt werden muss.</p> <blockquote> <ul> <li>Der Spezialfall liegt vor, weil es mit mobiles keine Möglichkeit gibt, an die Untergruppe zu kommen.</li> </ul> </blockquote> <p>Es gibt keine derartige Vorgabe. Es ist durchaus erlaubt die typischen Pfeile anzubieten.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723413#m1723413 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T13:43:11Z 2018-05-31T13:43:11Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <p>Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723443#m1723443 Rolandi 2018-05-31T17:01:09Z 2018-05-31T17:01:09Z Untermenu aufklappen - Was für eine Diskussion! <blockquote> <blockquote> <p>Mehr doch nicht?</p> </blockquote> </blockquote> <blockquote> <p>Sehe ich genauso, Rolandi.</p> </blockquote> <p>Gerade bin ich auf <a href="https://www.pc-magazin.de/ratgeber/css-eigenschaft-float-1027451-14610.html" rel="nofollow noopener noreferrer">dies</a> gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723418#m1723418 marctrix self@mhis.de https://www.mhis.de 2018-05-31T14:17:19Z 2018-05-31T14:17:19Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej beatovich,</p> <blockquote> <p>Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.</p> </blockquote> <p>Sag mir, wenn er dir in den Schoß gefallen ist!</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723419#m1723419 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-05-31T14:22:23Z 2018-05-31T14:22:23Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <blockquote> <blockquote> <p>Ich warte auf den Beweis, dass das verbreitete Praxis und nicht Spezialfall ist.</p> </blockquote> <p>Sag mir, wenn er dir in den Schoß gefallen ist!</p> </blockquote> <p>Ich kann mich nicht erinnern, diesem Fall je begegnet zu sein.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723446#m1723446 marctrix self@mhis.de https://www.mhis.de 2018-05-31T18:40:35Z 2018-05-31T18:40:35Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej Rolandi,</p> <blockquote> <blockquote> <blockquote> <p>Mehr doch nicht?</p> </blockquote> <p>Sehe ich genauso, Rolandi.</p> </blockquote> <p>Gerade bin ich auf <a href="https://www.pc-magazin.de/ratgeber/css-eigenschaft-float-1027451-14610.html" rel="nofollow noopener noreferrer">dies</a> gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.</p> </blockquote> <p>Das funktioniert nur auf dem Desktop, wenn man sehen und eine Maus bedienen kann, ist also für die meisten Benutzer unbedienbar.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723447#m1723447 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-05-31T18:42:40Z 2018-05-31T18:42:40Z Untermenu aufklappen - Was für eine Diskussion! <p>@@Rolandi</p> <blockquote> <p>Gerade bin ich auf <a href="https://www.pc-magazin.de/ratgeber/css-eigenschaft-float-1027451-14610.html" rel="nofollow noopener noreferrer">dies</a> gestoßen "Verschachtelte Listen als Untermenüs". Dies müsste doch das sein, was Gerhard meinte.</p> </blockquote> <p>Nein, das ist grober Unfug.</p> <p><em>„Mit dem Selektor <code>.menu li:hover ul</code> wird nun die Stildefinition für den Hover-Effekt auf die geschachtelte Aufzählungsliste angewandt. Mit der Einstellung <code>display: block;</code> zeigen Sie diese an.“</em></p> <p>Nein. Das funktioniert eben nicht. Die wenigsten Geräte haben sowas wie <code>:hover</code> – und selbst diese nur für einen Teil der Nutzer.</p> <p>Wie hier schon mehrfach gesagt wurde, muss ein solches Menü sowohl mit Tastatursteuerung als auch mit Touchscreen bedienbar sein.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723455#m1723455 Rolandi 2018-05-31T22:00:18Z 2018-05-31T22:00:18Z Untermenu aufklappen - Was für eine Diskussion! <blockquote> <blockquote> <p>Dies müsste doch das sein, was Gerhard meinte.</p> </blockquote> <p>Nein, das ist grober Unfug.</p> </blockquote> <p>Beachte: Der Ton macht die Musik!</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723457#m1723457 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-05-31T22:57:34Z 2018-05-31T22:58:11Z Untermenu aufklappen - Was für eine Diskussion! <p>Aloha ;)</p> <blockquote> <blockquote> <blockquote> <p>Dies müsste doch das sein, was Gerhard meinte.</p> </blockquote> <p>Nein, das ist grober Unfug.</p> </blockquote> <p>Beachte: Der Ton macht die Musik!</p> </blockquote> <p>Völlig richtig.</p> <p>Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.</p> <p>Das grenzt schon fast ein wenig an Ignoranz und - um im Bild zu bleiben - mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.</p> <p>Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723466#m1723466 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-01T05:06:13Z 2018-06-01T05:06:13Z Untermenu aufklappen - Was für eine Diskussion! <p>@@Rolandi</p> <blockquote> <blockquote> <p>Nein, das ist grober Unfug.</p> </blockquote> <p>Beachte: Der Ton macht die Musik!</p> </blockquote> <p>Wenn „Unfug“ für dich schlechter Ton ist, lebst du in einer anderen Welt als ich.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723463#m1723463 marctrix self@mhis.de https://www.mhis.de 2018-06-01T04:33:26Z 2018-06-01T04:33:26Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej Camping_RIDER,</p> <blockquote> <blockquote> <blockquote> <blockquote> <p>Dies müsste doch das sein, was Gerhard meinte.</p> </blockquote> <p>Nein, das ist grober Unfug.</p> </blockquote> <p>Beachte: Der Ton macht die Musik!</p> </blockquote> <p>Völlig richtig.</p> <p>Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.</p> </blockquote> <p>Das war @Rolandi vermutlich gar nicht bewusst.</p> <p>Er kann ja nichts dafür, dass so eine große Zeitung so einen Quatsch online stellt.</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723464#m1723464 beatovich https://beat-stoecklin.ch/pub/musik-gitarrenunterricht-laufental.html 2018-06-01T04:46:38Z 2018-06-01T04:46:38Z Untermenu aufklappen - Was für eine Diskussion! <p>hallo</p> <blockquote> <p>Allerdings ist es auch nicht gerade schön, dass in einem Thread, in dem so etwa jedes zweite Posting betont, dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten und eben deshalb kein reines Hover-Menü genügt, ein vermeintlich funktionierendes Beispiel verlinkt wird, in dem aber wieder nur ein reines nicht-zugängliches Hover-Menü gezeigt wird.</p> </blockquote> <p>Dagegen, dass PC-Magazin eine no-js Navigation bereitstellt, ist erst mal nichts einzuwenden, auch wenn in dem Fall :focus{} fehlt.</p> <p>Aber dass ich bei Javascript dann nichts vollständig durchdachtes erhalte, ist der eigentliche Schwachpunkt.</p> <p>Mich irritiert aber die Doppelfunktion als Link/:hover-label. Ich könnte diese Doppelfunktion vollkommen übersehen, würde ich nicht zufällig im Firefox unten Links die url eingeblendet sehen.</p> <p>Wie ich schon erwähnte, habe ich solche Navigationen noch nicht beobachtet, was bedeutet, dass sie verbreiteter sind als ich es wahrnehme, oder dies tatsächlich eine seltene Ausnahme ist.</p> <p>Ich kann diese Art der Navigation nicht unterstützen.</p> <div class="signature">-- <br> Neu im Forum! Signaturen kann man ausblenden! </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723472#m1723472 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-01T06:33:29Z 2018-06-01T06:33:29Z Untermenu aufklappen - Was für eine Diskussion! <p>@@Camping_RIDER</p> <blockquote> <p>dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten</p> </blockquote> <p>Nei-en, Menüs sollen mindestens tastaturbedienbar und klickbedienbar und touchbedienbar sein. Was die Mindestanforderung nicht erfüllt, ist nicht bedienbar.</p> <blockquote> <p>… mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.</p> <p>Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.</p> </blockquote> <p>Wer nur Dur-Akkorde mag, der soll Schlager hören. Zu Musik gehören auch Moll-Akkorde; die machen Musik nicht schlechter.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723468#m1723468 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-01T05:18:42Z 2018-06-01T05:18:42Z Untermenu aufklappen - Was für eine Diskussion! <p>@@beatovich</p> <blockquote> <p>Dagegen, dass PC-Magazin eine no-js Navigation bereitstellt, ist erst mal nichts einzuwenden, auch wenn in dem Fall :focus{} fehlt.</p> </blockquote> <p>Bei Tastaturnavigation fehlt das Untermenü.</p> <p>Können wir bitte aufhören, bei unbedienbarem<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> Zeugs davon zu reden, dass da „nichts gegen einzuwenden“ wäre? Danke.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>nicht allgemein bedienbar ist allgemein nicht bedienbar, kurz unbedienbar <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723483#m1723483 Rolandi 2018-06-01T08:33:50Z 2018-06-01T08:33:50Z Untermenu aufklappen - Was für eine Diskussion! <blockquote> <p>Wenn „Unfug“ für dich schlechter Ton ist, lebst du in einer anderen Welt als ich.</p> </blockquote> <p>Ich sehe mich, was das Internet-Wissen angeht in etwa auf dem Level des Threadstarters. De Seit, die ich referiert habe sah dem Muster von Gerhard1 sehr ähnlich. Ich konnte nicht ahnen, dass ein Computermagazin ein solch schwaches Beispiel veröffentlicht. Der Ausdruck "Unfug" ist daher Unfug, um in deinem Jargon zu bleiben. Vielleich hättest du schreiben sollen: Der Artikel ist Unfug.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723487#m1723487 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-06-01T09:33:27Z 2018-06-01T09:33:27Z Untermenu aufklappen - Was für eine Diskussion! <p>Aloha ;)</p> <blockquote> <blockquote> <p>dass Menüs tastaturbedienbar, mindestens aber klickbedienbar, sein sollten</p> </blockquote> <p>Nei-en, Menüs sollen mindestens tastaturbedienbar und klickbedienbar und touchbedienbar sein. Was die Mindestanforderung nicht erfüllt, ist nicht bedienbar.</p> </blockquote> <p>Ich weiß, dass du gerne in Schwarz und Weiß malst. Ich habe das an dieser Stelle bewusst nicht getan. Ich habe auch bewusst „sollten“ statt „müssen“ geschrieben.</p> <p>Die Diskussion, dass wir hier nicht dazu da sind, um Anderen Vorschriften zu machen, hatten wir schon oft. Wir geben Tipps und Hinweise, die Leser müssen wissen was sie daraus machen.</p> <p>Es macht übrigens auch manchmal Sinn, Mindeststandards aus pädagogischen Gründen bewusst anders zu setzen. Zum Beispiel dann, wenn man davon ausgeht, dass man dadurch eher auf Offenheit stößt und somit wenigstens etwas verbessert, statt mit hohen Mindeststandards gleich in die das-mach-ich-sowieso-nicht-Tonne getreten zu werden.</p> <p>Ich weiß, du machst das aus den besten Gründen und du fährst da gerne eine klare Linie. Ich bin aber nicht sicher, ob dieser Ansatz auch immer die meisten Früchte trägt, oder, ob ein anderer Ansatz nicht vielleicht eine großflächigere, zwar nicht perfekte, aber dafür schrittweise besser werdende Veränderung hervorruft.</p> <p>Dass sowas wie das verlinkte Menü auf der Seite eines großen Magazins erscheint<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> und nichtmal dort von den Verantwortlichen kritisch hinterfragt wird, obwohl es <em>nicht mal</em> klickbedienbar (also touchbedienbar) ist, zeigt mir eigentlich, dass es nötig wäre, großflächig und niederschwellig zu arbeiten um überhaupt mal ein Verständnis des Ansatzes <strong>Zugänglichkeit</strong> zu erreichen.</p> <p>Um mal ein Bild zu geben: Wenn ich ein Haus bauen will, sollte ich erstmal den Untergrund untersuchen. Wenn ich stillschweigend voraussetze, dass der schon halten wird, dann ist es im Endeffekt fraglich ob mein Hausbau bleibende Früchte trägt. Egal wie fachmännisch korrekt mein Haus gebaut ist. Dann doch vielleicht mal lieber übergangsweise die windschiefe Hütte auf festem Grund.</p> <p>Ich mach dir nen Vorschlag: Ich nörgel nicht dran rum, wenn du Imperative nutzt, die ich auf zwischenmenschlich-kommunikativer Ebene für vergriffen halte und du nörgelst nicht dran rum, wenn ich dieselben Imperative absichtlich nicht nutze und nur sehr relativiert aufgreife. Auf fachlich-sachlicher Ebene sehen wir das sowieso gleich. Einverstanden?</p> <blockquote> <blockquote> <p>… mag damit das Notenbild sein, aus dem Gunnar dann diese Musik macht.</p> <p>Womit ich nicht verteidigen will, dass jemand diese Musik dann auch noch freiwillig spielt.</p> </blockquote> <p>Wer nur Dur-Akkorde mag, der soll Schlager hören. Zu Musik gehören auch Moll-Akkorde; die machen Musik nicht schlechter.</p> </blockquote> <p>Ich glaube nicht, dass Rolandi hier Moll-Akkorde herauszuhören meinte. Ich schätze, er spielte eher auf Dissonanzen an.</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p>Danke übrigens <a href="/users/821" class="mention registered-user" rel="noopener noreferrer">@marctrix</a> für die Relativierung, das muss man der Fairness halber tatsächlich dazusagen, ich war da vielleicht ein wenig zu harsch! <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> </ol> </section> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723502#m1723502 marctrix self@mhis.de https://www.mhis.de 2018-06-01T12:46:25Z 2018-06-01T12:46:25Z Untermenu aufklappen - Was für eine Diskussion! <p>Hej Rolandi,</p> <blockquote> <p>Vielleich hättest du schreiben sollen: Der Artikel ist Unfug.</p> </blockquote> <p>So ist es bei mir angekommen. Du hast einen Artikel verlinkt. Dazu wurde gesagt, das ist „grober Unfug“. Da du weiter nichts gesagt hast, gab es für mich ausschließlich den Artikel als möglichen Bezug.</p> <p>Und der ist wirklich Unfug.</p> <p>Auch ist <a href="/users/20" class="mention registered-user" rel="noopener noreferrer">@Gunnar Bittersmann</a> jemand, dessen Kritik sich immer auf die Sache bezieht. Auch wenn seine direkte Art manchmal anders interpretiert werden kann (aber nicht muss). Dass nur als Erklärung für jemanden, der noch neu ist und nicht all die Namen mit bestimmten Eigenheiten oder gar Gesichtern verbindet. Zu <a href="https://bittersmann.de/" rel="nofollow noopener noreferrer">Gunnar geht es übrigens hier lang</a>…</p> <p>Wenn du Zeit hast, schon mal in seine <a href="https://bittersmann.de/talks/" rel="nofollow noopener noreferrer">Talks</a> — dann hast du ein Gesicht und erlebst ihn live. Meine Empfehlung: <a href="https://youtu.be/ocfeaFFxoNc" rel="nofollow noopener noreferrer">nuqjatlh (What does it mean?) – Gunnar Bittersmann / Front-Trends 2015, Warsaw, Poland</a></p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723868#m1723868 marctrix self@mhis.de https://www.mhis.de 2018-06-05T16:34:57Z 2018-06-05T16:34:57Z Untermenu aufklappen - Anfängerfrage <p>Hej Gerhard1,</p> <blockquote> <p>Was mir noch nicht gefällt: Wird das Menü geöffnet, verschieben sich die Inhalte darunter.</p> </blockquote> <p>Ist geändert.</p> <blockquote> <p>Ich werde es mit einem Bild noch etwas hübscher machen.</p> </blockquote> <p>Habe ich wieder verworfen.</p> <p>Hier der Link: <a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">https://github.com/MarcHaunschild/accessible-nav</a></p> <blockquote> <p><strong>Wer immer Fehler findet, darf sich gerne beteiligen. Es ist OpenSource und es ist auf Github. Also keine Scheu beim Melden von Issues, beim forken usw…</strong></p> </blockquote> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723881#m1723881 Rolandi 2018-06-05T18:47:54Z 2018-06-05T18:47:54Z Untermenu aufklappen - Anfängerfrage <p>Hi Marc,</p> <blockquote> <p>Hier der Link: <a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">https://github.com/MarcHaunschild/accessible-nav</a></p> </blockquote> <p>Wie kann man das Beispiel ansehen? Muss man sich einloggen (Sign in/Sign up) oder muss man es herunterladen (Clone or Download)? Einen "Test"-Button sehe ich nicht. Gruß Roland</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723885#m1723885 marctrix self@mhis.de https://www.mhis.de 2018-06-05T19:19:15Z 2018-06-05T19:19:15Z Untermenu aufklappen - Anfängerfrage <p>Hej Rolandi,</p> <blockquote> <blockquote> <p>Hier der Link: <a href="https://github.com/MarcHaunschild/accessible-nav" rel="noopener noreferrer">https://github.com/MarcHaunschild/accessible-nav</a></p> </blockquote> <p>Wie kann man das Beispiel ansehen? Muss man sich einloggen (Sign in/Sign up) oder muss man es herunterladen (Clone or Download)? Einen "Test"-Button sehe ich nicht.</p> </blockquote> <p>Habe <a href="http://a11y.mhis.de/css-menu/seite-2.html" rel="nofollow noopener noreferrer">hier eine Testumgebung</a>, die aber nicht so oft aktualisiert wird.</p> <p>Herunterladen geht natürlich (ist dann eine zip-File), bequemer ist Klonen, dafür muss man aber git installiert haben.</p> <p>Habe schon das nächste Problem gefunden. Wenn man auf eine Seite tippt (iPhone Touch) öffnet sich das Untermenü der Seite davor. Mache ich heute nicht mehr.</p> <p>Wenn einer weiß, wodran es liegt, kann er gerne schon mal Tipps geben…</p> <p>Marc</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723959#m1723959 Felix Riesterer http://felix-riesterer.de 2018-06-07T06:24:37Z 2018-06-07T06:24:37Z Untermenu aufklappen - Anfängerfrage <p>Lieber at,</p> <blockquote> <p>weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.</p> </blockquote> <p>mit <code>disabled="disabled"</code> gibt es doch auch schon...</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723961#m1723961 Christian Kruse https://wwwtech.de/about 2018-06-07T06:33:09Z 2018-06-07T06:33:09Z Untermenu aufklappen - Anfängerfrage <p>Hallo Felix,</p> <blockquote> <blockquote> <p>weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.</p> </blockquote> <p>mit <code>disabled="disabled"</code> gibt es doch auch schon...</p> </blockquote> <p>und inwiefern findest du <code>disabled="disabled"</code> eleganter als <code>enabled="false"</code> / <code>enabled="true"</code>? Ich persönlich fand die Wiederholung als Attribut-Wert immer ziemlich albern.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723962#m1723962 Auge 2018-06-07T06:48:39Z 2018-06-07T06:48:39Z Untermenu aufklappen - Anfängerfrage <p>Hallo</p> <blockquote> <blockquote> <p>weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.</p> </blockquote> <p>mit <code>disabled="disabled"</code> gibt es doch auch schon...</p> </blockquote> <p>Meiner Meinung nach ist <strong>das</strong> das echte™️ Designversagen.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Eine Kerze stand [auf dem Abort] bereit, und der Almanach des vergangenen Jahres hing an einer Schnur. Die Herausgeber kannten ihre Leser und druckten den Almanach auf weiches, dünnes Papier.<br> Kleine freie Männer von Terry Pratchett </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723966#m1723966 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-07T08:13:01Z 2018-06-07T08:13:01Z Untermenu aufklappen - Anfängerfrage <p>@@Christian Kruse</p> <blockquote> <blockquote> <blockquote> <p>weil WAI-ARIA auch mit XML-basierten Sprachen funktionieren soll und somit Attributwert voraussetzt.</p> </blockquote> <p>mit <code>disabled="disabled"</code> gibt es doch auch schon...</p> </blockquote> <p>und inwiefern findest du <code>disabled="disabled"</code> eleganter als <code>enabled="false"</code> / <code>enabled="true"</code>? Ich persönlich fand die Wiederholung als Attribut-Wert immer ziemlich albern.</p> </blockquote> <p>Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch <code>disabled=""</code> schreiben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723967#m1723967 Christian Kruse https://wwwtech.de/about 2018-06-07T08:15:16Z 2018-06-07T08:15:16Z Untermenu aufklappen - Anfängerfrage <p>Hallo Gunnar,</p> <blockquote> <p>Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch <code>disabled=""</code> schreiben.</p> </blockquote> <p>Ah, das ist mir neu. Interessant, danke.</p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723969#m1723969 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-07T08:28:17Z 2018-06-07T08:28:17Z Untermenu aufklappen - Anfängerfrage <p>@@Christian Kruse</p> <blockquote> <blockquote> <p>Die Macher der HTML5-Spec wohl auch. Deshalb kann man in HTML auch <code>disabled=""</code> schreiben.</p> </blockquote> <p>Ah, das ist mir neu. Interessant, danke.</p> </blockquote> <p>Mal rausgesucht: <a href="https://w3c.github.io/html/syntax.html#elements-attributes" lang="en" rel="nofollow noopener noreferrer">§8.1.2.3. Attributes</a>, <em lang="en">Empty attribute syntax</em>: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.</p> <p>Das heißt, man könnte auch <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token punctuation">></span></span></code> schreiben, wenn kein Alternativtext für ein Bild sinnvoll ist. (Das <code>alt</code>-Attribut muss aber auch dann vorhanden sein!)</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723970#m1723970 Christian Kruse https://wwwtech.de/about 2018-06-07T08:31:51Z 2018-06-07T08:31:51Z Untermenu aufklappen - Anfängerfrage <p>Hallo Gunnar,</p> <blockquote> <p>Mal rausgesucht: <a href="https://w3c.github.io/html/syntax.html#elements-attributes" lang="en" rel="nofollow noopener noreferrer">§8.1.2.3. Attributes</a>, <em lang="en">Empty attribute syntax</em>: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.</p> </blockquote> <p>Hehe, das wusste ich sogar. Aber die Verknüpfung zu <code>disabled=""</code> hat nicht stattgefunden bei mir </p> <p>LG,<br> CK</p> <div class="signature">-- <br> <a href="https://wwwtech.de/about" rel="noopener noreferrer">https://wwwtech.de/about</a> </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1723971#m1723971 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2018-06-07T08:33:00Z 2018-06-07T08:33:00Z Untermenu aufklappen - Anfängerfrage <p>@@Gunnar Bittersmann</p> <blockquote> <p>Mal rausgesucht: <a href="https://w3c.github.io/html/syntax.html#elements-attributes" lang="en" rel="nofollow noopener noreferrer">§8.1.2.3. Attributes</a>, <em lang="en">Empty attribute syntax</em>: Attribut ohne Wert und Attribut mit Leerstring als Wert ist dasselbe.</p> </blockquote> <p>Hm, das gilt jetzt für den HTML-Parser.</p> <p>Würde der XHMTL-Parser (<code>application/xhtml+xml</code>) bei <code>disabled="disabled"</code> und <code>disabled=""</code> auch dasselbe tun?</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1724047#m1724047 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2018-06-07T17:39:55Z 2018-06-07T17:39:55Z Untermenu aufklappen - Anfängerfrage <p>Hallo Christian Kruse,</p> <blockquote> <p>Hehe, das wusste ich sogar. Aber die Verknüpfung zu <code>disabled=""</code> hat nicht stattgefunden bei mir </p> </blockquote> <p>Es ist meiner Meinung nach ein Designfehler: Ein unbedarfter würde wahrscheinlich <code>disabled=""</code> als <code>disabled=_NICHT_</code> lesen.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Rosen sind rot. </div> https://forum.selfhtml.org/self/2018/may/29/untermenu-aufklappen-anfaengerfrage/1724064#m1724064 Camping_RIDER janosch.zoller@selfhtml.org http://www.campingrider.de 2018-06-07T22:06:35Z 2018-06-07T22:06:35Z Untermenu aufklappen - Anfängerfrage <p>Aloha ;)</p> <blockquote> <blockquote> <p>Hehe, das wusste ich sogar. Aber die Verknüpfung zu <code>disabled=""</code> hat nicht stattgefunden bei mir </p> </blockquote> <p>Es ist meiner Meinung nach ein Designfehler: Ein unbedarfter würde wahrscheinlich <code>disabled=""</code> als <code>disabled=_NICHT_</code> lesen.</p> </blockquote> <p>Da würde ich dir zustimmen. Das ist irgendwie wie einen Designfehler durch einen anderen Designfehler kaschieren wollen...</p> <p>Grüße,</p> <p>RIDER</p> <div class="signature">-- <br> Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller<br> # <a href="https://twitter.com/Camping_RIDER" rel="nofollow noopener noreferrer">Twitter</a> # <a href="http://steamcommunity.com/id/Camping_RIDER" rel="nofollow noopener noreferrer">Steam</a> # <a href="https://www.youtube.com/user/RidersFlame" rel="nofollow noopener noreferrer">YouTube</a> # <a href="http://wiki.selfhtml.org/wiki/Benutzer:Camping_RIDER" rel="nofollow noopener noreferrer">Self-Wiki</a> # <a href="http://community.de.selfhtml.org/fanprojekte/selfcode.htm" rel="nofollow noopener noreferrer">Selfcode</a>: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[ </div>