Hallo einsiedler,

Alles habe ich so eingesetzt wie in Deinem Beispiel. Es funktioniert einfach nicht.

Weil die Ratschläge nur halb umgesetzt hast.

(1) Ich habe Dir am 01.05.2025 um 18:12 beschrieben, wie Du das Flyout-Widget flexibel auf zwei Widgets anwendest. Das hast Du nicht getan, du wendest es unflexibel nur auf das main-nav Menü an.

(2) Du hast das <script> ans Ende verschoben, wie Gunnar vorschlug. Prima. Aber dann kann die Klammer mit DOMContentLoaded weg. Das stört zwar nicht, es ist aber überflüssig.

Entweder: Script im Head:

<script>
document.addEventListener("DOMContentLoaded", function() {
   // DOM-spezifische Initialisierung
});
</script>

Oder: Script am Ende vom Body:

<script>
   // DOM-spezifische Initialisierung
</script>

Es gibt hierbei einen kleinen Unterschied: Die Funktion des DOMContentLoaded Handlers kapselt die Variablen und Funktionen ein, die Du verwendest. Ohne die Eventhandler-Funktion sind diese Variablen und Funktionen global sichtbar. Das kann man durch eine IIFE (immediately invoked function expression, siehe Wiki ) wieder einkapseln - sofern nötig. Sofern nicht nötig, kannst Du Dir das auch sparen.

<script>
(function() {
   // DOM-spezifische Initialisierung
})();
</script>

Rolf