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.
Kein Erfolg mit den hier beschriebenen Contao-Lösungen? Klappt es nicht mit dem gewünschten Contao-Update oder dem Umzug auf einen neuen Hostingserver?
Wenn die Frustration zu groß wird, einfach bei mir melden:
info@liquid-artwork.de - Ansprechpartner: Lars Scheumann
oder per Telefon: 07223 / 91 59 372
Fragen Sie den Contao Spezialisten
Manchmal ist es besser solche umfangreichen Aufgaben dem Profi zu überlassen, der schneller und sorgfältiger damit umgehen kann. Kostet seinen Preis, aber lohnt sich schnell, bevor man sich tagelang damit herum ärgert. LIQUID-ARTWORK betreut auch Kunden die ihre Webseite selbst erstellt haben, oder durch Dritte erstellt wurden. Kurze Anfrage bei mir und nach einer ersten Prüfung kann ich meist einen groben Preis nennen. Die Anfrage bei mir als alleine kostet dabei nichts!
