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

[toto]

naja geht...fast. ich hatte den wrapper auf -20px gesetzt damit der untere Rand nicht zum scrollen wird. aber vielleicht krieg ich das trotzdem gelöst.

[Andreas]

min-height: calc(100vh - 20px);

[Dublay]

https://github.com/dklemmt/contao_dk_mmenu/pull/18
https://github.com/dklemmt/contao_dk_mmenu/pull/15

Ich bin leider kein Entwickler und kann da wenig mit anfangen. Heisst das, die Erweiterung funktioniert inzwischen unter Contao 4.x?

[planepix]

In der composer.json steht bis ~4.3.

Ich habe die Erweiterung bei 3 Updates von 3.5 auf 4.4 manuell am laufen.

Bin aber aufgrund der Flexibilität, was eigene Inhalte in der mobilen Navigation angeht, bei neuen 4er-Projekten mit [mobile_menu] von Kamil zugange.

Mein letzter Stand ist zu mmenu, dass es nur noch bei persönlichen Website kostenfrei eingesetzt werden kann und als Kauf-Plugin für WP erhältlich ist.
-> http://mmenu.frebsite.nl/download.html

[Dublay]

Ok - danke für die Info. Installiert bekomme ich es unter 4.X leider momentan nicht über den Manager.

Dann schau ich mir das mobile_menu mal näher an, wenn Du das empfehlen kannst.

[planepix]

Manuell läuft das auch unter einer 4.4.
Sonst schau mal hier: https://codefog.pl/extension/mobile-menu.html

[Andreas]

Ich konnte codefog/contao-mobile_menu 2.6.0 über den Contao-Manager problemlos installieren und kann dieses Menü auch empfehlen.

