tag:forum.selfhtml.org,2005:/self Navigation Bar, div anzeigen beim klicken auf einen Link – SELFHTML-Forum 2020-12-26T07:17:58Z https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779038#m1779038 ArneS arnesanwald@gmail.com 2020-12-10T18:25:37Z 2020-12-10T18:25:37Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo, Ich würde auf meiner Seite gerne eine art Navigationsleiste einfügen dabei soll beim klicken auf den ersten Link ein div angezeigt werden (der eine reihe von Bildern enthält). Klickt man auf den Zweiten Link wird der div mit einem anderen ersetzt (der andere Bilder enthält). So kann man auswählen welche Bilder man angezeigt bekommt.</p> <p>Mir ist bisher noch keine Lösung dafür eingefallen und hoffe das mir hier jemand weiterhelfen kann. Wäre Natürlich super wenn das ganze ohne JavaScript umsetzbar wäre aber wenn es nicht anders geht dann muss ich mich halt damit noch ein bisschen beschäftigen.</p> <p>LG Arne</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779039#m1779039 meltemi http://goestathomas.de/ 2020-12-10T19:49:54Z 2020-12-11T04:35:21Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <blockquote> <p>Hallo, Ich würde auf meiner Seite gerne eine art Navigationsleiste einfügen dabei soll beim klicken auf den ersten Link ein div angezeigt werden (der eine reihe von Bildern enthält). Klickt man auf den Zweiten Link wird der div mit einem anderen ersetzt (der andere Bilder enthält). So kann man auswählen welche Bilder man angezeigt bekommt.</p> <p>Mir ist bisher noch keine Lösung dafür eingefallen und hoffe das mir hier jemand weiterhelfen kann. Wäre Natürlich super wenn das ganze ohne JavaScript umsetzbar wäre aber wenn es nicht anders geht dann muss ich mich halt damit noch ein bisschen beschäftigen.</p> </blockquote> <p>Hallo,</p> <p>Dein Begehren ist ein typischer Anwendungsfall für die HTML-Elemente details und summary. Das Ergebnis nennt man landläufig Akkordeon.</p> <p>Siehe hier: <a href="https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Interaktiv/details</a></p> <p>Ganz ohne Javascript, nur mit HTML und CSS!</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779040#m1779040 Rolf B 2020-12-10T20:29:18Z 2020-12-10T20:29:18Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo ArneS,</p> <p>es gibt Möglichkeiten, sowas ohne JavaScript umzusetzen, aber sie sind nicht gut.</p> <p>Eine einfache Möglichkeit ist das von meltemi verlinkte <details> Element, aber das verhält sich nicht ganz so, wie Du Dir das vorstellst, weil die Aufklappbereiche sich nicht überlagern.</p> <p>Das, was Du möchtest, geht ohne JavaScript nur durch Einsatz des so genannten "Checkbox Hack" - oder in deinem Fall: Radiobutton-Hack. Aber: das macht die Seite nicht mehr bedienbar (im Sinne von: für jeden bedienbar), weshalb diese Technik nicht willkommen ist.</p> <p>Ich würde Dir zwei Alternativen empfehlen:</p> <ul> <li> <p>Mach mehrere HTML Seiten, jede für eine Bildersicht, und wechsle mit Links zwischen diesen Seiten. Dann hast Du auch gleich eine vor-/rück-Navigation für die letzte Ansicht. Ist natürlich nicht so schick.</p> </li> <li> <p>Verwende Buttons statt Links und benutze JavaScript, um abhängig vom geklickten Button eine bestimmte Liste von Bildern einzublenden. Außer JavaScript brauchst Du dann auch aria-Attribute, damit ein Assistenztechniknutzer weiß, welche Steuerung was auslöst. Wobei - eine Bildergalerie ist für Screenreader vermutlich nicht so das Traumszenario...</p> </li> </ul> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779044#m1779044 ArneS 2020-12-10T21:49:39Z 2020-12-11T04:36:13Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>habe das mal ausprobiert und Ansicht funktioniert das ziemlich gut. Vielen dank dafür erstmal. Jetzt habe ich nur noch ein Problem undzwar hätte ich gerne das man nur einen "detail Bereich" gleichzeitig ausklappen kann. Also dass sich quasi der aktuell geöffnete Bereich schließt wenn man auf ein anderes Summary klickt. Geht das?</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779054#m1779054 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T05:49:29Z 2020-12-11T05:49:29Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>@@meltemi</p> <blockquote> <p>Dein Begehren ist ein typischer Anwendungsfall für die HTML-Elemente details und summary. Das Ergebnis nennt man landläufig Akkordeon.</p> </blockquote> <p>Nö. <a href="https://daverupert.com/2019/12/why-details-is-not-an-accordion/" rel="nofollow noopener noreferrer"><code>details</code> ist kein Akkordeon.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779045#m1779045 ArneS 2020-12-10T21:55:38Z 2020-12-10T21:55:38Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Vielen Dank für die ausführliche Antwort, ich habe das mit dem Detail Element mal ausprobiert und an sich hat das erstmal sehr gut Funktioniert. Das einzige Problem das ich habe ist das man ja mehrere Details gleichzeitig aufmachen kann und es bei mir ideal wäre wenn sich der gerade offene Bereich einklappt sobald man einen anderen aufmacht.</p> <p>Ich suche jetzt mal nach einer Lösung für das Problem und schau ob auch sonst alles so Funktioniert wie ich es mir vorstelle. Wenn ich noch andere Probleme Finde dann werde ich mal eine von deinen Lösungen ausprobieren, Vielen Dank.</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779053#m1779053 Matthias Scharwies mscharwies@selfhtml.org 2020-12-11T04:57:27Z 2020-12-11T04:57:27Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Servus!</p> <blockquote> <p>habe das mal ausprobiert und Ansicht funktioniert das ziemlich gut. Vielen dank dafür erstmal.</p> </blockquote> <p>Super, vielen Dank an <a href="/users/12370" class="mention registered-user" rel="noopener noreferrer">@meltemi</a> für den Link!</p> <blockquote> <p>Jetzt habe ich nur noch ein Problem undzwar hätte ich gerne das man nur einen "detail Bereich" gleichzeitig ausklappen kann. Also dass sich quasi der aktuell geöffnete Bereich schließt wenn man auf ein anderes Summary klickt. Geht das?</p> </blockquote> <p>Ja, aber so eine Interaktion benötigt JavaScript. Das scheint anfangs eine ziemliche Hürde, ist aber oft einfacher.</p> <p>Ich hatte hier mal angefangen, habe aber grade <strong>gar keine</strong> Zeit dies fertigzustellen:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Akkordeon_mit_details" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Akkordeon_mit_details</a></li> </ul> <p>Bei einem Klick würdest du dein aktuelles details öffnen und mit JavaScript eine Funktion aufrufen, die …</p> <ul> <li>alle details der Reihe nach durchgeht und überprüft, ob das open-Attribut gesetzt ist.</li> <li>dieses dann entfernen, sodass die „nicht aktiven“ geschlossen werden.</li> </ul> <p>Es wäre super, wenn sich irgendjemand dieses Themas annehmen könnte!</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779046#m1779046 meltemi http://goestathomas.de/ 2020-12-11T00:00:30Z 2020-12-11T00:00:30Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>nochmal Hallo,</p> <p>zum von Rolf B erwähnten "Checkbox Hack" oder "Radiobutton Hack" gab's hier früher mal eine Anleitung, die aber leider gelöscht wurde (vermutlich wegen mangelnder Zugänglichkeit).</p> <p>Guck' mal hier: genau was <strong>Du</strong> brauchst (ein Bereich geöffnet, die anderen geschlossen), aber eben nicht zugänglich (also nicht vollständig mit der Tastatur bedienbar): <a href="https://www.mediaevent.de/tutorial/css-accordeon.html" rel="nofollow noopener noreferrer">https://www.mediaevent.de/tutorial/css-accordeon.html</a></p> <p>Oder Du suchst in der Suchmaschine Deiner Wahl nach >akkordeon checkbox hack< .</p> <p>P.S. Falls sich hier irgendein Korinthenka[zensiert]er über die verwendeten falschen Anführungszeichen aufregt: das ginge mir am A[zensiert] vorbei.</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779055#m1779055 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T05:58:33Z 2020-12-11T05:58:33Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@ArneS</p> <blockquote> <p>ich habe das mit dem Detail Element mal ausprobiert und an sich hat das erstmal sehr gut Funktioniert. Das einzige Problem das ich habe ist das man ja mehrere Details gleichzeitig aufmachen kann und es bei mir ideal wäre wenn sich der gerade offene Bereich einklappt sobald man einen anderen aufmacht.</p> </blockquote> <p>Das könnte man mit JavaScript machen.</p> <p>Zuerst dachte ich, aufs <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement/toggle_event" rel="nofollow noopener noreferrer"><code>toggle</code>-Event</a> zu lauschen und alle anderen <code>details</code>-Elemente per <code>….open = false</code> zu schließen. Problem daran: dabei feuern wieder <code>toggle</code>-Events, sodass die Dinger endlos auf- und zugehen.</p> <p><a href="https://codepen.io/gunnarbittersmann/pen/jOMVMVX" rel="noopener noreferrer">Mit <code>click</code>-Event ginge es.</a></p> <p>Was nicht heißen soll, dass man <code>details</code>-Elemente so verbiegen sollte. Oder <a href="https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779054#m1779054" rel="noopener noreferrer">überhaupt für ein Akkordeon einsetzen sollte</a>.</p> <p> LLAP</p> <p>PS: TIL, dass Firefox <code>:focus-visible</code> nicht auf <code>details</code>-Elemente anwendet. </p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779048#m1779048 ArneS 2020-12-11T00:16:28Z 2020-12-11T00:16:28Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Das hört sich gut an, dann werde ich das mal ausprobieren! Vielen vielen Dank für die schnelle Hilfe. LG Arne</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779049#m1779049 Rolf B 2020-12-11T00:43:14Z 2020-12-11T00:43:14Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo meltemi,</p> <p>ich habe den Radiobutton Hack absichtlich nicht beschrieben. Den Grund nennst Du selbst: Zugänglichkeit. Was Du vorschlägst, ist keine Lösung. Es ist die Ausgrenzung von Anwendergruppen. Bedienbare Widgets mit einem Verhalten, das dem Browser nicht eingebaut ist, benötigen eigentlich immer JavaScript.</p> <p>Über den semantisch falschen Gebrauch von Eingabeelementen will ich nicht reden, das kann man sehen wie man will.</p> <p>Ob man den Radiohack zugänglich machen kann, indem man mittels JavaScript einen Schwarm von Aria-Attributen verwaltet, weiß ich nicht. Aber wenn man schon in die JS Kiste greift, dann braucht man auch den Radiohack nicht mehr.</p> <p>Es ist aber auch von "Normalbenutzern" nicht unbedingt <strong>gut</strong> bedienbar. Denn: Radiobuttons ändern ihren Wert sofort. Ich kann nicht mit den Pfeiltasten links/rechts laufen und dann den Abschnitt wählen, den ich möche. Ich muss statt dessen nach jedem Tastendruck warten, bis Bilder geladen wurden, die ich gar nicht haben wollte.</p> <p>Natürlich ist es Arnes Entscheidung, ob er sich auf Kosten bestimmter Anwenderkreise das Leben leichter machen möchte. Es sei denn, die Seite unterliegt bestimmten Vorschriften für Bedienbarkeit. Dann geht das nicht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779051#m1779051 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T02:12:41Z 2020-12-11T02:12:41Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@ArneS</p> <blockquote> <p>Das hört sich gut an,</p> </blockquote> <p>Nein. Rolf sagte, warum nicht. Und das auch schon, bevor meltemi mit der Nicht-Lösung ankam.</p> <blockquote> <p>dann werde ich das mal ausprobieren!</p> </blockquote> <p>Lass es.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779052#m1779052 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T02:21:48Z 2020-12-11T02:21:48Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@Rolf B</p> <blockquote> <p>Ob man den Radiohack zugänglich machen kann, indem man mittels JavaScript einen Schwarm von Aria-Attributen verwaltet, weiß ich nicht.</p> </blockquote> <p><a href="https://forum.selfhtml.org/self/2020/aug/24/css-menue-per-klick-auf-ein-image-aufklappen/1774857#m1774857" rel="noopener noreferrer">Heydon weiß es.</a></p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779056#m1779056 Matthias Scharwies mscharwies@selfhtml.org 2020-12-11T06:04:07Z 2020-12-11T06:04:07Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Servus!</p> <blockquote> <blockquote> <p>Das Ergebnis nennt man landläufig Akkordeon.</p> </blockquote> </blockquote> <p>Ich glaube, dass das <em><strong>landläufig</strong></em> das schon gut anspricht.</p> <blockquote> <p>Nö. <a href="https://daverupert.com/2019/12/why-details-is-not-an-accordion/" rel="nofollow noopener noreferrer"><code>details</code> ist kein Akkordeon.</a></p> </blockquote> <p>Der Artikel beschreibt imho nur die Probleme innerhalb eines details-Elements Überschriften wie h1 zu verwenden, da <em><strong>in diesem Falle</strong></em> die Zugänglichkeit nicht gewährt wäre.</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779058#m1779058 JürgenB https://www.j-berkemeier.de 2020-12-11T08:07:09Z 2020-12-11T08:07:09Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Hallo Gunnar,</p> <blockquote> <p>Nö. <a href="https://daverupert.com/2019/12/why-details-is-not-an-accordion/" rel="nofollow noopener noreferrer"><code>details</code> ist kein Akkordeon.</a></p> </blockquote> <p>ich habe diverse dieser Artikel gelesen, die sich damit beschäftigen, wofür details/summary nicht geignet bist, und ich habe sie nicht verstanden. Dieses Elementpaar ist dafür gemacht, Inhalte ein- und auszublenden. Statt dessen werden „bewährte“ Lösungen vorgeschlgen, bei denen mit einigem an Javascript und Aria-Attributen andere Elemente für diese Aufgabe zurechtgebogen werden.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779063#m1779063 Rolf B 2020-12-11T10:01:15Z 2020-12-11T13:23:32Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo Gunnar,</p> <blockquote> <p>Problem daran: dabei feuern wieder toggle-Events, sodass die Dinger endlos auf- und zugehen.</p> </blockquote> <p>Du magst das CSS Genie sein, aber in Algorithmik kann ich Dir noch was zeigen . Welcher Vollpfosten hat eigentlich in der Spec vergessen hinzuschreiben, dass das toggle Event mit bubbles=true erzeugt ewrden sollte? Oder war das etwa sinistre Absicht?</p> <p><em>(Edit: Und bezüglich Code Quality muss <strong>ich</strong> noch eine Menge lernen)</em></p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>detailsGroup<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>details</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>details</span><span class="token punctuation">></span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>details</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p><em>(Edit: class statt id)</em></p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".detailsGroup details"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> d<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"toggle"</span><span class="token punctuation">,</span> detailsToggler<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">function</span> <span class="token function">detailsToggler</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token keyword">let</span> container <span class="token operator">=</span> ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">".detailsGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> d <span class="token keyword">of</span> container<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"details"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>d <span class="token operator">!=</span> ev<span class="token punctuation">.</span>target<span class="token punctuation">)</span> d<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p><em>(Edit: querySelectorAll auf closest(".detailsGroup") anwenden, nicht auf document)</em></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779567#m1779567 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-26T07:17:58Z 2020-12-26T07:17:58Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@Gunnar Bittersmann</p> <blockquote> <p>PS: TIL, dass Firefox <code>:focus-visible</code> nicht auf <code>details</code>-Elemente anwendet. </p> </blockquote> <p>Was für’n Unsinn! Der aktuelle Firefox kennt <code>:focus-visible</code> generell noch nicht, sondern <code>:-moz-focusring</code>. Und jenes wendet er auch auf <code>details</code>-Elemente an.</p> <p>Wenn man im <a href="https://codepen.io/gunnarbittersmann/pen/poENxBR?editors=0100" rel="noopener noreferrer">Codepen</a></p> <pre><code class="block language-css"><span class="token selector">:focus:not(:-moz-focusring)</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">:-moz-focusring</span> <span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> thin solid blue<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>ergänzt, ist der Rahmen durchgängig blau, nicht schwarz gepunktet.</p> <p>Allerdings erscheint der Rahmen auch bei Mausbedienung, was er nicht soll. Die Implementierung von <code>:-moz-focusring</code> ist noch nicht so, wie sie für <code>:focus-visible</code> sein soll.</p> <p>Der 85er Firefox (gegenwärtig Developer Edition) macht’s richtig; er unterstützt <code>:focus-visible</code>.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779275#m1779275 Matthias Scharwies mscharwies@selfhtml.org 2020-12-17T15:31:32Z 2020-12-17T15:31:32Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Servus!</p> <p><a href="/users/2" class="mention registered-user" rel="noopener noreferrer">@Matthias Apsel</a> hat die Lösung gefunden, die Höhen des details-Elements mithilfe von getBoundingClientRect auszulesen und so zu animieren:</p> <p><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Akkordeon_mit_details#weicher_.C3.9Cbergang" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Akkordeon_mit_details#weicher Übergang</a></p> <p>Ich versuche mich jetzt an einem "Tabbed Register" mit details. Die summary-Elemente sind auch ohne tabindex mit der Tab-Taste antabbar; ist eine Navigation mit Pfeil-vor und -Zurück aus Euren Sicht noch nötig?</p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779073#m1779073 ArneS 2020-12-11T12:36:38Z 2020-12-11T12:36:38Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Wow vielen vielen dank ich war schon ganz verwirrt von den ganzen Vorschlägen, ich muss leider zugeben dass meine JavaScript Kenntnisse gegen 0 gehen und ich auch nur im groben verstehe was dein Code macht. Aber ich habe ihn mal bei mir eingefügt und angepasst und er funktioniert super.</p> <p>Jetzt hoffe ich mal dass das die richtige Lösung war...</p> <p>LG Arne</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779086#m1779086 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T17:35:52Z 2020-12-11T17:35:52Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@Rolf B</p> <blockquote> <p>Welcher Vollpfosten hat eigentlich in der Spec vergessen hinzuschreiben, dass das toggle Event mit bubbles=true erzeugt ewrden sollte? Oder war das etwa sinistre Absicht?</p> </blockquote> <p>Irgendwas werden sie sich vielleicht dabei gedacht haben, aber was? Ich hatte tatsächlich erst in MDN nachgesehn, ob’s blubbert, bevor ich an <em lang="en">event delegation</em> scheitere.</p> <blockquote> <p><em>(Edit: Und bezüglich Code Quality muss <strong>ich</strong> noch eine Menge lernen)</em></p> </blockquote> <p>Zum Beispiel sprechende Variablennamen:</p> <blockquote> <pre><code class="block language-js"><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> d<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"toggle"</span><span class="token punctuation">,</span> detailsToggler<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Wofür zum <strong>D</strong>eibel steht <code>d</code>?</p> <blockquote> <pre><code class="block language-js"><span class="token keyword">function</span> <span class="token function">detailsToggler</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> </code></pre> </blockquote> <p>Aus einem <strong>Event</strong> ein <strong>Ev</strong>angelium zu machen, ist eine verbreitete Unsitte.</p> <blockquote> <pre><code class="block language-js"><span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Ach, so einfach ist das‽ ‍♂️</p> <p>In <a href="https://codepen.io/gunnarbittersmann/pen/poENxBR" rel="noopener noreferrer">der Version</a> kann man dann auch auf <em lang="en">summary</em> clicken, um das Ding wieder zu schließen.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779077#m1779077 Rolf B 2020-12-11T13:21:28Z 2020-12-12T11:17:23Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo ArneS,</p> <p>wenn Du mit einer Akkordeon-ähnlichen Lösung zufrieden bist, dann ist es ja gut.</p> <p>Mein Code war ziemlich komprimiert und eher für Gunnars Niveau gedacht. Und leider sind ein paar Bugs drin, deshalb bitte ich Dich, Dir das hier - bzw. das alte Posting - nochmal anzuschauen. Ich hab's im alten Posting korrigiert.</p> <pre><code class="block language-js">document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".detailsGroup details"</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">d</span> <span class="token operator">=></span> d<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"toggle"</span><span class="token punctuation">,</span> detailsToggler<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Hier passiert schon eine ganze Menge.</p> <p><code>document.querySelectorAll("...")</code> - diese <a href="https://wiki.selfhtml.org/wiki/DOM" rel="nofollow noopener noreferrer">DOM</a> Methode durchsucht den Knoten, auf dem sie aufgerufen wird, nach Elementen, die zum angegebenen CSS Selektor passen. In diesem Fall das ganze Dokument, und sie sucht <code><details></code> Elemente, die ein Element mit <code>class="detailsGroup"</code> <s>als Elternelement</s> unter ihren Vorfahren haben.</p> <p>CSS: <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/einfacher_Selektor" rel="nofollow noopener noreferrer">class selector (Klassenselektor) und element selector (Typselektor)</a>, und descendant combinator (<a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/Kombinator/Nachfahrenkombinator" rel="nofollow noopener noreferrer">Nachfahrenkombinator</a>)</p> <p>Das Ergebnis von querySelectorAll ist eine <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node#NodeList" rel="nofollow noopener noreferrer">NodeList</a>. Die neueren Browser kennen ein paar NodeList-Methoden mehr als unser Wiki; im Internet Explorer würde der forEach Aufruf ohne einen <a href="https://wiki.selfhtml.org/wiki/Polyfill" rel="nofollow noopener noreferrer">Polyfill</a> nicht funktionieren.</p> <p>Aber in Chrome, Edge, Firefox und Safari schon, und forEach ruft die Funktion, die da in den Klammern steht, für jeden Eintrag in der NodeList - also für jedes gefundene details-Element, einmal auf.</p> <p><code>d => ...</code> ist eine <a href="https://wiki.selfhtml.org/wiki/JavaScript/Funktion#Lambda-Ausdruck_.28oder_Pfeilfunktion.29" rel="nofollow noopener noreferrer">Pfeilfunktion</a> und eine Kurzschreibweise für <code>function(d) { return ... }</code>. Es gibt ein paar wichtige Feinheiten, dazu kannst Du dem Link folgen. Was hier passiert ist: Für jedes <code>details</code>-Element wird <code>addEventListener</code> aufgerufen, um für das <code>toggle</code>-Event die Funktion <code>detailsToggler</code> als Eventhandler zu registrieren.</p> <pre><code class="block bad language-js"><span class="token keyword">function</span> <span class="token function">detailsToggler</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> d <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"details"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>d <span class="token operator">!=</span> ev<span class="token punctuation">.</span>target<span class="token punctuation">)</span> d<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Was diese Funktion tut, ist einfacher. Und leider nicht ganz richtig.</p> <p>Der Eventhandler für <code>toggle</code> wird aufgerufen, wenn der "geöffnet" Zustand des <code>details</code> Elements umschaltet. Von open nach close, oder von close nach open. Wir möchten dann etwas tun, wenn wir vom Öffnen eines Elements erfahren - andernfalls würden wir, wie von Gunnar beschrieben, in einer Endlosschleife landen.</p> <p>Ein Eventhandler, der mit addEventListener registriert wurde, bekommt ein <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event#.C3.9Cbersicht" rel="nofollow noopener noreferrer">Event</a>-Objekt als Parameter übergeben. Die <code>target</code> Eigenschaft dieses Objekts ist das DOM Element, für das das Event ausgelöst wurde. Also unser <code>details</code> Element.</p> <p>Auf diesem Element wird die <code>open</code> Eigenschaft geprüft. Das ist eine spezielle Eigenschaft des <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDetailsElement" rel="nofollow noopener noreferrer"><code>HTMLDetailsElement</code>-Objekts</a>, mit dem <code><details></code> im DOM dargestellt wird. Nur, wenn das Element offen ist, dann <em>wurde</em> es gerade geöffnet, und wir können die anderen Elemente schließen. Für dieses Schließen wird es ebenfalls ein <code>toggle</code> Event geben, aber darauf reagieren wir wegen dieser Prüfung dann nicht.</p> <p>Die Funktion sucht sich nun alle <code><details></code> Elemente zusammen - und das ist ein Bug, bzw. ein Relikt einer älteren Fassung. Das Script sucht ja nur alle <details> Elemente innerhalb eines <code>class="detailsGroup"</code> Containers. Davon könnte es auch mehrere geben, aber das Schließen anderer <code><details></code> darf sinnvollerweise nur innerhalb des gleichen Containers erfolgen.</p> <pre><code class="block good language-js"><span class="token keyword">function</span> <span class="token function">detailsToggler</span><span class="token punctuation">(</span><span class="token parameter">ev</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span>open<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token keyword">let</span> container <span class="token operator">=</span> ev<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">".detailsGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> d <span class="token keyword">of</span> container<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"details"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>d <span class="token operator">!=</span> ev<span class="token punctuation">.</span>target<span class="token punctuation">)</span> d<span class="token punctuation">.</span>open <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Und dabei fällt dann gleich ein zweiter Bug auf:</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>detailsGroup<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>div</span><span class="token punctuation">></span></span> </code></pre> <p>Das muss natürlich</p> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</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>detailsGroup<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>div</span><span class="token punctuation">></span></span> </code></pre> <p>sein, sonst könnte man ja nicht mehrere davon verwenden. Und die programmierten Selektoren setzen eh schon Klassen voraus. Ein Wunder, dass es vorher irgendwie geklappt hat. <a href="https://www.shirtinator.de/t-shirts/6-stufen-des-debugging-shirtinator-maenner-t-shirt-20121" rel="nofollow noopener noreferrer">Ich habe mir ein T-Shirt verdient</a>.</p> <p>Nach der Korrektur *räusper* ist es jedenfalls so, dass mittels der <code>closest</code> Methode das nächstliegende Elternelement gesucht wird, auf das der angegebene CSS Selektor zutrifft. Das ist das <code><div class="detailsGroup"></code>. Und darauf wird wiederum mit querySelectorAll die NodeList der enthaltenen <code><details></code> Elemente ermittelt.</p> <p>Diese wird nun mit der <a href="https://wiki.selfhtml.org/wiki/JavaScript/Schleife#Schleifen_mit_.22for...of.22" rel="nofollow noopener noreferrer"><code>for...of</code>-Schleife</a> durchlaufen. Das ist ähnlich zu .forEach, und ich hätte <code>for...of</code> auch beim Registrieren der Events verwenden können. Ich habe an dieser Stelle kein <code>.forEach</code> verwendet, weil da mehr als nur ein einziger Funktionsaufruf passiert.</p> <p>Ich muss nämlich prüfen, ob das gefundene <code><details></code> Element mit dem Event-Target übereinstimmt. Nur, wenn das nicht der Fall ist, darf ich es schließen. Andernfalls machte ich mein frisch geöffnetes <code><details></code> gleich wieder zu.</p> <p>Alles klar?</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779096#m1779096 Felix Riesterer https://felix-riesterer.de 2020-12-12T07:45:38Z 2020-12-12T07:45:38Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Lieber Rolf,</p> <blockquote> <p><code>document.querySelectorAll("...")</code> - diese <a href="https://wiki.selfhtml.org/wiki/DOM" rel="nofollow noopener noreferrer">DOM</a> Methode durchsucht den Knoten, auf dem sie aufgerufen wird, nach Elementen, die zum angegebenen CSS Selektor passen. In diesem Fall das ganze Dokument, und sie sucht <code><details></code> Elemente, die ein Element mit <code>class="detailsGroup"</code> als Elternelement haben.</p> </blockquote> <p>nein, nicht "Eltern" per se, sondern irgendwelche (gerne auch entfernte) Vorfahren. Das ist ein Unterschied, da im Selektor kein <code>></code> enthalten ist. Mit <code>.detailsGroup > details</code> wäre das tatsächlich auf die Eltern beschränkt.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779116#m1779116 ArneS 2020-12-12T19:24:55Z 2020-12-12T19:24:55Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Vielen Dank für die ausführliche Erklärung jetzt habe ich aber ein Problem... Ich habe den neuen Code eingfügt und es funktioniert, aber jetzt kann ich die Datei nicht mehr speichern. Ich bekomme eine Meldung dass ein Fehler aufgetreten ist (Fehler Unknown).</p> <pre><code class="block"> <script type="text/javascript"> document.querySelectorAll(".menue details") .forEach(d => d.addEventListener("toggle", detailsToggler)); function detailsToggler(ev) { if (!ev.target.open) return; let container = ev.target.closest(".menue"); for (let d of container.querySelectorAll("details")) { if (d != ev.target) d.open = false; } } </script> </code></pre> <p>so habe ich den Code in meine Html datei eingefügt. Der div in dem alle Details drin sind hat bei mir die Klasse "menue" Ich hoffe ich habe jetzt nichts total offensichtliches übersehen und es gibt eine Lösung für das Problem. LG Arne</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779087#m1779087 Rolf B 2020-12-11T18:39:30Z 2020-12-11T18:39:30Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo Gunnar,</p> <p>ich finde es in Lambdas unsinnig, die Kürze der Form durch aufgeblasene Variablennamen zu torpedieren. Was d ist, wird aus dem Kontext sofort klar.</p> <p>Bei Block-Lambdas sieht es wieder anders aus.</p> <p>Das Wort <code>event</code> als Variablenname ist für mich von C# her verbrannt. Dort ist es ein reserviertes Wort, und bevor ich anfange, mir für jede Sprache separat zu merken, welche Worte reserviert sind und welche nicht, setze ich das Wort für mich lieber auf die Liste zu meidender Variablennamen.</p> <p>Und ja, ich verwende im Büro C# und JS parallel, weil ich dort die Serverkomponenten mit C# erstelle.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779088#m1779088 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2020-12-11T20:39:06Z 2020-12-12T19:33:04Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>@@Rolf B</p> <blockquote> <p><strong>ich</strong> finde es in Lambdas unsinnig, die Kürze der Form durch aufgeblasene Variablennamen zu torpedieren. Was d ist, wird aus dem Kontext sofort klar. […]</p> <p>Das Wort <code>event</code> als Variablenname ist <strong>für mich</strong> von C# her verbrannt.</p> </blockquote> <p>Da irrt der Elevant. Du schreibst lesbaren Code nicht für dich, sondern für andere. Insbesondere Beispielcode hier im Forum.</p> <p> LLAP</p> <div class="signature">-- <br> <em lang="en">“When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.”</em> —John Lennon </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779118#m1779118 Rolf B 2020-12-12T19:31:12Z 2020-12-12T19:31:12Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>Hallo ArneS,</p> <blockquote> <p>aber jetzt kann ich die Datei nicht mehr speichern</p> </blockquote> <p>?!?!</p> <p>Du kannst welche Datei wo nicht speichern? Und womit bearbeitest Du sie? Hast Du sie vielleicht in zwei Programmen gleichzeitig geöffnet und das eine blockiert das andere beim Speichern?</p> <p>Wenn Du den Code in der von Dir gezeigten Form in ein HTML Dokument einbindest (am Ende des body bitte, sonst muss man noch einen ready-Handler bauen), sollte das aber funktionieren.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779564#m1779564 ArneS 2020-12-25T22:39:51Z 2020-12-25T22:39:51Z Navigation Bar, div anzeigen beim klicken auf einen Link <p>hmm jetzt hat es funktioniert, da war ich wohl kurz etwas Panisch . Trotzdem vielen dank für Antwort.</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779279#m1779279 JürgenB https://www.j-berkemeier.de 2020-12-17T15:46:25Z 2020-12-17T15:46:25Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Hallo Matthias,</p> <blockquote> <p>Ich versuche mich jetzt an einem "Tabbed Register" mit details. Die summary-Elemente sind auch ohne tabindex mit der Tab-Taste antabbar; ist eine Navigation mit Pfeil-vor und -Zurück aus Euren Sicht noch nötig?</p> </blockquote> <p>ich habe die Pfeilnavigation bisher nie ausprobiert und auch nie vermisst. Mir reicht TAB und Shift TAB aus.</p> <p>Bei Assistiven Techniken wüsste ich auch garnicht, welchen Sinn ich rauf-runter-links-rechts geben sollte.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2020/dec/10/navigation-bar-div-anzeigen-beim-klicken-auf-einen-link/1779280#m1779280 Matthias Scharwies mscharwies@selfhtml.org 2020-12-17T15:50:48Z 2020-12-17T15:50:48Z details und summary (war: Navigation Bar, div anzeigen beim klicken auf einen Link) <p>Servus!</p> <blockquote> <p>Hallo Matthias,</p> <blockquote> <p>Ich versuche mich jetzt an einem "Tabbed Register" mit details. Die summary-Elemente sind auch ohne tabindex mit der Tab-Taste antabbar; ist eine Navigation mit Pfeil-vor und -Zurück aus Euren Sicht noch nötig?</p> </blockquote> <p>ich habe die Pfeilnavigation bisher nie ausprobiert und auch nie vermisst. Mir reicht TAB und Shift TAB aus.</p> </blockquote> <p>Danke, finde ich auch! Ich lasse das alte Bsp mit divs und einer Liste mit aria-labels und Pfeilsteuerung aber drunter stehen - nur zum Vergleich.</p> <blockquote> <p>Gruß<br> Jürgen</p> </blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Einfach mal was von der <a href="https://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a> auf die Was-Solls-Liste setzen.“ </div>