[dk_mmenu] navbars einfügen

Hallo Leute,

ich kenne mich mit JS und PHP überhaupt nicht aus, außerdem bin ich erst Contao-Einsteiger und habe sonst keiine Erfahrung, wie man Addons von Modulen einfügt. ICh habe es mal so versucht, wie ich es für richtig hielt - ohne Erfolg. Daher wollte ich wissen, ob meine Vorgehensweise beim Einfügen der Navbars korrekt ist:
1. Modul "Eigener HTML CODE" anlegen
2. Aus der Doku auf mmenu.frebsite.nl den code auf http://mmenu.frebsite.nl/documentati...s/navbars.html einfügen
2.1. Die Dateipade richtig einfügen
2.2. Die Optionen richtig eintragen
3. Das Modul in das Layout einbinden
4. Seite/Frontend neu Laden
5. Fertig

Meine Fragen:
1. Ist diese Vorgehensweise richtig?
2. Wo finde ich folgende Dateien? Ich habe Sie nicht in der ZIP-Datei, die man sich bei GitHub besorgen kann, nicht gefunden, auch nicht im gesamten Contao-Ordner(jquery.js):
- jquery.mmenu.navbars.min.js
- jquery.js
3. Wie trage ich den eignen HTML-Code richtig ein bei der Option content?

Vielen Dank,
Funky!

Du hast in deinem Thread Titel "[dk_mmenu]" geschrieben, verwendest diese Extension jedoch nicht.

Warum versuchst du es nicht einfach mit der Extension? Andernfalls wirst du dir sehr schwer tun, ohne jegliche Webentwicklungs-Kenntnisse.

DOch ich verwende dk_mmenu.

Wie kann ich im Backend denn die Navbars beim modul mmenu-Navigation einfügen?

Zitat:

Zitat von funky

DOch ich verwende dk_mmenu.

Deiner Beschreibung nach nicht. Im Forum gibt es Anleitungen, wie du die Erweiterung benützt, aber ich versuche es mal kurz aus dem ff. zu beschreiben:
Alles was du zuvor getan hast rückgängig machen oder generell von Neuem anfangen.
Ein Modul vom Typ "mmenu - Navigationsmenü" anlegen.
In den Einstellungen des Moduls unter Experten-Einstellungen - CSS-ID/Klasse eine CSS-ID vergeben, z.B. "mmenu".
Ein Modul vom Typ "HTML" anlegen, mit dem Inhalt

PHP-Code:

<a href="#mmenu">Mobiles Menü</a>

(der href muss der CSS-ID des "mmenu - Navigationsmenü" entsprechen, plus "#" davor).
Beide Module in deinem Seitenlayout einbinden.

Spooky, ich habe das so gemacht, ich habe mein mmenu so angelegt. Es geht mir mit diesem thread nicht darum, ein mmenu überhaupt anzulegen, sondern das mmenu zu erweitern. Im Standard mmenu fehlen ein paar Dinge, die man nachträglich hinzufügen kann. Was ich nachträglich hinzufügen möchte sind sogenannte navbars, womit ich momentan nicht weiterkomme.

ICh würde gerne wissen, ob man zusätzliche JS-Codeschnippsel im Backend so einfügt, wie ich es oben beschrieben habe.

jQuery brauchst du nicht manuell einzubinden, dass kannst du von Contao im Layout laden lassen.

Andere JS-Skripte kannst du

im Layout einbinden im HEAD
im Layout einbinden vor dem schließenden BODY
über ein Template im Layout - schau dir die j_xxx und moo_xxx Templates an

Zitat:

Zitat von Andreas

Andere JS-Skripte kannst du

…
im Layout einbinden vor dem schließenden BODY
…

Das geht leider von Haus aus nicht.

Probier mal mit dem Feld Eigener JavaScript-Code. Das ging eigentlich immer und bei mir in 3.5.8 jetzt auch.

im Layout einbinden im HEAD - Feld: Zusätzliche <head>-Tags
im Layout einbinden vor dem schließenden BODY - Feld: Eigener JavaScript-Code
über ein Template im Layout - schau dir die j_xxx und moo_xxx Templates an

Ah stimmt, sorry. Daran hatte ich nicht mehr gedacht.

Andreas, ich habe alle drei von dir beschriebenen Wege versucht. Hat nicht geklappt.
Ich habe wie von der Doku verlangt folgenden Code eingefügt:

HTML-Code:

<script src="assets/jquery/core/1.11.3/jquery.js" type="text/javascript"></script> <script src="system/modules/dk_mmenu/assets/js/jquery.mmenu.min.js" type="text/javascript"></script> <script src="system/modules/dk_mmenu/navbars/jquery.mmenu.navbars.min.js" type="text/javascript"></script> <link href="system/modules/dk_mmenu/assets/css/jquery.mmenu.css" type="text/css" rel="stylesheet" /> <link href="system/modules/dk_mmenu/navbars/jquery.mmenu.navbars.css" type="text/css" rel="stylesheet" />

und

HTML-Code:

<script type="text/javascript"> $(document).ready(function() { $("#mob_nav").mmenu({ navbars: [{content " hier mein eigentlicher Content als html code " // first navbar options }, { // second navbar options }] }); }); </script>

Ich habe bei meinen letzten versuchen den oberen Code weggelassen, um zu sehen, ob sich was ändert. Davor habe ich alle drei WEge ausprobiert mit dem oberen Code.
Im js_mmenu.html5 template habe ich den code unter den letzten schließenden Tag eingefügt. Im Feld "Zusätzliche <head>-Tags" habe ich den Code in einem <head>-Tag eingeschlossen.

mob_nav ist die für das Modul notwendige id .

Der Link zur Doku: http://mmenu.frebsite.nl/documentati...s/navbars.html

Stimmt immer noch etwas nicht?

Aber trotzdem Danke für die Hinweise.

Viele Grüße,
funky.

Das solltest du so nicht machen - denn so bindest du jQuery und mmenu doppelt ein. Du solltest folgendermaßen vorgehen:
Lade dir jquery.mmenu.navbars.min.js und jquery.mmenu.navbars.css in einen eigenen Ordner, nicht in den Ordner system/modules/dk_mmenu/….
Gehe zu Layout - Templates im Backend.
Erzeuge dir dort ein eigenes mod_mmenu Template.
Editiere dieses Template und füge ganz oben folgenes ein:

PHP-Code:

<?php $GLOBALS['TL_CSS'][] = '…/jquery.mmenu.navbars.css'; $GLOBALS['TL_JAVASCRIPT'][] = '…/jquery.mmenu.navbars.min.js'; ?>

(ersetze "…" natürlich mit dem richtigen Pfad)
Erzeuge dir ein eigenes js_mmenu Template.
Editiere das Template und füge die navbars Option in die Initialisierung ein.

Alternativ kannst du auch einfach auf die dk_mmenu Extension verzichten und alle Ressourcen manuell einbinden + die Initialisierung selbst schreiben.

Zitat:

Zitat von funky

Andreas, ich habe alle drei von dir beschriebenen Wege versucht. Hat nicht geklappt.

Ich hatte dir nur beschrieben, wie du JS ins FE bringst, wenn das nicht geht, machst du irgendetwas falsch. Ich hatte auch gesagt, dass du jQuery nicht nochmal einbinden musst.

Wie du CSS ins FE bringst wirst du ja wahrscheinlich selber wissen. Übrigens ist es üblich zuerst das CSS und dann das JS zu laden.

Wenn die Resourcen im FE geladen werden und es nicht funktioniert, müsstest du einen Link zur Seite zeigen.

Das js_mmenu.html5 Template:

PHP-Code:

<script> (function($) { var $mmenu = $('#<?php echo $this->cssIDonly; ?>'); $(document).ready(function() { $mmenu.mmenu({ navbars=true; <?php $oComma = $iComma = false; // o(uter)/i(nner) comma after option needed? if ($this->isMenu) { echo ($oComma == true ? ', ' : '') . $this->isMenu; $oComma = true; } if ($this->classes) { echo ($oComma == true ? ', ' : '') . 'classes: "' . $this->classes . '"'; $oComma = true; } if ($this->slidingSubmenus) { echo ($oComma == true ? ', ' : '') . $this->slidingSubmenus; $oComma = true; } // subobject 'counters' options if ($this->countersAdd) { if ($this->countersUpdate) { echo ($oComma == true ? ', ' : '') . 'counters: { '; echo $this->countersAdd; echo ', ' . $this->countersUpdate; echo ' }'; // end of subobject 'counters' options } else { echo ($oComma == true ? ', ' : '') . 'counters: true'; } $oComma = true; } // subobject 'offCanvas' options if ($this->offCanvas) { if ($this->offCanvasModal || $this->offCanvasMoveBackground || $this->offCanvasPosition || $this->offCanvasZposition) { echo ($oComma == true ? ', ' : '') . 'offCanvas: { '; if ($this->offCanvasModal) { echo ($iComma == true ? ', ' : '') . $this->offCanvasModal; $iComma = true; } if ($this->offCanvasMoveBackground) { echo ($iComma == true ? ', ' : '') . $this->offCanvasMoveBackground; $iComma = true; } if ($this->offCanvasPosition) { echo ($iComma == true ? ', ' : '') . $this->offCanvasPosition; $iComma = true; } if ($this->offCanvasZposition) { echo ($iComma == true ? ', ' : '') . $this->offCanvasZposition; $iComma = true; } echo ' }'; // end of subobject 'offCanvas' options $iComma = false; // reset inside subobject comma flag $oComma = true; } } else { echo ($oComma == true ? ', ' : '') . 'offCanvas: false'; $oComma = true; } // subobject 'searchfield' options if ($this->searchfieldAdd) { echo ($oComma == true ? ', ' : '') . 'searchfield: { '; echo $this->searchfieldAdd; if ($this->searchfieldSearch) { echo ', ' . $this->searchfieldSearch; } if ($this->searchfieldPlaceholder) { echo ', ' . $this->searchfieldPlaceholder; } if ($this->searchfieldNoResults) { echo ', ' . $this->searchfieldNoResults; } if ($this->searchfieldShowLinksOnly) { echo ', ' . $this->searchfieldShowLinksOnly; } echo ' }'; // end of subobject 'searchfield' options $oComma = true; } // subobject 'dragOpen' options if ($this->dragOpenOpen) { echo ($oComma == true ? ', ' : '') . 'dragOpen: { '; echo $this->dragOpenOpen; if ($this->dragOpenThreshold) { echo ', ' . $this->dragOpenThreshold; } if ($this->dragOpenMaxStartPos) { echo ', ' . $this->dragOpenMaxStartPos; } echo ' }'; // end of subobject 'dragOpen' options $oComma = true; } // subobject 'onClick' options if ($this->onClickClose || $this->onClickBlockUI) { echo ($oComma == true ? ', ' : '') . 'onClick: { '; if ($this->onClickClose) { echo ($iComma == true ? ', ' : '') . $this->onClickClose; $iComma = true; } if ($this->onClickBlockUI) { echo ($iComma == true ? ', ' : '') . $this->onClickBlockUI; $iComma = true; } echo ' }'; // end of subobject 'onClick' options $iComma = false; // reset inside subobject comma flag $oComma = true; } ?> }, { classNames: { selected: "active" } }).removeClass('invisible'); }); })(jQuery); </script>

Das mod_mmenu.html5-Template

PHP-Code:

<?php $GLOBALS['TL_CSS'][] = 'navbars/jquery.mmenu.navbars.css'; $GLOBALS['TL_JAVASCRIPT'][] = 'navbars/jquery.mmenu.navbars.min.js'; ?> <?php if ($this->type == 'mmenu_article'): ?> <div class="<?php echo $this->class; ?> invisible block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <div> <?php if ($this->headline): ?> <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> <?php endif; ?> <?php echo implode('', $this->elements); ?> </div> </div> <?php else: ?>  <nav class="<?php echo $this->class; ?> invisible block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>> <a class="close" href="#" style="display:block; width:66.016px; height:50px; color:white; position: relative; z-index: 50;">X</a> <?php if ($this->headline): ?> <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>> <?php endif; ?> <a href="<?php echo $this->request; ?>#<?php echo $this->skipId; ?>" class="invisible"><?php echo $this->skipNavigation; ?></a> <?php echo $this->items; ?> <a id="<?php echo $this->skipId; ?>" class="invisible"> </a> </nav>  <?php endif; ?>

Spooky, so richtig? Ich habe im Contao-Ordner einen Ordner mit den nötigen css- und js-Dateien angelegt und beim mod_mmenu.html5-Template die Verweise berichtigt. Mein mmenu funktioniert jetzt gar nicht mehr bzw. bei klick auf das Menü-Icon wird nicht das Menü geöffnet, sondern auf die Startseite weitergeleitet.

Zitat:

Zitat von funky

Spooky, so richtig?

Nein, ich glaube da hast du dir nun invaliden JavaScript Code erzeugt und solltest daher auch dementsprechend eine Meldung in der JavaScript Konsole bekommen.

Zitat:

Zitat von funky

Spooky, so richtig? Ich habe im Contao-Ordner einen Ordner mit den nötigen css- und js-Dateien angelegt und beim mod_mmenu.html5-Template die Verweise berichtigt.

Ich würde die Dateien eher irgendwo in den Ordner /files geben, nicht in den root.

Zitat:

Zitat von funky

Mein mmenu funktioniert jetzt gar nicht mehr bzw. bei klick auf das Menü-Icon wird nicht das Menü geöffnet, sondern auf die Startseite weitergeleitet.

Ja, weil du nun einen JavaScript Fehler produziert hast ;).

wie sieht der code richtig aus? was soll ich wohin genau kopieren?

PHP-Code:

<script> (function($) { var $mmenu = $('#<?php echo $this->cssIDonly; ?>'); $(document).ready(function() { $mmenu.mmenu({ navbars: [{ // first navbar options }, { // second navbar options }] <?php $oComma = $iComma = true; // o(uter)/i(nner) comma after option needed? if ($this->isMenu) { echo ($oComma == true ? ', ' : '') . $this->isMenu; $oComma = true; } if ($this->classes) { echo ($oComma == true ? ', ' : '') . 'classes: "' . $this->classes . '"'; $oComma = true; } if ($this->slidingSubmenus) { echo ($oComma == true ? ', ' : '') . $this->slidingSubmenus; $oComma = true; } // subobject 'counters' options if ($this->countersAdd) { if ($this->countersUpdate) { echo ($oComma == true ? ', ' : '') . 'counters: { '; echo $this->countersAdd; echo ', ' . $this->countersUpdate; echo ' }'; // end of subobject 'counters' options } else { echo ($oComma == true ? ', ' : '') . 'counters: true'; } $oComma = true; } // subobject 'offCanvas' options if ($this->offCanvas) { if ($this->offCanvasModal || $this->offCanvasMoveBackground || $this->offCanvasPosition || $this->offCanvasZposition) { echo ($oComma == true ? ', ' : '') . 'offCanvas: { '; if ($this->offCanvasModal) { echo ($iComma == true ? ', ' : '') . $this->offCanvasModal; $iComma = true; } if ($this->offCanvasMoveBackground) { echo ($iComma == true ? ', ' : '') . $this->offCanvasMoveBackground; $iComma = true; } if ($this->offCanvasPosition) { echo ($iComma == true ? ', ' : '') . $this->offCanvasPosition; $iComma = true; } if ($this->offCanvasZposition) { echo ($iComma == true ? ', ' : '') . $this->offCanvasZposition; $iComma = true; } echo ' }'; // end of subobject 'offCanvas' options $iComma = false; // reset inside subobject comma flag $oComma = true; } } else { echo ($oComma == true ? ', ' : '') . 'offCanvas: false'; $oComma = true; } // subobject 'searchfield' options if ($this->searchfieldAdd) { echo ($oComma == true ? ', ' : '') . 'searchfield: { '; echo $this->searchfieldAdd; if ($this->searchfieldSearch) { echo ', ' . $this->searchfieldSearch; } if ($this->searchfieldPlaceholder) { echo ', ' . $this->searchfieldPlaceholder; } if ($this->searchfieldNoResults) { echo ', ' . $this->searchfieldNoResults; } if ($this->searchfieldShowLinksOnly) { echo ', ' . $this->searchfieldShowLinksOnly; } echo ' }'; // end of subobject 'searchfield' options $oComma = true; } // subobject 'dragOpen' options if ($this->dragOpenOpen) { echo ($oComma == true ? ', ' : '') . 'dragOpen: { '; echo $this->dragOpenOpen; if ($this->dragOpenThreshold) { echo ', ' . $this->dragOpenThreshold; } if ($this->dragOpenMaxStartPos) { echo ', ' . $this->dragOpenMaxStartPos; } echo ' }'; // end of subobject 'dragOpen' options $oComma = true; } // subobject 'onClick' options if ($this->onClickClose || $this->onClickBlockUI) { echo ($oComma == true ? ', ' : '') . 'onClick: { '; if ($this->onClickClose) { echo ($iComma == true ? ', ' : '') . $this->onClickClose; $iComma = true; } if ($this->onClickBlockUI) { echo ($iComma == true ? ', ' : '') . $this->onClickBlockUI; $iComma = true; } echo ' }'; // end of subobject 'onClick' options $iComma = false; // reset inside subobject comma flag $oComma = true; } ?> }, { classNames: { selected: "active" } }).removeClass('invisible'); }); })(jQuery); </script>

Spooky, es tut sich immer noch nichts. Muss ich auf 3.5.8. updaten, damit es funktioniert?

Poste mal einen Link zur Seite.

hab es auf einem lokalen server am laufen. hab keinen "link für euch"

aaaalso um dem Ganzen die richtige Richtung zu geben: vielen Dank zunächst an euch, die ihr versucht Funky zu helfen. Aber es wird leider auf keinen Fall auf diesem Weg funktionieren! :(

Problem: dk_mmenu nutzt noch immer die Version 4.7 von mmenu. Dort gibt es keine Unterstützung für "navbars", welche aus einer Zusammenführung verschiedener anderer Optionen entstanden.

Lösung: mit der alten Doku arbeiten (weiß gar nicht, ob es die noch gibt) oder mmenu komplett unabhängig der Erweiterung einzubinden. Wenn man sich orientiert wie ich das im js_template gemacht habe, dann geht das mit ein wenig jQuery Kenntnissen ganz gut.

Ich habe leider zu wenig Zeit um die Erweiterung auf die komplett neue API umzustellen. Die alte Version funktioniert nach wie vor aber in ihrem Rahmen sehr gut. Hinweis noch: die Lizenz hat sich geändert (ab 5.6)und für kommerziellen Einsatz muss man sich wohl eine käuflich erwerben

Viele Grüße...

Zitat:

Zitat von Dirch

Die alte Version funktioniert nach wie vor aber in ihrem Rahmen sehr gut. Hinweis noch: die Lizenz hat sich geändert (ab 5.6)und für kommerziellen Einsatz muss man sich wohl eine käuflich erwerben

Leider funktioniert die aktuelle Version von dk_mmenu nicht wirklich. Ich hatte dir mal dieses Ticket hier erstellt https://github.com/dklemmt/contao_dk_mmenu/issues/11

Ist das mit der Lizenz der Grund, warum du nicht die Resourcen der 5.6 reinbringst?

Zitat:

Zitat von Andreas

Leider funktioniert die aktuelle Version von dk_mmenu nicht wirklich. Ich hatte dir mal dieses Ticket hier erstellt https://github.com/dklemmt/contao_dk_mmenu/issues/11

Ist das mit der Lizenz der Grund, warum du nicht die Resourcen der 5.6 reinbringst?

Doch die aktuelle Version der Erweiterung mit dem mitgelieferten mmenu funktioniert tadellos - wenn etwas optisch nicht mehr so gut ausschaut, dann liegt das eigentlich weniger an der Contao Version und am menu selbst, sondern eher an nem Bug in einer neueren Browser-Version oder an einem Zusammenspiel von allem. Fred liebt es allerdings seine APIs teilweise komplett umzuwerfen und das ist der Grund warum ich noch nicht auf den 5er Strang aufgesprungen bin. Ich müßte da einige Tage Aufwand reinstecken, denn es hat sich ziemlich viel geändert - Addon-System, andere Aufrufe usw. Die Zeit konnte/wollte ich mir bisher nicht nehmen.

Die Lizenz ist ein anderes Thema. Das stört mich weniger. Mit einem Hinweis versehen, obliegt es in der Verantwortung desjenigen, der sie dann einsetzt. Ich schreibe es nur, um es ins Bewußtsein zu bringen.

Vielen Dank für die Infos. Wenn ich Zeit finde werde ich deine Lösung, Dirch, ausprobieren. Es ist wichtiger, dass die Seite bald online ist. Da macht es erstmal nichts, dass keine navbars vorhanden sind.