tag:forum.selfhtml.org,2005:/self Frage zum Wiki-Artikel „Dropdown-Menü“ – SELFHTML-Forum 2021-04-17T17:38:43Z https://forum.selfhtml.org/self/2021/apr/15/frage-zum-wiki-artikel-37-186-10-92/1787351#m1787351 Werner C. http://www.wcanet.at 2021-04-15T19:47:40Z 2021-04-15T20:56:42Z Frage zum Wiki-Artikel „Dropdown-Menü“ <p>Hallo liebe Forumsleser</p> <p>Ich bin neu hier in diesem Forum und versuche durch erstellen einer Homepage HTML, CSS, und JS zu lernen. Ich bin leider noch Anfänger.</p> <p>Nun habe ich die Grundseiten erstellt und stehe vor einem Problem in der Navigationsleiste und ersuche um Unterstützung.</p> <p>Ich habe eine horizontale Navigationsleisteund möchte keine aufklappbaren Dropdown Menüs. Wünschenswert wäre nach dem Anklicken eines Menübegriffes die Änderung der ggst. Menüzeile auf Begriffe (Menüpunkte als Untermenü anstelle des Hauptmenüs).</p> <p>Ich habe trotz intensiver Suche keinen verständlichen Ansatz/Idee gefunden.</p> <p>Quelltext kann über die HP <a href="http://wcanet.at" rel="nofollow noopener noreferrer">http://wcanet.at</a> eingesehen werden.</p> <p>Ich hoffe in diesem Forum um Unterstützung.</p> <p>Vielen herzlichen Dank.</p> <p>Edit Rolf B: Artikel korrekt verlinkt, auf den sich die Frage bezieht und HP klickbar gemacht.</p> https://forum.selfhtml.org/self/2021/apr/15/frage-zum-wiki-artikel-37-186-10-92/1787357#m1787357 Rolf B 2021-04-15T21:11:14Z 2021-04-15T21:11:14Z Frage zum Wiki-Artikel „37.186.10.92“ <p>Hallo Werner,</p> <p>dass die Dropdown-Menüs nicht funktionieren, liegt daran, dass <main> die "nach unten" hinaushängenden Boxen der Navigations <li> Elemente überlagert und deswegen der Hover-Effekt verloren geht. Das ist auch im Wiki-Beispiel unsauber. Vermutlich wurde da nicht mehr recht dran gearbeitet, weil eine Dropdown-Navigation nur mit CSS keine ordentliche Lösung erzeugt - wie auch im Wiki erwähnt wurde.</p> <p>Wie auch immer - um die Navigation "hochzuheben", braucht sie einen z-index, und weil z-index nur für positionierte Elemente greift, braucht sie auch noch ein position:relative. Das wäre in deiner design.css in den Block ab Zeile 27 einzufügen:</p> <pre><code class="block">nav { ... position: relative; z-index: 1; } </code></pre> <p>Dazu kommt das Problem, dass Du den Navigations-Listenpunkten ein float:left verpasst hast. Das beißt sich mit dem Dropdown-Konzept, weil es die Listitems auf volle Höhe zwingt und das Verstecken mit Visibility nicht mehr funktioniert. Das float:left muss weg - das Nebeneinandersetzen der <li> erfolgt über das display:flex am ul Element.</p> <p>Damit würde die Dropdown-Navigation besser funktionieren. Wenn Dir das generelle Design dieser Navigation nicht gefällt - über Details kann man sicher reden </p> <p>Das, was Du Dir wünschst, ist aber meiner Meinung auch für Maus-/Touch User schwer bedienbar. Wenn ich auf einen Menüpunkt mit Unterpunkten klicke, soll die Menüzeile ersetzt werden. Klicke ich auf einen Menüpunkt ohne Unterpunkte, wechsle ich gleich zur neuen Seite? Das ist nicht wirklich intuitiv.</p> <p>Es fehlt für die Untermenüs dann auch eine "zurück" Funktion, mit der man die Hauptmenüleiste wieder erhält. Ich stelle mir das für jemanden, der die Seite über einen Screenreader ansurft, schwer bedienbar vor (die Bedienbarkeit ist bei reinen CSS Menüs ohnehin die größte Hürde).</p> <p>Wie auch immer - das dürfte mit CSS nicht umsetzbar sein. Das sehe ich nur mit JavaScript lösbar. Und auch kein triviales Script.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/apr/15/frage-zum-wiki-artikel-37-186-10-92/1787403#m1787403 Rolf B 2021-04-16T20:01:50Z 2021-04-16T20:01:50Z Frage zum Wiki-Artikel „Dropdown-Menü“ <p>Hallo Werner,</p> <p>du hast mir per Post geschrieben, dass Du auch eine JS Lösung nehmen würdest, sie dann auch gern verstehen willst.</p> <p>Ich habe mal was gebastelt, das sicherlich noch Verbesserungspotenzial hat.</p> <p><a href="https://jsfiddle.net/Rolf_b/60ugek8h/" rel="noopener noreferrer">https://jsfiddle.net/Rolf_b/60ugek8h/</a></p> <p>Das sind einfach mehrere Menüs, die jeweils in einem div eingekapselt sind. Das div deshalb, weil die Untermenüs einen vorangestellten Titel haben - der kann kein <li> sein und muss vor dem ul stehen. Eins der divs bekommt eine "aktiv" Klasse und wird dadurch sichtbar, die übrigen sind unsichtbar. Ich nehme an, dass hierfür irgendein aria-Attribut besser geeignet ist, aber bin nicht sicher, welches. ARIA ist eine HTML Erweiterung zur Bedienbarkeit (=Assistenztechniken).</p> <p>In den Menüs sind Links. Einige davon haben ein data-menu Attribut, das sind Links, die Submenüs öffnen können. Das macht nicht das data-attribut, sondern das JavaScript - das data-Attribut dient nur zur Ablage von eigenen Infos an HTML Elementen. Normalerweise verwendet man für Aktionen, die auf der Seite bleiben, Buttons. Aber ich habe bewusst Links genommen, weil JavaScript auch deaktiviert sein kann. In dem Fall wird einfach auf eine Zwischenseite verlinkt, von der aus man weiter auswählen kann. Wenn JavaScript aktiv ist, erscheinen die Untermenüs. Das nennt man progressive Verbesserung (progressive enhancement).</p> <p>Klicks auf die data-menu Links werden von JavaScript abgefangen. Das Script setzt einfach die "aktiv" Klasse auf das Menü, das unter data-menu angegeben ist. Über CSS wird dafür gesorgt, dass von den vorhandenen Menüs nur das zu sehen ist, das die aktiv-Klasse trägt.</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>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>mainMenu<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>aktiv<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>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>/index.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Startseite<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>/wohnen.html<span class="token punctuation">"</span></span> <span class="token attr-name">data-menu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wohnenMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wohnen...<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>/wetter.html<span class="token punctuation">"</span></span> <span class="token attr-name">data-menu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wetterMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wetter...<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>/wissen.html<span class="token punctuation">"</span></span> <span class="token attr-name">data-menu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wissenMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Wissen...<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>/links.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Links<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>/weiteres.html<span class="token punctuation">"</span></span> <span class="token attr-name">data-menu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>weiteresMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Weiteres...<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>div</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 attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>wohnenMenu<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>b</span><span class="token punctuation">></span></span>Wohnen:<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</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>/index.html<span class="token punctuation">"</span></span> <span class="token attr-name">data-menu</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>mainMenu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>zurück<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>/essen.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Essen<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>/spielen.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Spielen<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>/schlafen.html<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Schlafen<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>div</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> <pre><code class="block language-js"><span class="token comment">// Suche das nav-Element und speichere es in einer Variablen</span> <span class="token keyword">let</span> navigation <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"nav"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Registriere auf dem nav Element einen Eventhandler für das click-</span> <span class="token comment">// Event. Button-Klicks werden nicht nur auf dem Button signalisiert, </span> <span class="token comment">// sondern auch auf der Eltern-Kette.</span> navigation<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Abfragen: Wurde ein Link geklickt oder was anderes?</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>tagName <span class="token operator">==</span> <span class="token string">"A"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// Wenn Link: data-menu auslesen, das ist die ID des neuen Menüs</span> <span class="token comment">// Ist keine ID da, Eventhandler verlassen.</span> <span class="token keyword">let</span> menuId <span class="token operator">=</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>menu<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>menuId<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// Dieses Menü heraussuchen</span> <span class="token comment">// Wenn es nicht existiert, Eventhandler verlassen</span> <span class="token keyword">let</span> newMenu <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span>menuId<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>newMenu<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token comment">// Dem bisher aktive Menü die "aktiv" Klasse wegnehmen...</span> navigation<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".aktiv"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token string">"aktiv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// und sie ans neue Menü anhängen.</span> newMenu<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token string">"aktiv"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Verhindern, dass der Browser den Klick auf den Link verarbeitet.</span> event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Ich kann Dir jetzt keinen JavaScript-Grundkurs machen, den findest Du im Self-Wiki. Dort sind auch die DOM Methoden wie querySelector, getElementById, addEventListener und preventDefault erklärt. Das ist eine ganze Menge an Wissen, die man da braucht, weil man zweierlei kennen muss: (a) die Sprache Javascript und (b) das Objektmodell des Browsers, auf dem man hantiert.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div> https://forum.selfhtml.org/self/2021/apr/15/frage-zum-wiki-artikel-37-186-10-92/1787432#m1787432 Werner C. w.casett@wcanet.at http://www.wcanet.at 2021-04-17T12:21:00Z 2021-04-17T12:21:00Z Frage zum Wiki-Artikel „Dropdown-Menü“ <p>Hallo Rolf</p> <p>Vielen Dank, funktioniert genau so wie ich es mit vorgestellt habe. Danke auch für den Hinweis mit dem Home Link, daran hab ich erstmal nicht gedacht.</p> <p>Ist auch sehr gut erklärt was da wie läuft. auch das JS, Super, vielen Dank dafür</p> <p>Eine Kleinigkeit ist mir aufgefallen: Mit dem Home Link sollte die Indexseite im Main-Menü aufgerufen werden, die Menüleiste ändert sich zwar, aber der Seiteninhalt erscheint nicht sofort sondern man mauß auf der Indexseite den Link Startseite drücken. Sollte dies nicht mit dem Rücksprung/Aufruf der Indexseite passieren ?</p> <p>LG Werner</p> https://forum.selfhtml.org/self/2021/apr/15/frage-zum-wiki-artikel-37-186-10-92/1787442#m1787442 Rolf B 2021-04-17T17:38:43Z 2021-04-17T17:38:43Z Frage zum Wiki-Artikel „Dropdown-Menü“ <p>Hallo Werner,</p> <blockquote> <p>Mit dem Home Link sollte die Indexseite im Main-Menü aufgerufen werden</p> </blockquote> <p>Mit dem "Home Link" meinst Du die "zurück" Links? Die referenzieren auf /index.html, ja, aber das ist der Fallback falls kein JavaScript ausgeführt wird. Der Normalfall sollte sein, aus einer Unter-Ebene in die Haupt-Ebene zurückzukehren. Dafür ist das gedacht. Du müsstest pro Seite, die das Menü enthält, überlegen, was der geeignete "zurück" Link ist. Es spricht auch nichts dagegen, in jeder Submenüebene einen Link zur Startseite unterzubringen - das führt nur zu einer Menge HTML-Doppelung.</p> <p>Wie gesagt: das war ein Bastelergebnis. Damit hast Du jetzt ein Werkzeug geschenkt bekommen. Was genau du damit tust, ist deiner Kreativität überlassen.</p> <p>Und Dir sollte klar sein, dass Du dieses Menü zwanzigmal duplizierst, wenn Du zwanzig Seiten hast. Wenn Du das nicht willst, bräuchtest Du eine serverseitige include-Technik, z.B. mit PHP.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - obstruxi </div>