Hallo zusammen
Ich möchte die Erweiterung dk_mmenu zum laufen bringen.
Gibt es eine Anleitung auch auf Deutsch zum nach Bauen.
Ich habe Contao 3.4.2 installiert.
Ich möchte das das Script von oben kommt.
Besten Dank im Vorraus
mypixel
Druckbare Version
Hallo zusammen
Ich möchte die Erweiterung dk_mmenu zum laufen bringen.
Gibt es eine Anleitung auch auf Deutsch zum nach Bauen.
Ich habe Contao 3.4.2 installiert.
Ich möchte das das Script von oben kommt.
Besten Dank im Vorraus
mypixel
Erstell dir einfach zwei Module.
Modul 1 (Eigener HTML-Code):
Modul 2 (Modultyp: mmenu - Navigationsmenü) mit der ID offcanvas.Code:<div class="offcanvas"><a href="#offcanvas">Navigation</a></div>
Die ID kannst du je nach Gusto benennen, in meinem Fall nehme ich offcanvas.
Nun einfach beide Module in dein Seitenlayout einbinden, that's it.
jQuery muss als JS Framework eingebunden sein!
Modulbeschreibung:
Zitat:
Das Navigationsmenü ist standardmäßig versteckt. Mit Hilfe eines beliebigen Links wird der eigentliche Seiteninhalt je nach eingestellter Menü-Position verschoben. Damit dies funktioniert muß jedem Navigationsmenü in den Experten-Einstellungen des Moduls eine CSS-ID zugewiesen werden! Mit einer URL (<a href="#CSS-ID"></a>) auf diese wird das Menü bei Klick auf den Link eingeblendet.
Die Anleitung steht doch in der Modulbeschreibung:
Edit: da war jemand schneller :D
Zitat:
mmenu ist ein jQuery-Plugin von Fred Heusschen, das ein platzsparendes Navigationsmenü erstellt. Es ist vor allem für mobile Webseiten/Layouts sinnvoll kann jedoch auch für große Layouts verwendet werden.
Nach der Installation dieser Erweiterung stehen zwei zusätzliche Modultypen zur Verfügung, die von den beiden Core-Navigationstypen abgeleitet wurden und diese um die neue Funktionalität erweitern. Sie heißen mmenu - Navigationsmenü sowie mmenu - Individuelle Navigation. Darüber hinaus kann mit mmenu - Artikel ein beliebiger Artikel in ein mmenu ausgegeben werden.
Das Navigationsmenü ist standardmäßig versteckt. Mit Hilfe eines beliebigen Links wird der eigentliche Seiteninhalt je nach eingestellter Menü-Position verschoben. Damit dies funktioniert muß jedem Navigationsmenü in den Experten-Einstellungen des Moduls eine CSS-ID zugewiesen werden! Mit einer URL ((...)href="#CSS-ID"(...)) auf diese wird das Menü bei Klick auf den Link eingeblendet.
Tipps/Hinweise
- Damit mmenu gestartet wird, muß im Seitenlayout jQuery zum Layout hinzugefügt werden.
- Der Seiteninhalt sollte einen nicht transparenten Hintergrund (Farbe/Bild) erhalten.
- Das Standard-Theme hat eine dunkle Ausgangsgestaltung. Bei den helleren Themes (mittelgrau, hellgrau und hell) wird eine zusätzliche CSS-Datei eingebunden, die eine hellere Ausgangsgestaltung beinhaltet. Je nachdem wie man sein Menü farblich gestalten möchte, sollte man dann ein helles oder dunkles Theme als Ausgang wählen.
- Wird ein Artikel eingebunden, so werden für diesen keine CSS-Stile gesetzt. Dies ist so gewollt.
Die Erweiterung habe ich installiert und ID vergeben!
Die jquery Datei wo finde ich die oder muss ich die noch herunter laden?
Mein Ziel ist es das die Navigation gleich funktioniert wie auf der Seite
http://www.contao-fuer-webdesigner.de/
wenn der Bildschrim kleiner wird!
Danke im Vorraus und Gruss
mypixel
Musst du gar nicht runterladen. Jquery ist bei Contao dabei und muss nur im Layout aktiviert werden.
Hallo Ihr Lieben,
mein mmenu wird angezeigt, aber es passiert nix wenn ich auf den Link klicke.
Kann mir jemand weiterhelfen.
Ich habe das Modul erstellt auch den eigenen HTML mit dem ID und dann beides ins Seitenlayout eingebunden. Jquery ist auch aktiviert.
Aber es macht nix!!!!
also wenn ich drauf klicke müssten doch automatisch die angelegten Seiten ausgeworfen werden, oder?!
Lg und danke vorab
Moni
Das Modul braucht auch die ID, sonst passiert nix.
Hallo und danke für die rasche Antwort.
Ich hab das mmenu modul eingerichtet und dort den ID vergeben. Weiters dann das eigene Html und dort wieder den ID eingesetzt und nun habe ich beides ins Seitenlayout eingebunden
Muß ich vielleicht beim Modul noch etwas einstellen.
braucht es die Referenzseite?
Danke!
Nur um sicher zu gehen: du meinst du hast so etwas geschrieben, oder?Zitat:
Zitat von moni
("mmenu" ist die ID deines mmenu Navigationsmoduls)PHP-Code:<a href="#mmenu">...</a>
Hast du einen Link zur Seite?
http://www.si-sta.at/winkler01/#mobile_menu
ja hab ich!
Das Modul und der Trigger scheinen im Layout nicht eingebunden zu sein. Zumindest finde ich nichts im Quelltext.
anbei der Bildschirmabdruck.
Bei deinem Link hab ich das nicht
Kann es sein, das dk_mmenu ein Problem mit der ONe Page Seite hat?!
ich hätte vorher nämlich die Quicknavigation verwendet doch auch diese hat nicht funktioniert.
Bei mir sieht das im Quelltext so aus.
HTML-Code:<div id="nav_mobile_trigger"><a href="#mainmenu_mobile"></a></div>
<nav id="mainmenu_mobile">
Er verwendet ein eigenes mobiles Layout. Dort wird dann auch zumindest das JavaScript von dk_mmenu eingebunden und der #mobile_menu link.Zitat:
Zitat von Kahmoon
@moni: jedoch fehlt bei dir die Ausgabe des mmenu Navigationsmoduls. Stelle sicher dass du:
- das mmenu Navigationsmodul im Seitenlayout eingebunden hast
- das mmenu Navigationsmodul richtig konfiguriert hast - zB. dass du entweder gar keine Referenzseite eingestellt hast, oder die richtige Referenzseite
Ja, den JS Code vom mmenue habe ich auch gesehen. Aber das Modul fehlt.
Vielen Dank einstweilen.
Ich muß schauen ob ich irgendwo eine genaue Anleitung finde.
Ich denke das Ding hat probleme mit der Onepage Website
Was ist eigentlich das Ziel? Soll das dk_mmenu die OPW Navigation darstellen? Das ist wahrscheinlich nicht von Haus aus möglich.Zitat:
Zitat von moni
Vermutlich wird deswegen nichts vom mmenu Navigationsmodul ausgegeben, weil du eben keine Referenzseite gesetzt hast und du wegen der OPW Seitenstruktur eigentlich gar keine nicht im Menü versteckten Seiten hast.
Ich habe ein Mobiles Seitenlayout erstellt und dort die Navi und den Navi Aufruf eingebunden.
Er kann auch bei der Quicknavigation nix auslesen.
Ich glaub ich wein gleich :eek:
Referenzseite hab ich jetzt ausgeklickt.
Ich bin auch offen für eine andere Navi. Also ich freu mich über Vorschläge.
Ich wills jetzt einfach nur zum Laufen bringen.
Du hast meine eigentliche Frage nicht beantwortet ;)
Zeig uns mal Screenshots deiner Seitenstruktur und deiner mmenu Modulkonfiguration.
Wenn du meine Frage mit "ja, ich will über mmenu die OPW Navigation darstellen" antwortest, dann reicht es evt. wenn du zusätzlich im Layout auch noch das OPW Modul einbindest und statt dessen diesem Modul die ID "mobile_menu" gibst. Dann solltest du aber sicherstellen, dass das eigentlich mmenu Navigationsmodul keine HTML Ausgabe macht.
Hey Moni,
mit OnePagern kommt das mmenu nicht so gut klar - es sei denn man nimmt dessen eingebaute Funktion dafür. Die muß man dann allerdings von hand im Template hinzufügen.
mmenu muß sich prinzipbedingt um das ganze HTML im Body legen, damit es dies komplett verschieben kann.
Hallo zusammen,
Nein, es muß absolut nicht one Page sein. Es kann eine ganz normale Navi sein.
Vielleicht wird das Menü irritiert weil ja in der Startseite das OnePage Modul liegt.
Wie gesagt, ich bin für alles offen.
anbei noch die Screenshots
Muss es schon, da du deine Website ja so aufgebaut hast.Zitat:
Zitat von moni
Ok, es ist so wie ich vermutet habe. Nun kannst du meinen Vorschlag aus Post #22 versuchen.Zitat:
Zitat von moni
Das mit dem Html bei MMenu kapier ich noch nicht ganz. Wie kann ich das beeinflussen?!
Vielen vielen Dank für die Hilfe.
Ich hab das jetzt gemacht. Es tut zwar etwas, aber noch nicht das was es soll.
http://www.si-sta.at/winkler01/
in der Mobile Variante
DAAAAANNNKKKEEE
Dein mmenu Navigationsmodul gibt deshalb nichts aus, weil alle Deine Seiten die Eigenschaft "Im Menü verstecken" aktiviert haben. Das hast du deshalb gemacht, weil du ja die typische One Page Website Struktur verwendest. Dein Ziel ist, dass das mmenu mit deiner One-Page-Website Navigation aufgebaut wird. Dazu musst du thereotisch einfach zusätzlich ein zweites OPW Navigationsmodul erzeugen und diesem die ID "mobile_menu" geben und zusätzlich zum mmenu Navigationsmodul in das Seitenlayout einfügen. Ob das tatsächlich so einfach funktionieren wird kann ich dir nicht sagen, ohne es selbst getestet zu haben.Zitat:
Zitat von moni
wau es funktioniert so halbwegs. jetzt muß ich es nur noch schaffen, dass es wenn man auf Navigation klickt, erst die Schaltflächen auftauchen und nicht statisch sofort da sind.
Mein Gott bin ich dir dankbar... Wirklich... vielen Dank.
Ich habs!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
100000000000ß00000 Dank!
O Gott bin ich erleichtert.
Vielen vielen Dank!
Es funktioniert tatsächlich.
Thanks a lot.
Freut mich dass es funktioniert ;). Diese OPW und mmenu Kombination könnte man mal als Anleitung irgendwo posten.
ja das mach ich!
Eine Frage noch. ich kann nie neue Beiträge anlegen. Immer nur antworten aber ich kann keine "eigenen" Themen anstoßen.
Hast du hier noch einen Tipp.
Danke Spooky. :)
Hallo Leute,
ich klinke mich mal hier ein, will das offcanvas mobile menu einbauen- doch es will nicht klappen.
Ich bin so vorgegangen;
1. Zunächst die Erweiterung installieren, danach ein Modul anlegen und darin die Optionen auswählen- welche Optionen sind das die ausgewählt werden müssen?
2. Dem Modul eine ID mit z.B. dem Namen „offcanvas“ geben.
3. Dann noch ein Modul vom Typ „eigener html-Code“ erzeugen und darin einen Link auf das Modul einfügen
<div class="offcanvas"><a href="#offcanvas">offcanvas</a></div>
4. Modul und Linktext-Modul an beliebiger Stelle in der Seitenvorage bei den einzufügenden Modulen hinzufügen.
Nun es will nicht funktionieren, ich hätte gerne einen anderen Namen als offcanvas- damit kann kein User was anfangen wie geht das?
Also momentanes Ergebnis ist; Text offcanvas wird unter meiner Navigation (ist unter dem header) angezeigt- ich habe also ein doppeltes Menü.
Das offcanvas soll nur erschienen wenn jemand meine webweite mit einem mobilen Endgerät aufruft, dabei darf dann nur offcanvas sichtbar sein, nicht noch die Hauptnavigation.
Ist zum schreien- wie kriege ich das nur hin?
Hat jemand einen Tipp?
gruß
mapa69
Ruhig bleiben!
Es sieht so aus, als wenn dir auch bei HTML noch ein paar Kenntnisse fehlen ;)...
<div class="offcanvas"><a href="#offcanvas">offcanvas</a></div>
CSS-Klasse zum stylen deines Links
Anker-name, der beim Klick angesprungen wird
Text, den der Anwender als Link sieht
Das äußere div kannst du mit Media-Queries stylen, also auch per display:none ausblenden.
Ich habe eine Website von c3.5 auf die aktuelle C4.8 gebracht.
Das einzigste was nun nicht mehr geht ist das Mobile Menu.
Über den Contao-Manager hab ich die Erweiterung mmenu - Mobile Navigation für Contao installiert. Das ist denke ja die richtige.
jQuery ist im Seitenlayout aktiviert. Leider find ich im Quellcode das Script nicht. An was könnte das liegen?
js_mmenu ist im Layout aktiviert?
jupp = Link
js_mmenu darf nicht im Seitenlayout aktiviert werden.
Ist wieder raus. mmenu find ich noch immer nicht im Quellcode
Echt? Hmm hab ich bei mir drin...aber das könnte noch von der alten Version übrig geblieben sein.Zitat:
Zitat von Spooky
Edit:
Stimmt, geht auch ohne :-P
Wenn du das im Seitenlayout aktivierst, bekommst du im Frontend mit Sicherheit einen JavaScript Fehler ;). Wenn eine der nächsten Versionen der Extension mal finanziert wird, werde ich den Namen dieses Templates ändern, war unglücklich gewählt.
Keine Ahnung wie, aber ich habs gefunden und es geht wieder
Ich stecke hier auch grad fest. Will nach Ewigkeiten mmenu wieder einsetzen und scheitere.
Link
Seitenlayout, jQuery ist aktiviert:
Anhang 24560
Activator-HTML-Element:
Modul mmenu - NavigationsmenüHTML-Code:<div class="mobilenavi-activator"><a href="#mobileMenu" class="hamburger"><i></i></a></div>
Anhang 24561
Ich sehe wohl den Wald vor lauter Bäumen nicht, habt ihr einen Hinweis?
Was mir direkt auffällt ist dass die Konsole meines Browsers JS Fehler für das mmenu.js anzeigt, warum kann ich leider nicht sagen, aber vielleicht schaust Du nochmal ob sich da etwas gegenseitig stört oder die Erweiterung korrekt installiert ist etc.
Du hast bei Wrapper Selector #wrapper eingestellt - aber in deinem fe_page Template scheint es diesen Wrapper nicht zu geben.Zitat:
Zitat von k-webdesign
Danke Spooky, ich vermute auch es liegt an dem wrapper. Das ist nämlich neu. Nur hab ich ja nix sonst. html oder body ändern auch nichts an der Situation.
Es liegt definitiv daran ;). Wenn sich in deinem HTML Code kein #wrapper Element befindet, kommt es dadurch zu dem JavaScript Fehler. Du musst diese Einstellung aus deinem mmenu Modul entfernen.Zitat:
Zitat von k-webdesign
Ich muss jetzt echt nur dafür extra im fe_page einen wrapper rein packen? Das kam doch jahrelang ohne solchen Quatsch aus >.<
Auch wenn ich es entferne, klappt das nicht. Mom, ich bau es live gleich noch mal so nach.
JS-Fehler ist weg, doch es geht weiterhin nicht :(
Ich hänge mich hier mal an. Vielleicht haben wir Probleme mit derselben Ursache.
Habe testweise eine Seite mit Modul "mmenu - Navigationsmenu" und eine mit Modul "mmenu - individuelle Navigation" gebaut.
Das Navigationsmenu funktioniert nicht, das nav-Element erscheint nicht im Quellcode (habe es mit und ohne Startpunkt und div. Seiten als Startpunkt ausprobiert). Die Console gibt diesen Javascript-Error aus:
Ich spreche kein Javascript, aber ich nehme an, das ist die Reaktion darauf, dass das Element mit der ID nicht da ist.Zitat:
Uncaught TypeError: Cannot read property 'id' of null
at e.backButton (mmenu.js:12)
at e._initAddons (mmenu.js:1)
at new e (mmenu.js:1)
at HTMLDocument.<anonymous> (mobiles-menü-2021:60)
Die individuelle Navigation hingegen funktioniert wie erwartet.
In die Seite mit den mmenu - Navigationsmenü habe ich das fehlende Nav-Element mal statisch eingefügt mit der entsprechenden ID. Der Link blendet es ein und aus. Es scheint also so zu sein, dass das Modul am Bau des Nav-Elements scheitert.
Hast du das Modul im Seitenlayout eingebunden?
Hallo k-webdesign
So habe ich das dk-mmenu eingebunden:
fe_page.html5 Template
Ein Frontend-Modul einfügen vom Typ: NavigationsmenüHTML-Code:<!DOCTYPE html>
<html lang="<?= $this->language ?>"<?php if ($this->isRTL): ?> dir="rtl"<?php endif; ?>>
<head>
<?php $this->block('head'); ?>
<meta charset="<?= $this->charset ?>">
<title><?= $this->title ?></title>
<base href="<?= $this->base ?>">
<?php $this->block('meta'); ?>
<meta name="robots" content="<?= $this->robots ?>">
<meta name="description" content="<?= $this->description ?>">
<meta name="generator" content="Contao Open Source CMS">
<?php $this->endblock(); ?>
HIER KOMMT ALLENFALS DIE ANBINDUNG VON FONTAWESOME HIN
<script src="HIER KOMMT DER LINK ZU FONTAWESOME HIN" crossorigin="anonymous"></script>
<?= $this->viewport ?>
<?= $this->framework ?>
<?= $this->stylesheets ?>
<?= $this->mooScripts ?>
<?= $this->head ?>
<?php $this->endblock(); ?>
</head>
<body id="top"<?php if ($this->class): ?> class="<?= $this->class ?>"<?php endif; ?><?php if ($this->onload): ?> onload="<?= $this->onload ?>"<?php endif; ?> itemscope itemtype="http://schema.org/WebPage">
<?php $this->block('body'); ?>
<?php $this->sections('top'); ?>
<div id="wrapper">
<?php $this->block('header'); ?>
<?php if ($this->header): ?>
<header id="header">
<div class="inside">
<?= $this->header ?>
</div>
</header>
<?php endif; ?>
<?php $this->endblock(); ?>
<?php $this->sections('before'); ?>
<?php $this->block('container'); ?>
<div id="container">
<?php $this->block('main'); ?>
<main id="main">
<div class="inside">
<?= $this->main ?>
</div>
<?php $this->sections('main'); ?>
</main>
<?php $this->endblock(); ?>
<?php $this->block('left'); ?>
<?php if ($this->left): ?>
<aside id="left">
<div class="inside">
<?= $this->left ?>
</div>
</aside>
<?php endif; ?>
<?php $this->endblock(); ?>
<?php $this->block('right'); ?>
<?php if ($this->right): ?>
<aside id="right">
<div class="inside">
<?= $this->right ?>
</div>
</aside>
<?php endif; ?>
<?php $this->endblock(); ?>
</div>
<?php $this->endblock(); ?>
<?php $this->sections('after'); ?>
<?php $this->block('footer'); ?>
<?php if ($this->footer): ?>
<footer id="footer">
<div class="inside">
<?= $this->footer ?>
</div>
</footer>
<?php endif; ?>
<?php $this->endblock(); ?>
</div>
<?php $this->sections('bottom'); ?>
<?php $this->endblock(); ?>
<?= $this->mootools ?>
</body>
</html>
|__ bei Experteneinstellungen bei der CSS-ID folgendes einfügen: menu (hier natürlich das was Du drinn haben möchtest, das war glaube ich mobileMenu)
Ein Frontend-Modul einfügen vom Typ: Eigener HTML-Code
|__WICHTIG: im fe_page.html5 muss Fontawesome eingebunden sein (das kann aber auch durch eine Erweiterung geschehen. Ich habe das bei mir so gelöst: Einen Account auf Fontawesome angelegt und den Code dann im fe_page.html5 eingebundenHTML-Code:<div class="offcanvas"><a href="#offcanvas"><i class="fas fa-bars fa-3x"></i></a></div>
Ein Frontend-Modul einfügen vom Typ: mmenu - Navigationsmenü
|
Anhang 24589
|
Anhang 24590
|
Anhang 24591
|
Anhang 24592
Die erstellten Frontend-Module im Seitenlayout in der Kopzeile einbinden und danach noch im CSS folgendes einfügen
|
Ich hoffe das ich das gut rübergebracht habeHTML-Code:.offcanvas {
display: none;
}
@media screen and (max-width: 1180px) {
.offcanvas {
display: block;
float: right;
margin-top: -85px;
margin-right: 20px;
}
.fas.fa-bars.fa-3x {
color: black;
font-size: 30px;
}
#HIER DIE ID EINFÜGEN VON DEINER NORMALEN NAVIGATION {
display: none;
}
Ja.Zitat:
Hast du das Modul im Seitenlayout eingebunden?
Meine beiden Testseiten unterscheiden sich quasi nur dadurch, dass bei der einen das Nav-Element fehlt.
Javascripte sind identisch.
Werden unterschiedliche Templates dafür genutzt?
Vielleicht sollte ich in die Richtung mal weitergucken...
Habe das Modul nochmal entfernt und neu installiert, danach ging es dann. Vermutlich war was mit dem mod-mmenu.html schief gelaufen.
Jedenfalls geht es jetzt :)
(hat sich erledigt)
Möchte oben den Begriff "Menü", der standardmäßig dort erscheint, wenn das mmenu geöffnet wird, updatesicher ändern.
Komme nicht drauf, wie ich das anstellen kann. :o
versuch mal das . Anlegen in deinem Template Ordner der mmenu_default.html5
Ruhig mal mit der Original Datei vergleichen dann siehst Du die paar Unterschiede
PHP-Code:// deintemplateordner/mmenu_default.html5
<?php
$GLOBALS['TL_CSS']['contao_dk_mmenu'] = 'bundles/contaommenu/mmenu/mmenu.css|static';
if ($this->options['polyfill']) {
$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']) {
$GLOBALS['TL_JAVASCRIPT']['contao_dk_mmenu.hammerjs'] = 'bundles/contaommenu/hammerjs/hammer.min.js|static';
}
$options = $this->options;
$options['navbar']['title'] = 'mein Text';
?>
<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>
Vielen Dank Bennie. Das war's. Perfekt. :cool: