Frage zum Wiki-Artikel „Dropdown-Menü“

[Rolf B]

Hallo Werner,

du hast mir per Post geschrieben, dass Du auch eine JS Lösung nehmen würdest, sie dann auch gern verstehen willst.

Ich habe mal was gebastelt, das sicherlich noch Verbesserungspotenzial hat.

https://jsfiddle.net/Rolf_b/60ugek8h/

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).

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).

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.

<nav><div id="mainMenu" class="aktiv">
<ul>
<li><a href="/index.html">Startseite</a></li>
<li><a href="/wohnen.html" data-menu="wohnenMenu">Wohnen...</a></li>
<li><a href="/wetter.html" data-menu="wetterMenu">Wetter...</a></li>
<li><a href="/wissen.html" data-menu="wissenMenu">Wissen...</a></li>
<li><a href="/links.html">Links</a></li>
<li><a href="/weiteres.html" data-menu="weiteresMenu">Weiteres...</a></li>
</ul>
</div>
<div id="wohnenMenu">
<b>Wohnen:</b><ul>
<li><a href="/index.html" data-menu="mainMenu">zurück</a></li>
<li><a href="/essen.html">Essen</a></li>
<li><a href="/spielen.html">Spielen</a></li>
<li><a href="/schlafen.html">Schlafen</a></li>
</ul>
</div>
...
</nav>

// Suche das nav-Element und speichere es in einer Variablen
let navigation = document.querySelector("nav");

// Registriere auf dem nav Element einen Eventhandler für das click-
// Event. Button-Klicks werden nicht nur auf dem Button signalisiert, 
// sondern auch auf der Eltern-Kette.
navigation.addEventListener("click", function(event) {
   // Abfragen: Wurde ein Link geklickt oder was anderes?
   if (event.target.tagName == "A") {
      // Wenn Link: data-menu auslesen, das ist die ID des neuen Menüs
      // Ist keine ID da, Eventhandler verlassen.
      let menuId = event.target.dataset.menu;
      if (!menuId) return;
      // Dieses Menü heraussuchen
      // Wenn es nicht existiert, Eventhandler verlassen
      let newMenu = document.getElementById(menuId);
      if (!newMenu) return;

      // Dem bisher aktive Menü die "aktiv" Klasse wegnehmen...
      navigation.querySelector(".aktiv").classList.remove("aktiv");
      // und sie ans neue Menü anhängen.
      newMenu.classList.add("aktiv");
      // Verhindern, dass der Browser den Klick auf den Link verarbeitet.
      event.preventDefault();
   }
});

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.

Rolf