dk-mmenu - zusätzlicher Block im Menü Footer oder Kopf (Top)

Das Zusatzmodul "dk_mmenu" ist eines der derzeit schnellsten und ausgereiftesten Lösungen um ein Offcanvas-Menu (oder auch Mobile Menu bzw. Slidemenu) in Contao zu integrieren. Mit nur wenigen Handgriffen ist es eingerichtet und funktioniert hervorragend. Auch viele Zusatzeinstellungen sind zwischenzeitlich dazu gekommen (Effekte, Suchfunktion usw.). Welche Möglichkeiten das Script bietet findet man hier: https://mmenujs.com

Mein Wunsch war es weitere Informationen in das Offcanvas-Menu mit aufzunehmen, z.B. ein Logo oder eine Adresse. Auch Social Media Icons sollten im Menu sichtbar werden. Das Ziel ist es naütrlich immer, alles möglichst Updatesicher einzufügen und umzusetzen. Im Forum (Danke an die Community) gibt es eine Lösung dazu, die ich hier kurz zusammen tragen möchte, damit ich und andere es kompakt zusammengefasst nach schlagen können.

Lösungsansatz:

Das Template mmenu_default.html5 im Contao internen Template Editor erstellen und öffnen. Dort findet sich aktuelle dieser Baustein:

<?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';
}

?>
<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($thisoptions) ?>, <?= json_encode($this->configuration) ?>);
        }
    );
</script>

Diesen Code nun ergänzen und umstellen:

<?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'] = 'bottom';
$options['navbars']['content'] = \Controller::replaceInsertTags('{{ inserttag }}');

?>
<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>

Zu beachten ist, das am Ende des Bausteins, in der Zeile "new Mmenu..." das ($this->option) in ein ($option) umgewandelt werden muss.

An die Stelle mit dem {{ inserttag }} (ist hier nur ein Platzhalter) setzt Ihr einfach Euer gewünschtes Inserttag korrekt ein. Z.B. für einen Artikel oder ein Modul. Entsprechende Insert-Tags gibt es ja im Handbuch: https://docs.contao.org/manual/de/artikelverwaltung/insert-tags/

Über die Position kann man mit bottom oder top festlegen wo das alles stehen soll.

Mit dem Zusatz:

$options['navbar']['title'] = ' ';

Setzt man ein Leerzeichen zwischen die beiden Hochzeichen, dann bekommt man eine leere Ausgabe.

Man kann aber auch etwas anderes rein schreiben, z.B.

$options['navbar']['title'] = 'Navigation';

Ich hoffe das hilft Euch und erspart das durchsuchen des Contao-Forums, das zwar oft hilfreich ist, aber nicht immer so übersichtlich wie man es gerne hätte. Das Filtern kostet einfach immer sehr viel Zeit.

Zurück