Frage zum Dropdown-Menü in Mobi v5

[Fewo]

Hallo zusammen,
ich habe ein etwas seltsames Verhalten auf meiner Testpage, welches sich auch nur unter iPhone oder iPad darstellt.

Ich habe ein Menü aus einem M5-Theme eingebaut und auch eine Rubrik mit "Untermenüpunkten" eingebaut.
Werden auf einem iPad oder iPhone die Menüpunkte angeklickt, wird immer die entsprechende Section angesteuert und das Menüband (Hamburger und auch normales Menü) wird zugeklappt. Soweit so gut.

Wird aber in einem Menüpunkt ein Untermenüpunkt selektiert, springt die Seite zwar in die entsprechenden Section, aber das Menü und auch die Untermenüpunkte bleiben offen. Diese sollen sich aber wieder autom. schließen.

Alle im Netz sich auffindbaren Javascripte oder auch CSS-Befehle haben bislang keinen Erfolg gebracht.
Z. B. dieses Javascript:

Code: Alles auswählen

$('.dropdown-item').on('click', function() {
    $('.navbar-collapse').collapse('hide');
});

Auch dieser CSS-Code hat leider keinen Erfolg gebracht:

Code: Alles auswählen

data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show"

Meine Testpage ist momentan hier: www.helge-schroeder.com

Auf z. B. der Seite von Tommy funktionieren seine Untermenüpunkte auf dem iPhone oder iPad ohne Probleme.

Vielleicht habt Ihr noch einen Tipp?

Viele Grüße Helge

[Fewo]

Kurzer Nachtrag noch:

Es funktioniert leider auch auf Windows11-PCs unter Chrome oder EDGE nicht.
Immer wenn das Hamburger Menü dargestellt wird, wird nach dem Klick eines "SubmenÜ-Punktes" das Hamburger Menü nicht wieder eingeklappt.

[Volker]

Moin Helge,

kann ich so nicht bestätigen. Ich habe es gerade mal im Edge Win11 getestet:



Ah jetzt vesrtehe ich, das Menü soll nach auswahl des Unterpunktes zu gehen und nicht erst bei Fokus auf die Seite

[Volker]

Probier es mal testweise mit dem hier:

Code: Alles auswählen

<script>
  document.addEventListener('DOMContentLoaded', function () {
    // Alle Untermenü-Links im Navbar erfassen
    var navLinks = document.querySelectorAll('.navbar-collapse .dropdown-item, .navbar-collapse a');

    navLinks.forEach(function (link) {
      link.addEventListener('click', function () {
        // Hamburger-Menü schließen
        var navCollapse = document.querySelector('.navbar-collapse');
        if (navCollapse && navCollapse.classList.contains('show')) {
          navCollapse.classList.remove('show');
        }
        // Den Toggle-Button zurücksetzen
        var toggler = document.querySelector('.navbar-toggler');
        if (toggler) {
          toggler.classList.add('collapsed');
          toggler.setAttribute('aria-expanded', 'false');
        }
      });
    });
  });
</script>

In die Seiteneigenschaften kopieren

[Tommy Herrmann]

Moin,

schreibe das mal in die globalen Site-Einstellungen:

> Sites > Global HTML Insert > Before </head> code

Code: Alles auswählen

  <!-- added CSS to display the hamburger menu on iOS14 and later -->
  <style>
    .hamburger-icon {
      height: .1px !important;
      background-color: #fff !important
    }
  </style>

Wenn es das auch nicht funktioniert, schreibe bitte nochmals direkt an den Support, denn dieses Problem existiert und ist bekannt:

support@mobirise.com

[Fewo]

Hallo Tommy und Volker,

vielen Dank für Eure Code-Beispiele.

leider hat keiner der beiden den gewünschten Erfolg gehabt, wenn man den Unterpunkt im Hamburger-Menü betätigt, bleibt das Menü noch geöffnet. Trotzdem vielen Dank.

Werde es mal wie, Tommy geschrieben hat, mit dem Mobirise-Support versuchen. Wenngleich ich da wenig Hoffnung habe.

Viele Grüße Helge

P.S.: Tommy, ich bin froh das Du hier wieder unterwegs sein kannst und magst. Weiterhin alles erdenklich Gute.

P.P.S: Volker, Dir an dieser Stelle auch mal herzlichen Dank für Deine vielen tollen neuen Ideen hier im Forum.