[dk_mmenu] Mobile Navigation - nicht nur für mobile Websites

[Spooky]

So sieht das default Template von dk_mmenu aus: https://github.com/dklemmt/contao_dk...av_mmenu.html5
Bei "isActive" wird ein <span> verwendet.

Unter Verwendung der folderpage Extension könntest du die Bedingung auf

if ($item['isActive'] || 'folder' === $item['type']) 

erweitern.

[HorseBadorties]

Hey Spooky, vielen lieben Dank für Deine Hilfe!!!
Aber nach einigem hin-und herprobieren: es klappt nicht. Denke, ich werde die Navi dann doch ganz neu machen...

[gm-team]

Danke an @Spooky für die Tipps zu den navbars - konnte die Optionen erfolgreich hinzufügen.

Mein Ziel ist es, das mmenu um Inhalte zu erweitern. Das funktioniert soweit recht gut, allerdings wäre es weit einfacher und übersichtlicher wenn ich per Inserttags eigene FE-Module platzieren könnte.
Allerdings werden diese einfach als string im FE ausgegeben. Kann hier ev replaceInsertTags helfen?

Ich scheitere leider an der Syntax, wäre echt super wenn mir jemand helfen könnte, aktuell sieht mein mmenu_default.html5 wie folgt aus:

<?php

$GLOBALS['TL_CSS']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.css|static';

if ($this->options['polyfill'] ?? false) {
    $GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu.polyfill'] = 'bundles/contaommenu/mmenu/mmenu.polyfills.js|static';
}

$GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.js|static';

if ($this->options['drag']['menu']['open'] ?? false) {
    $GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu.hammerjs'] = 'bundles/contaommenu/hammerjs/hammer.min.js|static';
}

$options = $this->options;
$options['navbars']['position'] = 'top';
$options['navbars']['content'] = '{{insert_module::43}}';

?>
<script>
    document.addEventListener(
        "DOMContentLoaded", function () {
            const menu = document.querySelector('#<?= $this->elementId ?>');
            if (null !== menu && 0 === menu.querySelectorAll('li.active').length) {
                const trails = menu.querySelectorAll('li.trail');
                if (0 < trails.length) {
                    trails.item(trails.length - 1).classList.add('active');
                }
            }
            new Mmenu('#<?= $this->elementId ?>', <?= json_encode($options) ?>, <?= json_encode($this->configuration) ?>);
        }
    );
</script>

Der Theorie nach müsste also an folgender Stelle das replaceInsertTags integriert werden:

$options['navbars']['content'] = '{{insert_module::43}}'; 

Macht das überhaupt Sinn - kann man das bewerkstelligen?

[planepix]

Hallo zusammen,
ich habe eine 3.5 auf 4.9.26 aktualisiert.

In der Installation ist auch das Bundle installiert - Version 3.2.5.

Funktion ist auch gegeben; lediglich bei responsiven Größen blitzt das Menü kurz aufgeklappt auf -- FOUC i guess?
Sowohl in Chrome als auch in Firefox - im Mobile Safari nur beim ersten Laden der Website.

Im Inspektor wird mir angezeigt:

[Violation] Forced reflow while executing JavaScript took 100ms
jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:2 [Violation] 'load' handler took 221ms
[Violation] Forced reflow while executing JavaScript took 201ms
jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:15 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
scrollBugFix @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:15
e._initAddons @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
e @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
(anonym) @ (Index):258
jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4 [Violation] Added non-passive event listener to a scroll-blocking 'touchstart' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952
j @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
(anonym) @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:15
e.trigger @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
e._initMenu @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
e @ jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4
(anonym) @ (Index):258
jquery.min.js,mmenu.js,rocksolid-slider.min.js-73f788cb.js:4 [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Bekommt man das Flackern weg? Umbau / Ergänzung in einem Template?
Danke für eine Idee.

EDIT: Selbst via Google gefunden: https://community.contao.org/de/show...l=1#post518529

#navmobil:not( .mm-menu ) {
    display: none;
}

Und nun passt es!

[Andreas]

Der Theorie nach müsste also an folgender Stelle das replaceInsertTags integriert werden:

$options['navbars']['content'] = '{{insert_module::43}}'; 

Ich glaube das würde so gehen, weiß aber nicht, ob das dort funktioniert.

$options['navbars']['content'] = \Controller::replaceInsertTags('{{insert_module::43}}'); 

Ich nutze diese Erweiterung nicht, aber hat die im BE im Modul keine Möglichkeit Content hinzuzufügen? So wie mobile_menu?

[thymian]

Hallo zusammen,

mit dem Update auf Conto 4.13 taucht dieses Problem auf und ich finde die Ursache nicht. Kann mir da jemand einen Schubs geben?

Das Menü öffnet sich auf dem Desktop und dem iPhone auf Firefox, Safari, aber nicht auf Android Chrome und Firefox.

Die Seite: ...

Danke!

[spacefront]

Hi,

