Dropdown Menu (Beispiel von Rolf B.)

[Gerrit]

Hallo,
ich komme zurück auf das Beispiel von Rolf.
Solang ich dort keine Auswahl vornehme oder nicht auf das logo klicke, bleibt das Menu bestehen.
Kann ich dieses verschwinden lassen durch Klick auf eine Stelle im viewport, außerhalb vom Menu?

[Rolf B]

Hallo Gerrit,

nur mit JavaScript. Da könntest Du einen click-Handler auf das window-Objekt legen (nicht den body, der füllt ggf. nicht das ganze Fenster aus), der das details-Element schließt, wenn ein click bei ihm ankommt.

Willst Du das?

<script type="module">
let menu = document.querySelector("nav details");
window.addEventListener("click", function(event) {
   if (event.target.closest("details") != menu) {
      menu.removeAttribute("open");
    }
});
</script>

(Edit: Bei Klick ins offene Menü nicht schließen. Wegen der Variablen menu in type="module" Script-Element setzen, oder anderswie/-wo kapseln, um globalen Müll zu vermeiden.)

Den Selektor in querySelector musst Du ggf. an deine konkrete Seite anpassen. Aber wenn dein details-Element eine ID hat, bist Du mit getElementById("...") statt querySelector("...") besser beraten.

Rolf

[JürgenB]

Hallo Rolf,

nur mit JavaScript. Da könntest Du einen click-Handler auf das window-Objekt legen (nicht den body, der füllt ggf. nicht das ganze Fenster aus), der das details-Element schließt, wenn ein click bei ihm ankommt.

Willst Du das?

<script>
window.addEventListener("click", function() {
   document.querySelector("nav details").removeAttribute("open");
});
</script>

geht das so einfach? Ich habe in Erinnerung, dass das Event auch feuert, wenn auf ein Kind des Details-Element geklickt wird. Daher prüfe ich im Tutotial noch, ob der Klick außerhalb der Navigation erfolgt ist.

Das Verlassen der Navigation per Tabulator muss auch noch berücksichtigt werden, und auch die ESC-Taste. Auch daher ist das Navigationstutorial so Javascriptlastig.

Gruß
Jürgen

[Rolf B]

Hallo Jürgen,

im Falle eines einstufigen Menüs geht das. Deine Vorstellung im Wiki ist mehrstufig und komplexer.

Okay, wenn man in den Leerraum des details-Elements klickt, schließt das Menü auch, aber das ist eine Kleinigkeit. Wenn es nach Klick auf einen Link schließt, ist es ja okay.

Aber ich verfeinere meinen Vorschlag noch mal. Ich frag mich nur, wie weit man Altbrowser berücksichtigen muss, um die Seite funktional zu halten.

Rolf

[JürgenB]

Hallo Rolf,

im Prinzip funktioniert ein Details/Summary-Menü. Klick außerhalb und ESC sind „Komfortfunktionen“. Wer mit uraltem Gerät oder ohne JS unterwegs ist, muss damit rechnen, dass nicht aller Luxus vorhanden ist.

Das Tutorial ist teilweise auch so Javascriptlastig, weil ich den IE und den alten Edge noch berücksichtige.

Gruß
Jürgen

[Rolf B]

Hallo JürgenB,

und auf meinem älteren Androiden, mit Chrome drauf, musste ich doch tatsächlich noch

  header summary::-webkit-details-marker {
    display:none;
  }

hinzufügen, um den Pfeil wegzubekommen. Da hat list-style-type:none und display:block nicht gereicht. Auf Desktop-Chrome ist es hinreichend. Und die Breiten sind auch hässlich. Manno ist das kompliziert.

Rolf

[Gerrit]

Hallo Rolf,

Aber ich verfeinere meinen Vorschlag noch mal. Ich frag mich nur, wie weit man Altbrowser berücksichtigen muss, um die Seite funktional zu halten.

Wo finde ich die Verfeinerung? Oder ist sie noch nicht fertig?

[Rolf B]

Hallo Gerrit,

ich habe meinen ursprünglichen Vorschlag ersetzt. Sorry, hätte ich verdeutlichen sollen.

https://forum.selfhtml.org/self/2021/mar/17/dropdown-menu-beispiel-von-rolf-b/1785862

Rolf

[Gerrit]

Hallo Rolf,
besten Dank.
Nach einem kleinen Problem habe ich es geschafft! Da ich keine Erfahrung mir Javascript habe, habe ich den Aufruf des Scripts nach dem Aufruf meiner CSS-Datei eingefügt - ohne Erfolg. Erst nachdem ich den Aufruf an das Ende des HTML-Dokuments gelegt habe, hat es funktioniert. Woran liegt dies?

[Rolf B]

Hallo Gerrit,

hast Du <script type="module"> verwendet?

In dem Fall wird das Script zum Modul, was zwei Auswirkungen hat:

• Die Variablen bleiben darin gekapselt
• Die Ausführung verzögert, bis die Seite geladen ist.

Andernfalls startet das Script sofort, und wenn man das im <head> tut, ist dier <body> der Seite noch gar nicht da und document.querySelector("nav details") greift ins Leere.

Nachteil von type="module" ist, dass Du den IE abhängst. Aber andererseits ist der bei details eh abgehängt und das CSS ist mit einem @supports so gebaut, dass der IE das Menü dauerhaft geöffnet anzeigt.

Rolf