Mega Menü

[Volker]

Super

Hab ich bei mir auf der Seite so hinzugefügt im Code

[Tommy Herrmann]

Vor allen Dingen braucht man das kleine Popup eigentlich nicht mehr (aber lasse es doch so), da sich ja nun das Mega-Dropdown auch geöffnet auf der Arbeitsseite korrekt bedienen lässt (Links, Bilder, usw.)

[Volker]

Da ist aber jetzt ein Fehler ich kann das Menü nicht mehr Klicken wenn ich auf z.B. https://www.niederastroth.de/bildblock.html gehe ist das Menü nicht mehr klickbar

Hab mit Filezilla hoch geladen jetzt gehts wieder -

[stobi_de]

Auch wenn ich mich nicht sehr an diesem Thread beteilige:
Wenn ich das Menü auf einem Handy öffne, aber nix drin mache, dann bleibt es auf.
Ich habe nicht das Mega-Menü geöffnet, nur den Hamburger betätigt
Ich kann auf dem geringen Platz unten unter dem geöffneten Menü scrollen, aber es schließt nur wieder durch Drücken des Hamburgers
Ist die Frage, ob das so verstanden wird.

[Tommy Herrmann]

jetzt hat Mobirise das JavaScript aus meinem Code-Editor wieder raus geschmissen

[Volker]

jetzt hat Mobirise das JavaScript aus meinem Code-Editor wieder raus geschmissen

Speicher mal lokal und hau mit file zilla hoch

Genau das ist der Grund warum ich immer mit File Zilla hoch lade - ich traue Mobirise nicht

[Tommy Herrmann]

Nimm das JavaScript aus dem Block wieder raus und kopiere dafür dieses JavaScript in die globale HTML vor das schließende </body> Tag:

https://www.mobirise-tutorials.com/Test ... nu-Volker/

Code: Alles auswählen

<script>
document.addEventListener('DOMContentLoaded', function () {
  // Im Editor nie eingreifen
  if (document.body.classList.contains('is-builder')) return;

  // A) Eventuelle Tooltip/Param-Reste entschärfen
  document.querySelectorAll(
    '[title*="Mega-Menü immer offen"], [data-bs-original-title*="Mega-Menü immer offen"]'
  ).forEach(function (el) {
    el.removeAttribute('title');
    el.removeAttribute('data-bs-original-title');
    if (el.getAttribute('data-bs-toggle') === 'tooltip' || el.getAttribute('data-bs-toggle') === 'popover') {
      el.removeAttribute('data-bs-toggle');
    }
    if (window.bootstrap?.Tooltip) {
      var inst = bootstrap.Tooltip.getInstance(el);
      if (inst) inst.dispose();
    }
  });

  // B) Klicks im Mega-Panel behandeln & Dropdown schließen (nur wenn gewünscht)
  // Wenn du "nur außen/Toggle schließt" willst, kannst du B) weglassen.
  document.querySelectorAll('.mega-dropdown-content').forEach(function (menu) {
    menu.addEventListener('click', function (e) {
      // Interaktive Elemente dürfen weiter funktionieren, alles andere stoppt
      var interactive = e.target.closest('a, button, input, select, textarea, label');
      if (!interactive) e.preventDefault();
      e.stopPropagation();

      var toggle = this.closest('.dropdown')?.querySelector('[data-bs-toggle="dropdown"]');
      if (toggle && window.bootstrap?.Dropdown) {
        bootstrap.Dropdown.getOrCreateInstance(toggle).hide();
      }
    }, true); // capture
  });
});
</script>

[Volker]

Ich warte noch bis du das durch getestet hast

Muss gleich zur Arbeit

[Volker]

Ist die Frage, ob das so verstanden wird.

DA sehe ich keinerlei Probleme Frank. Ich sehe das komplette Menü und wenn ich auf das mega menü klicke sehe ich das. klar muss man zum schliessen da wieder klicken. sollte aber logisch sein

[Tommy Herrmann]

Ich warte noch bis du das durch getestet hast

Muss gleich zur Arbeit

Natürlich war das ein Dutzend Mal getestet, bevor ich es hier geschrieben habe

Hier habe ich jetzt auch die Codes vom Mega-Menü (in Deinem Kopiercode-Script) eingefügt:

https://www.mobirise-tutorials.com/Test ... .html#Code