bei mir öffnet sich das Menü. Hasst Du es mal in einem Privaten/Inkoknito Tab probiert?

Warum das Menü auf der Desktop Seite?

Viele Grüße

Alex

[thymian]

Danke, Alex, jetzt sehe ich es auch via appetize.io. Muss mir leider so behelfen, da ich kein Android habe. Auf Bluestacks klappte das nicht, seltsam.

Desktop, weil ich immer auf Desktop die Seiten mache und dann mobil prüfe.

[d003232]

Set dem Update von 4.13 auf Contao 5.x funktionieren bei mir die mit position: fix plazierten Buttons nicht mehr richtig, d.h. diese erscheinen an der falschen Stelle und scrollen mit.

Nun habe ich hier gelesen, dass es daran liegt "dass der gesamte #wrapper durch den erwähnten "Off Canvas Effekt" mit Hilfe der CSS-transition manipuliert wird".
https://community.contao.org/de/show...-und-transform

Ich verstehe es zwar technisch nicht. Aber wenn ich das Mobile Menü aus dem Seitentemplate herausnehme, funktionieren meine Buttons wieder. Somit scheint irgend etwas an dk_mmenu tatsächlich die Ursache zu sein.

Wie kann ich das umgehen? Wie kann ich den "Off Canvas Effekt" von dk_mmenu abschalten?

[zoglo]

Ich verstehe es zwar technisch nicht. Aber wenn

Das können wir ohne Beispiel auch nicht verstehen - Poste immer einen Link zur Seite, wenn du CSS-Fragen hast.

Wie kann ich den "Off Canvas Effekt" von dk_mmenu abschalten?

Das steht im erwähnten Thread von dir, dass es wohl eine Option gibt.
Zusätzlich wird dort auf mehrere Lösungen verlinkt, hast du diese durchgelesen?

[Spooky]

In dem verlinkten Thread geht es aber grundsätzlich um eine ganz andere Extension (Ursache und Lösung könnte aber gleich sein).

[d003232]

Ich finde in dk_mmenu keine Option, um den genannten Off Canvas Effekt auszuschalten. Aber mit nochmal Googeln und der richtigen Richtung, habe ich für mich nun eine Lösung über CSS gefunden:

Ich überschreibe das gesetzte transform mit:

/* wg Problem in 5.x mit dk_mmenu und Buttons mit position:fix => darf kein translate übergeordnet im wrapper verwendet werden */
.mm-slideout {
	-webkit-transform: none !important;
	transform:  none !important;
}

Update: *** geht leider nicht, da damit das mobile Menü nicht mehr eingeblendet wird / https://ferienhaus-schwarzwald-todtnauberg.de/ ***

[d003232]

Wie kann ich eigene Optionen über für mmenu setzen? Optionen, die im Backend von dk_mmenu nicht vorgesehen sind? Ich würde gerne versuchen, ob ich mein Problem mit dem nicht funktionierenden "position: fix" über ein Abschalten des "offcanvas" Addons von mmenu umgehen kann:
https://mmenujs.com/docs/core/off-canvas.html

Wenn ich es richtig verstehe, werden im Template "mmenu_default.html5" die Optionen für mmenu gesetzt. Wie bekomme ich dort in das "$this->options" eigene Optionen rein, d.h. "offCanvas": { "use": false }?

<?php

$GLOBALS['TL_CSS']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.css|static';
$GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.js|static';

?>
<script<?= method_exists($this, 'attr') ? $this->attr()->setIfExists('nonce', $this->nonce('script-src')) : '' ?>>
    document.addEventListener(
        "DOMContentLoaded", function () {
            const menu = document.querySelector('#<?= $this->elementId ?>');
            if (null !== menu && 0 === menu.querySelectorAll('li.active').length) {
                const trails = menu.querySelectorAll('li.trail');
                if (0 < trails.length) {
                    trails.item(trails.length - 1).classList.add('active');
                }
            }
            new Mmenu('#<?= $this->elementId ?>', <?= json_encode($this->options) ?>, <?= json_encode($this->configuration) ?>);
        }
    );
</script>

[Spooky]

Das ist einfach nur ein Array. Das könntest du im Template anpassen.

[zoglo]

Bevor du hier jetzt noch viel zu lange dran sitzt - hau das in dein Seitenlayout als Script rein und beende das Thema.
Durch das transform wirst du es nicht schaffen position fixed richtig zu nutzen, es sein denn du bist außerhalb des containers.

Ungetestet

<script>onload = () => { document.body.classList.remove('mm-wrapper--position-left') }</script> 

Die Klasse wird durch das mmenujs beim Öffnen gesetzt und wieder weggenommen, beim Init willst du es nicht haben.

[d003232]

<script>onload = () => { document.body.classList.remove('mm-wrapper--position-left') }</script> 

Die Klasse wird durch das mmenujs beim Öffnen gesetzt und wieder weggenommen, beim Init willst du es nicht haben.

Vielen Dank!