Soviel ich weiß hat dklemmt den Core (http://mmenu.frebsite.nl/) von dk_mmenu auch nie aktualisiert. Auch auf die Issues hat er schon lange nicht mehr geantwortet. Evtl. auch wegen der Lizenzen.

[bird]

Auch auf die Issues hat er schon lange nicht mehr geantwortet. Evtl. auch wegen der Lizenzen.

Das Thema würde mich auch interessieren - ist der Einsatz bei allen Projekten durch eine Entwicklerlizenz des Autors abgedeckt?
Bei der aktuell verfügbaren Version kommt wohl noch die MIT Lizenz zum Einsatz.

Ein Problem ist mir aufgefallen - befinden sich im Header oder im Footer Elemente, welche „fixed" positioniert sind (bspw. Menü oder Cookie-Hinweis), werden diese ausgeblendet bzw. verschoben, sobald das Menü auf gleicher Ebene oder dahinter eingeblendet wird. Vermutlich besteht hierbei ein Konflikt mit einem der Wrapper. Kannst jemand dieses Verhalten bestätigen?
Die Lösung sollte es hier geben: http://mmenu.frebsite.nl/documentati...-elements.html

[Silko]

Hallo zusammen,

ich verwende das dk_menu in Verbindung mit dem kostenlosem Theme von Rocksolid "Opensauce"

Ich weiß selber wie schwer der Anfang mit Contao ist und möchte daher hier meine Schritte erklären wie man ein schöne mobile Navigation baut in Verbindung mit "dk_menu" und dem Theme "Opensauce".

Schritt 1:

nach der Installation vom dk_menu und der Erstellung des Modules vergeben wir eine beliebige ID in den Einstellungen. In meinem Fall "dkmenu"

schritt 1.PNG

Schritt 2:

Ein weiteres Modul erstellen.

Ich habe es "Mobile Navigation MMENU Button" genannt und es ist eigener HTML Code

Dort tragen wir folgenden Code ein

<div id="main-navigation-mobile" class="main-navigation-mobile tl_chosen chzn-done">
	<a href="#dkmenu"><i class="fas fa-bars fa-2x"></i></a>
</div>

Schritt 3:

Wir deaktivieren das von Rocksolid "Opensauce" unhübsche Dropdown Menü was bei mobiler Ansicht angezeigt wird.

schritt 2.PNG

Schritt 4:

Wir fügen die von uns erstellen Module dem Theme hinzu.

schritt 3.PNG

Schritt 5:

wir müssen noch Fontawesome hinzufügen und aktivieren

ich habe es folgendermaßen gemacht:

Den Font laden.

Hier aus der Datei brauchen wir:

fontawesome-free-5.0.6.zip\fontawesome-free-5.0.6\web-fonts-with-css\css\fontawesome-all.min.css

und den Ordner: webfonts

fontawesome-free-5.0.6.zip\fontawesome-free-5.0.6\web-fonts-with-css\webfonts

Das habe ich hochgeladen in:

schritt 4.PNG

Entweder über den Dateimanager oder FTP über deinem Server

Dann binden wir es noch ein in Theme und schon dürfte alles funktionieren

schritt 5.PNG

Ich hoffe das ich nun keine Fehler hier eingebaut habe und das ich hiermit vielleicht einigen einen kleinen Startschuss geben konnte.

Viele Grüße

[folkfreund]

Hallo Silko,

vielen Dank und willkommen im Forum

[bird]

Funktioniert das weiter vorne bzw. hier https://stackoverflow.com/questions/...96390#30996390 (Dank an Spooky) beschriebene Binding von Funktionen auch mit der letzten verfügbaren Version der Erweiterung unter Contao 4.5.x?

[svefo]

Hallo,

ich hoffe ich verstehe das richtig, dass ich meine Frage hier einfach mal dranhängen kann.
Ich hab meine Seite gerade auf Contao 4.4.20 hochgezogen und das dk_mmenu in Version 2.0.1 hinzugefügt.
Insgesamt gefällt mir das Menü auch schon sehr gut, aber die Navigation zu den Submenüs gefällt mir noch nicht.

Meine Spieleseite findet ihr hier: http://www.mobil.gritzner-chor.de/home.html
Wenn ihr jetzt in der Handyansicht auf "Grötz-Singerle" drückt und das Menü wieder öffnet hat man leider keinerlei Möglichkeit in das dazugehörige Submenü zu kommen ohne vorher eine andere Seite zu öffnen.
Ich fände es schön, wenn ich wenn ich auf Grötz-Singerle klicke einfach sofort ins Submenü weitergeleitet werde, da ich die Oberseite eigentlich gar nicht benötige. Also im Prinzip möchte ich den Link der hinter dem Button mit dem Pfeil steckt auf den gesamten Reiter ausweiten.
Ist so etwas möglich und wenn ja wo muss ich da was anpassen?
Falls es nicht möglich ist, was hab ich sonst für Möglichkeiten das ich zu jeder Zeit auf das Submenü zugreifen kann.

Ich hoffe ihr versteht was ich meine, ansonten könnt ihr gerne nochmal nachhaken.

[svefo]

Hat sich erledigt.
Hab das Navigationstemplate von "nav_default" auf "nav_mmenu" geändert. So gefällt mir das schon besser.
Hätte ich auch schon früher mal ausprobieren können.

[Infidel]

Hallo,

mein mobiles dk_menu funktioniert seit dem Update auf 4.4 nicht mehr. Einige andere Menüs habe ich wieder hinbekommen, aber bei diesem fehlt mir die zündende Idee. Kann jemand diese beisteuern?



Danke, Fidel

[Spooky]

Welche Version hast du installiert?

[Infidel]

Die war im Theme. Woran kann ich die Version erkennen?

[Infidel]

@copyright Dirk Klemmt 2013-2015

[Spooky]

Die war im Theme. Woran kann ich die Version erkennen?

Da kann ich dir nicht helfen. Die Extension installiert man normalerweise über composer. Die neueste Version ist 2.1.0. Du müsstest dich evt. an den Theme Hersteller wenden.

[bird]

http://stackoverflow.com/a/30996390/374996

Hat sich in der aktuellen Version der Erweiterung bzw. unter Contao 4.x die Syntax geändert?

$('#mmenu').on('closing.mm', function() {
    console.log("Ausgabe closing");
});
$('#mmenu').on('closed.mm', function() {
    console.log("Ausgabe closed");
}); 

Die o.g. Funktionen sprechen anscheinend nicht mehr an und dementsprechend lässt sich bspw. auch die Klasse eines Burger-Menüs nicht mehr setzen.

[Spooky]

Ja, die mmenu Version wurde aktualisiert. Ob sich da auch etwas an den Eventnamen geändert hat kann ich dir nicht sagen.

[bird]

Durch den Hash im Link

<a href="#meinmenu">Menü</a> 

springt der Browser auf mobilen Endgeräten zunächst zum oberen Ende der Seite, bevor das Menü geöffnet wird. Sollte man das Menü nur per JS-Event (ohne Link) öffnen oder hat jemand zufällig eine andere Lösung gefunden, um dieses Verhalten zu unterdrücken?

[Spooky]

Poste einen Link zur Seite.

[Spooky]

Ab Version 2.0 verwendet diese Extension die neueste Version von mmenu, die für kommerzielle Zwecke lizenzpflichtig ist.

Die Contao Academy hat hierfür am 22.12.2018 eine „Multiple websites license“ erworben und zur Verfügung gestellt, wodurch die Erweiterung auch zukünftig für kommerzielle Projekte ohne eigene Lizenz verwendet werden darf. Weitere Lizenz-Details siehe: https://mmenu.frebsite.nl/download.html

[kischd]

Die Contao Academy hat hierfür am 22.12.2018 einen „Multiple websites license“ erworben und zur Verfügung gestellt, wodurch die Erweiterung auch zukünftig für kommerzielle Projekte ohne eigene Lizenz verwendet werden darf.

Bedeutet das wäre für alle frei verfügbar?
wie kommt man an den Lizenzcode?

[krebbelmund]

Bedeutet das wäre für alle frei verfügbar?
wie kommt man an den Lizenzcode?

Verstehe ich auch nicht. Ich hab' ja eigentlich nix mit der Contao Community zu tun. Und nur weil ich mmenu in Contao nutze ist es dann umsonst für mich und meinen Kunden?

Denke ich werde einfach mal die 10$ auf https://mmenujs.com/download.html abdrücken. Finde 10$ ist ein guter Preis für die Zeitersparnis selbst was zu entwickeln..

K.

[WebRoxx]

Hey,

ich glaub das war schon mal irgendwo Bestandteil des Threads. Wie bekomme ich es denn hin das, das Menü auch bei der Klasse "trail" aufgekalppt ist also den activen Punt anzeigt?

[Spooky]

Durch die finanzielle Unterstützung der Agentur dreibein wurde nun die Version 3.0.0 der Extension veröffentlicht.

[Bennie]

@spooky
Du hattest mal hier https://community.contao.org/de/show...l=1#post376712
beschrieben wie man mehrere Menüs zusammenbringt, das habe ich bisher auch immer so gemacht.
Jetzt gibt es ja den Modultyp mmenu-HTML, mit dem müsste das doch auch ohne diesen workaround gehen oder? Das klappt bei mir nicht so "einfach" mit inserttags .
Ich habe mir z.B. ein Navigationsmodul angelegt und per inserttag eingebunden, allerdings fehlt dann die CSS Gestaltung des Menüs wie beim Modul "mmenu-Navigationsmenü".
Was ist der beste/richtige Weg mehrere Menüs in einem mobilen Menü unterzubringen inkl. des Aussehens?

[Kahmoon]

Wie kann ich das denn updaten? Einfach statt ^2.1 ^3.1 eintragen?

Ich habe derzeit Version 2.1.1 (17.9.2018, 18:19:25)

[Spooky]

@spooky
Du hattest mal hier https://community.contao.org/de/show...l=1#post376712
beschrieben wie man mehrere Menüs zusammenbringt, das habe ich bisher auch immer so gemacht.
Jetzt gibt es ja den Modultyp mmenu-HTML, mit dem müsste das doch auch ohne diesen workaround gehen oder? Das klappt bei mir nicht so "einfach" mit inserttags .
Ich habe mir z.B. ein Navigationsmodul angelegt und per inserttag eingebunden, allerdings fehlt dann die CSS Gestaltung des Menüs wie beim Modul "mmenu-Navigationsmenü".
Was ist der beste/richtige Weg mehrere Menüs in einem mobilen Menü unterzubringen inkl. des Aussehens?

Die Hauptproblematik ist, dass du eine gewisse HTML Struktur brauchst. Wenn du das mmenu - HTML Modul nimmst, dann muss der im HTML Bereich ausgegebene HTML Code

<ul>
  …
</ul>

lauten (und nicht zwei separate <ul> bspw.). Das mmenu - HTML Modul erspart dir für dieses Vorhaben eine Template Anpassung, denke ich.

- - - Aktualisiert - - -

Wie kann ich das denn updaten? Einfach statt ^2.1 ^3.1 eintragen?

Ich habe derzeit Version 2.1.1 (17.9.2018, 18:19:25)

Nein, ^3.0, es gibt keine Version 3.1.x

[Bennie]

Das mmenu - HTML Modul erspart dir für dieses Vorhaben eine Template Anpassung, denke ich.

Na ja, ich hab jetzt auch wieder drei templates angepasst bzw angelegt , im Grunde fast genau so wie bisher und zwar:
Eines das ich mod_customnav_mmenu.html5 genannt habe mit diesem Inhalt:

<!-- indexer::stop -->
  <?= $this->items ?> 
<!-- indexer::continue -->

dann ein mod_navigation_mmenu.html5 mit demselben Inhalt wie oben

und ein nav_mmenu_custom.html5 mit diesem Inhalt :

 <?php if( $this->level != 'level_1' ): ?>
<ul class="<?= $this->level ?>">
<?php endif; ?>
  <?php foreach ($this->items as $item): ?>
    <?php if ($item['isActive']): ?>
      <li class="<?= $item['class'] ?>"><span class="<?= $item['class'] ?>"<?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="name"><?= $item['link'] ?></span><?= $item['subitems'] ?></li>
    <?php else: ?>
      <li<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?>><a href="<?= $item['href'] ?: './' ?>" title="<?= $item['pageTitle'] ?: $item['title'] ?>"<?php if ($item['class']) echo ' class="' . $item['class'] . '"'; ?><?php if ($item['accesskey']) echo ' accesskey="' . $item['accesskey'] . '"'; ?><?php if ($item['tabindex']) echo ' tabindex="' . $item['tabindex'] . '"'; ?><?php if ($item['nofollow']) echo ' rel="nofollow"'; ?><?= $item['target'] ?><?php if (!empty($item['subitems'])) echo ' aria-haspopup="true"'; ?> itemprop="url"><span itemprop="name"><?= $item['link'] ?></span></a><?= $item['subitems'] ?></li>
    <?php endif; ?>
  <?php endforeach; ?> 
<?php if( $this->level != 'level_1' ): ?>
</ul>
<?php endif; ?>

Dann ein Navigationsmenü und eine Individuelle Navigation angelegt und dort jeweils das o.g Navigationstemplate (also nav_mmenu_custom) und ein Individuelles Template (mod_customnav_mmenu oder mod_navigation_mmenu - je nach Menü) ausgewählt.
Diese beiden Menüs dann per inserttag in das "mmenu - HTML" und zwar so wie Du schon sagtest, zwischen <ul> </ul>.

Das Ergebnis ist wie gewünscht, aber geht es vielleicht einfacher oder ist das der Weg ??

[Spooky]

Da würde ich aber dann kein mmenu - Customnav verwenden, sondern die normale Customnav - andernfalls werden für zwei mmenus die entsprechenden JavaScripts erzeugt.

[Bennie]

Hab ich auch nicht gemacht.
Eine normale customnav der ich entsprechende templates zuweise.
Ich geb zu, es ist vielleicht etwas verwirrend, da ich auch die Bezeichnung mmenu für meine Nav Templates verwendet habe, bzw. diese Bez. dort vorkommt

[Spooky]

Ah, verstehe

[Acta]

Durch die finanzielle Unterstützung der Agentur dreibein wurde nun die Version 3.0.0 der Extension veröffentlicht.

Ich muss mal blöd fragen: Ich hatte bisher immer Version 2.1 vom dk-menü im Einsatz die hat auch immer schön funktioniert. Jetzt wollte ich aber auf die aktuellste Version updaten und dort bekomm ich leider Probleme im IE 11.

Im Firefox:

<nav class="mod_mmenu mm-menu mm-menu_offcanvas mm-menu_position-right mm-menu_theme-black mm-menu_fx-menu-slide mm-menu_fx-panels-none mm-menu_fx-listitems-drop mm-menu_opened" id="test">

  
  


<div class="mm-panels"><div id="mm-0" class="mm-panel mm-panel_opened"><div class="mm-navbar"><a class="mm-navbar__title">Menü</a></div><ul class="level_1 mm-listview">
            <li class="protected sibling first mm-listitem"><a href="./" title="Startseite (S)" class="protected sibling first mm-listitem__text" accesskey="s" itemprop="url"><span itemprop="name">Startseite</span></a></li>
                <li class="protected mm-listitem mm-listitem_selected"><span class="active protected mm-listitem__text" itemprop="name">Rechtliches</span></li>
                <li class="protected sibling mm-listitem"><a href="haushalt.html" title="Dokumente und Informationen rund um den Haushalt (h)" class="protected sibling mm-listitem__text" accesskey="h" itemprop="url"><span itemprop="name">Haushalt</span></a></li>
                <li class="protected sibling mm-listitem"><a href="infos.html" title="Informationen aus den Bereichen (i)" class="protected sibling mm-listitem__text" accesskey="i" itemprop="url"><span itemprop="name">Infos aus den Bereichen</span></a></li>
                <li class="protected sibling mm-listitem"><a href="service.44.html" title="Service (v)" class="protected sibling mm-listitem__text" accesskey="v" itemprop="url"><span itemprop="name">Service</span></a></li>
                <li class="protected sibling mm-listitem"><a href="informationen.html" title="Fraktionen (k)" class="protected sibling mm-listitem__text" accesskey="k" itemprop="url"><span itemprop="name">Fraktionen</span></a></li>
                <li class="protected sibling last mm-listitem"><a href="elearning-portal.html" title="eLearning-Portal (l)" class="protected sibling last mm-listitem__text" accesskey="l" itemprop="url"><span itemprop="name">eLearning</span></a></li>
      </ul></div></div></nav>

im IE sagt er:

<nav class="mod_mmenu" id="test">

  
  
<ul class="level_1">
            <li class="protected sibling first"><a title="Startseite (S)" class="protected sibling first" accesskey="s" href="./" itemprop="url"><span itemprop="name">Startseite</span></a></li>
                <li class="protected sibling"><a title="Dienstvereinbarungen, Satzungen und weitere Rechtsquellen (r)" class="protected sibling" accesskey="r" href="rechtliches.html" itemprop="url"><span itemprop="name">Rechtliches</span></a></li>
                <li class="protected sibling"><a title="Dokumente und Informationen rund um den Haushalt (h)" class="protected sibling" accesskey="h" href="haushalt.html" itemprop="url"><span itemprop="name">Haushalt</span></a></li>
                <li class="active protected"><span class="active protected" itemprop="name">Infos aus den Bereichen</span></li>
                <li class="protected sibling"><a title="Service (v)" class="protected sibling" accesskey="v" href="service.44.html" itemprop="url"><span itemprop="name">Service</span></a></li>
                <li class="protected sibling"><a title="Fraktionen (k)" class="protected sibling" accesskey="k" href="informationen.html" itemprop="url"><span itemprop="name">Fraktionen</span></a></li>
                <li class="protected sibling last"><a title="eLearning-Portal (l)" class="protected sibling last" accesskey="l" href="elearning-portal.html" itemprop="url"><span itemprop="name">eLearning</span></a></li>
      </ul>

</nav>

[Spooky]

Poste mal einen Link zur Seite.

[spacefront]

Schau mal ob es die Version 3.0 oder 3.0.1 ist - mit der 3.0 hatte ich auch probleme

[Acta]

3.0.1 -> Leider ist die Seite nur lokal erreichbar.

Ich habe den internen Cache gelöscht... auch browser-Cache aber der ie 11 will nicht.

[Spooky]

IE 11 wird ohne Polyfills nicht unterstützt: https://mmenujs.com/documentation/

Supported browsers

As of version 8, the mmenu.js plugin only supports ECMAScript 6 compliant browsers. For Internet Explorer 10 and 11, you'll need some JavaScript polyfills and a CSS variables polyfill.

[Acta]

IE 11 wird ohne Polyfills nicht unterstützt: https://mmenujs.com/documentation/

Danke für die Info... aber ich habe keine Peilung was das sein soll :-) Geschweige den was genau getan werden sollte.