Bin heute schon 4 Stunden erfolglos dran gesessen. Die Benutzung des offcanvas Modul auf false zu setzten hat nicht geholfen. Dazu habe ich es nicht geschaft, diese Option mit PHP dem array $options richtig hinzuzufügen.

Das Herausnehmen der Klasse 'mm-wrapper--position-left' über den Scripteintrag im Template funktioniert! Ich war schon kurz davor, die ganze dk_mmenu Erweiterung rauszuwerfen und was anderes zu suchen. Nun geht es erst einmal wieder ????.

[d003232]

Gerade stelle ich fest, dass es auf meinm Pixel 6 Handy noch immer nicht funktioniert. MitUuntersuchen im Browser auf der Handy Einstellung ist alles OK, aber auf dem echten Handy scrollen die fixen Buttons noch immer mit.

https://ferienhaus-schwarzwald-todtnauberg.de

Wenn ich das Mobile Menü kurz öffne und direkt wieder schließe, werden die gelben Buttons richtig platziert. Muss ich noch irgend eine Klasse rausnehmen oder was ist der Unterschied zwischen Desktop und Handy?

Gibt es keine grundsätzliche Möglichkeit für den Entwickler von mmenu, dieses Problem zwischen Position:fix und translate zu verhindern?

[zoglo]

Das Script muss nach der mmenu js laden -> Stichwort: Ladereihenfolge.
Ich weiß ja nicht wo und wie du es eingebunden hast.

[karo68]

Hallo Dirch und danke für die tolle Erweiterung.
Ich habe sie nun erfolgreich auf einer "multiplen" OnePageWebsite zum Laufen gebracht. Die Website hat mehrere "echte" Seiten, die Unterpunkte auf jeder Seite sind jedoch Anker.
Nun schließt das Menu leider nicht selbstständig, wenn ich einen Unterpunkt/Anker ansteuere.
Ich habe hier einen Hinweis gefunden, wie man es möglicherweise hinkriegen kann: http://stackoverflow.com/questions/2...on-anchor-tags
Dazu müsste ich jedoch den generierten Javascript ändern.
Wenn ich es richtig verstehe, müsste Folgendes ausgegeben werden:

$("#my-menu").mmenu({
  "slidingSubmenus": false,
  onClick : {
    close          : true,
    preventDefault : false,
  }
}); 

Kann mir vielleicht jemand einen Hinweis geben, wie ich es machen kann ohne gleich die ganze Erweiterung aufbohren zu müssen?

Heho,

das kannst du im zugehörigen js-template (js_mmenu) machen. Das sieht nur etwas kryptisch aus wegen dem php-code innen drin, aber du kannst da deine parameter hinzufügen.

Moin, ich benutze einen OnePager mit Anker-Links. Wenn ich das richtig verstehe, muss ich den o.g. Code ins Template "js_mmenu" einbauen, damit sich das Menü nach Klick auf einen Link schließt (derzeit bleibt es nach Klick noch offen). Ich benutze Contao 5 mit dem neuesten mmenu. Hier gibt es so ein Template nicht. Kann mir jemand sagen, an welcher Stelle ich das geänderte Script einbinden muss?

[Spooky]

Das von dir gepostete Zitat ist mittlerweile fast 8 Jahre alt. Selbst wenn du das richtige Template dafür nimmst (das wäre https://github.com/dklemmt/contao_dk..._default.html5) wirst du das nicht 1:1 so verwenden können. Einerseits weil sich die Struktur der Templates geändert hat und andererseits, weil sich seither die mmenu Version geändert hat.

[karo68]

Das von dir gepostete Zitat ist mittlerweile fast 8 Jahre alt. Selbst wenn du das richtige Template dafür nimmst (das wäre https://github.com/dklemmt/contao_dk..._default.html5) wirst du das nicht 1:1 so verwenden können. Einerseits weil sich die Struktur der Templates geändert hat und andererseits, weil sich seither die mmenu Version geändert hat.

O.K., verstehe. Kennst du eine Lösung, damit das Menü auch bei Anker-Links schließt?

[Spooky]

Evt. musst du du einen setPage:after Hook aus der Off-Canvas Plugin API implementieren, der dann die "close" Methode der Off-Canvas Plugin API aufruft.

[karo68]

Evt. musst du du einen setPage:after Hook aus der Off-Canvas Plugin API implementieren, der dann die "close" Methode der Off-Canvas Plugin API aufruft.

danke für die schnelle Antwort!
Da stecke ich dann leider doch nicht tief genug drin, so dass ich weiß, an welcher Stelle der Hook mit welchen Aufrufen und wie das OFF-Canvas-Plugin in Contao implementiert werden muss .

[Spooky]

Mit Contao selbst hat das wenig zu tun.

[karo68]

Mit Contao selbst hat das wenig zu tun.

Dann streiche ich "Contao" und weiß es trotzdem nicht.
Habe auch schon die Seite durchgeschaut:
https://mmenujs.com/docs/core/off-canvas.html