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

[Dirch]

Um einen Support-Thread verlinken zu können hier eine "offizielle" Erwähnung dieser Erweiterung.

mmenu ist ein jQuery-Plugin, das ein platzsparendes Navigationsmenü erstellt, das vor allem für mobile Webseiten sinnvoll ist jedoch auch für große Layouts verwendet werden kann.

Nach der Installation stehen zwei weitere 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.

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.

Möglichkeiten der Erweiterung und von mmenu

• beliebig viele Menüs auf einer Seite
• Menüs können beliebig viele Navigations-Elemente sowie Untermenüs enthalten
• Anzeige eines Zählers über die Anzahl der enthaltenen Untermenüs zu einem Navigations-Elemente
• Menü-Position: links, rechts, oben, unten
• Animation bei Wechsel in Untermenüs/aufklappende Untermenüs
• wahlweise Anzeige eines eingabesensitiven Suchfelds über die Navigations-Elemente
• verschiedene Themes

Quelle/Beispiele
http://mmenu.frebsite.nl/

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.
• Technisch bedingt wird für alle Navigationsmenüs auf der gleichen Seite das gleiche Theme benutzt.
• 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.

Viel Spaß mit der Erweiterung!


ER: https://contao.org/de/extension-list/view/dk_mmenu.html
Github: https://github.com/dklemmt/contao_dk_mmenu

[Franko]

Hallo,
in der neuesten Version ( mit jQuery mmenu 3.3.1 ) werden bei mir die ausgewählten/selektierten Navigationselemente nicht mehr farblich hervorgehoben
(obwohl ... configuration: { selectedClass: "active" ... ja gesetzt wird.

Wenn ich das Menü mit Untermenüs einsetze ( Default Wert: slidingSubmenus: false ) werden diese ja z.B. von rechts reingescrollt.
Klicke ich jetzt ein Untermenü an und rufe danach wieder die Navigation auf - lande ich hier immer auf der "Übersichtsseite" der Navigation - also auf der 1. Ebene.

Bei der Original Demo des Scripts ( horizontal-submenus.html ) ist das Verhalten anders - Wenn man hier ein Untermenü aufruft und dann wieder die Navigation einblendet
bleibt die Navigation im jeweiligen Untermenü und dieses wird auch als selektiert farblich hervorgehoben.

Zum Test habe ich keine weiteren eigenen CSS Styles angelegt - lediglich die Contao reset.css und den Layout-Builder.


Für Anregung dankbar
Frank

[Alok]

Auch ich habe leider Probleme mit der Erweiterung.
Mit der vorletzen Version 1.2.1, musste ich immer mehrmals auf den Link tippen, bis sich die Navigation geöffnet hat.
Auch hat sich das Menü nicht "sanft" geöffnet, also das es zur Seite "gleitet", sondern es ruckelte mehr zur Seite.
Nach dem Update auf die neuste Version, geht leider gar nix mehr: ich lande immer auf der Startseite. Habe auch schon das Menu entfernt und wieder neu eingerichtet. Leider ohne Erfolg.

Bin dankbar für jeden Tipp.

alok

[Kahmoon]

Hmm also ich nutze hier die neuste Version und bei mir wird korrekt navigiert!?

Anbei meine Einstellungen
Contao 3.1.3

vg

[Dirch]

Hallo zusammen,

könnt ihr mir URLs zu den Seiten geben wo ihr Probleme habt? Das ist ein recht seltsames Verhalten, daß ich bei meinen Tests nicht hatte und nicht alle haben. Technisch gesehen hat sich an der Erweiterung nichts wirklich geändert - mal von den neuen Feldern abgesehen, d.h. sie sollte/müßte sich bei gleichen Einstellungen genauso verhalten wie vorher. Das Script allerdings kann sich schon stark geändert haben und was sich definitiv geändert hat sind Teile des CSS-Frameworks zu mmenu. Dies kommt allerdings in genauso dieser Form von Fred.

Wichtig wäre es daher, wenn ihr mir eine URL gaben könntet und sagt welche Einstellungen ihr benutzt. Dann kann ich schauen, ob sich in neueren Script-Versionen noch etwas geändert hatte was ich nicht bedacht habe.

Viele Grüße...
...Dirk

[Alok]

Hallo Dirch
danke für die schnelle Reaktion. Hier der Link und die Einstellungen
*Link entfernt*
Unten auf der Seite findet sich auch ein Button zum Umschalten auf die mobile Version.
einstellungen.jpg
Danke im Voraus

[Franko]

Hmm also ich nutze hier die neuste Version und bei mir wird korrekt navigiert!?

Anbei meine Einstellungen
Contao 3.1.3

vg

Genau das meinte ich - Die aktiven/selektierten Links werden auch hier NICHT farblich hervorgehoben!
Und nach Auswahl eines Untermenüs landet man wieder auf der der Navigation der 1. Ebene.

Ich glaube nicht das es an der Erweiterung an sich liegt - auch in den Demos der mmenu Version 3.3.1 klappt es ja.

???
Frank

[Kahmoon]

Moin Moin,

der aktive Menüpunkt wurde bei mir nicht hervorgehoben weil ich es schlicht nicht gestyled habe (vergessen :-) ). Jetzt geht das.

Und jetzt weiss ich was du meinst...wenn ich auf eine Unterseite von Portfolio klicke und anschließend das Menü erneut öffne, bin ich wieder auf der root Ebene und nicht in dem Unterpunkt Portfolio!

VG

[Franko]

Moin Moin,

der aktive Menüpunkt wurde bei mir nicht hervorgehoben weil ich es schlicht nicht gestyled habe (vergessen :-) ). Jetzt geht das.

VG

Hi,
normalerweise beinhaltet das mmenu "dunkle theme" aber doch bereits entsprechende styles - kommen aber halt nicht zur Darstellung ...

Und jetzt weiss ich was du meinst...wenn ich auf eine Unterseite von Portfolio klicke und anschließend das Menü erneut öffne, bin ich wieder auf der root Ebene und nicht in dem Unterpunkt Portfolio!

Genau - und das sollte auch bei der vertikalen Version der Unterseiten klappen - zumindest in den Original Script Demos ....

Frank

[Dirch]

Hallo zusammen,

das klingt irgendwie alles sehr strange. Leider komme ich vor dem WE nicht mehr dazu mich damit auseinander zu setzen. Fred hat heute Version 3.3.2 veröffentlicht. Ansonsten scheint er gerade an einem größeren Update zu arbeiten, das in 1-2 Wochen kommt.

Wer große Probleme mit der aktuellen Version hat sollte dann am besten nochmals auf die Version davor zurückgehen, bis ich/wir genau rausgefunden haben wo der Hase im Pfeffer liegt.

Viele Grüße...
...Dirk

[Franko]

Hallo zusammen,
Wer große Probleme mit der aktuellen Version hat sollte dann am besten nochmals auf die Version davor zurückgehen, bis ich/wir genau rausgefunden haben wo der Hase im Pfeffer liegt.

Viele Grüße...
...Dirk

Hallo, ich hatte gestern die Version 3.3.2 manuell eingebunden - gleiches Ergebnis wie mit der 3.3.1 ?
Nutze vorerst wieder die 3.0.4 ...

Hoffe Du findest etwas - ich check es nicht - würde ungern auf die neuen Funktionen verzichten müssen ...

Danke
Frank

[JaHo]

Hallo Dirk,
gibt es schon eine Möglichkeit in der Erweiterung updatesicher(!) ein eigenes Theme zu definieren/abzulegen? (In diesem Fall war ich einfach zu doof und bitte natürlich die Frage zu entschuldigen )

Wenn nicht, wäre das eine sehr große Bitte - ich habe nämlich gerade durch ein unbedachtes Update eine ganze Menge Arbeit zerstört und würde das gerne in Zukunft vermeiden...
Ich bin ja sicher nicht der einzige, der das Styling des Menüs anpassen möchte!?

Gruß,
Jan

[Dirch]

Hallo Dirk,
gibt es schon eine Möglichkeit in der Erweiterung updatesicher(!) ein eigenes Theme zu definieren/abzulegen? (In diesem Fall war ich einfach zu doof und bitte natürlich die Frage zu entschuldigen )

Wenn nicht, wäre das eine sehr große Bitte - ich habe nämlich gerade durch ein unbedachtes Update eine ganze Menge Arbeit zerstört und würde das gerne in Zukunft vermeiden...
Ich bin ja sicher nicht der einzige, der das Styling des Menüs anpassen möchte!?

Gruß,
Jan

Hey Jan,

du kannst natürlich den internen CSS-Editor oder einfach ein externes File dazu verwenden. Das "dunkle"-Theme ist das Default-Theme, das von mmenu "automatisch" gesetzt wird/gesetzt sein muß. Das "helle" bindet ein weiteres CSS von ihm ein, das eben helle Grundfarben setzt. Alles was du gestaltest machst du mit überschreiben seiner CSS-Stile - entweder ausgehend vom dunklen oder hellen. Und das kannst du machen wo immer du magst.

Viele Grüße...
...Dirk

PS: es ist niemals gut, wenn man die mitgelieferten Files einer Erweiterung ändert.

[Kahmoon]

Leg dir im Backend einfach ein eigenes CSS für mmenu an. Das ist dann quasi dein Theme das du im Layout einbindest. Kann man halt dann im Modul nicht auswählen..aber brauchts ja eigentlich nicht.

[JaHo]

Hey Jan,

du kannst natürlich den internen CSS-Editor oder einfach ein externes File dazu verwenden. Das "dunkle"-Theme ist das Default-Theme, das von mmenu "automatisch" gesetzt wird/gesetzt sein muß. Das "helle" bindet ein weiteres CSS von ihm ein, das eben helle Grundfarben setzt. Alles was du gestaltest machst du mit überschreiben seiner CSS-Stile - entweder ausgehend vom dunklen oder hellen. Und das kannst du machen wo immer du magst.

Viele Grüße...
...Dirk

PS: es ist niemals gut, wenn man die mitgelieferten Files einer Erweiterung ändert.

Hey Leute,
erst einmal Danke für die schnellen Reaktionen!

Aber ich habe mich - wie ich anhand eurer Antworten merke - leider nicht genau genug ausgedrückt...

Grundsätzlich ist mir klar, dass ich die CSS-Definitionen auch überschreiben kann. (Ich hatte dummerweise beim Rumspielen in den mitgelieferten Files angefangen die Definitionen zu ändern, kommt nicht wieder vor )

Meine Frage zielte mehr darauf hin ab ob es (für die Zukunft) vorgesehen ist, die Möglichkeit einer eigenen Einbindung zu schaffen.
Ich persönlich finde es einfach nicht so schönen Stil, CSS erst zu definieren und dann nochmal zu überschreiben.
Zweitens würde ich gerne auch den zusätzlichen HTTP-Request und den Download sparen. Ich weiss, es sind nur 16KB, aber Kleinvieh macht auch Mist - gerade bei den Requests! (Und da ich mit SASS arbeite und nicht den internen CSS-Editor nutze ist es für mich wirklich ein zusätzlicher Request )

Mir würde rein Theoretisch also auch schon eine Möglichkeit reichen, das Laden des mitgelieferten Stylesheets in der Erweiterung zu Deaktivieren!?

Gruß,
Jan

[Dirch]

Hallo Jan,

ich versteh dich und kann das nachvollziehen. In diesem Fall ist es allerdings so, daß Fred in seinem CSS keine Trennung zwischen Layout und Gestaltung hat. Damit mmenu überhaupt funktioniert muß ich daher sein CSS einbinden und eine abweichende Gestaltung geht dann nur durch Überschreiben der Stile.

Ich bin mir noch nicht sicher, ob das zusätzliche Einbinden von einer CSS-Datei nicht mehr verwirrt. Denn 2 der Themes (Dunkel oder hell) muß man so oder so wählen. Wenn ich da eine gute Idee finde ändere ich es evtl.

Viele Grüße...
...Dirk

[Dirch]

Hallo hallo,

ich hab neue Infos, weswegen mmenu bei manchen ganz normal und bei anderen völlig fehlerhaft funktioniert. In der aktuellen Version des Scripts scheint etwas enthalten zu sein weswegen die Erweiterung (im Gegensatz zu früher) NICHT mit gleichzeitig aktiviertem MooTools kompatibel ist!

Neben dem sowieso Sinnfreien gleichzeitigen verwenden beider Bibliotheken, ist dies also zur Zeit NICHT möglich. Wenn ihr nicht darum kommt, dann verwendet bitte Version 1.2.1 der Erweiterung.

Beste Grüße...
...Dirk

[Kahmoon]

Also ich verwende kein mootools und habe das gleiche "Problem". Bei der Tiefe meiner Menüstruktur allerdings halb so wild

VG

[Dirch]

Also ich verwende kein mootools und habe das gleiche "Problem". Bei der Tiefe meiner Menüstruktur allerdings halb so wild

VG

Wenn du MooTools aktivierst würdest du sehen, was ich gemeint habe... ;D Denn das in Kombination mit dem Script macht dessen ganze Funktionalität kaputt.

Wegen der anderen Sachen muß ich noch schauen, aber da bräuchte ich auch etwas Hilfe beim Debuggen, denn ich kann nicht immer alles nachvollziehen/nachstellen und ich bin zeitlich gerade etwas eingeschränkt.

[planepix]

Ich spiele gerne mit beim digitalen Kammerjäger

[Kahmoon]

Mir ist gerade noch ein "Bug" aufgefallen...den ich aber nicht ganz deuten kann. Sobald das Formularfeld "Bildauswahl" vom efg in einer Seite eingebunden ist, klappt die Navi nicht mehr von der Seite rein. Wenn ich das Element im Formular deaktiviere geht alles. Leider kann ich es nicht weiter eingrenzen.

Kann dir gerne einen FE Zugang geben um das mal zu zeigen.

VG
Frank

[Dirch]

Mir ist gerade noch ein "Bug" aufgefallen...den ich aber nicht ganz deuten kann. Sobald das Formularfeld "Bildauswahl" vom efg in einer Seite eingebunden ist, klappt die Navi nicht mehr von der Seite rein. Wenn ich das Element im Formular deaktiviere geht alles. Leider kann ich es nicht weiter eingrenzen.

Kann dir gerne einen FE Zugang geben um das mal zu zeigen.

VG
Frank

Hallo hallo,

dann liegt das wohl eher am efg, denn meine Erweiterung macht keinerlei zaubereien, aber ich laß mich gern eines anderen belehren, nur habe ich rein gar keine Zeit zur Zeit das zu debuggen...

Viele Grüße...
...Dirk

[Kahmoon]

Servus,

schade, hätte ja sein können das du direkt siehst woran es liegt. Wenn das Menü aufklappt schiebt es halt diverse Divs bzw. die ganze Seite nach rechts. Bin mir nicht sicher ob der efg hier gegensteuert oder vielleicht CSS schuld ist? z-index? Denn Z-Position des Menüs "vorne" löst das Problem zumindest halb.

Der Entwickler vom efg ist leider schon seit längerem "schwer" erreichbar ;-)



vg

[Franko]

Hallo,
mir ist jetzt auch noch etwas aufgefallen.

Bei einer Umsetzung soll zukünftig eine weitere Sprache hinzukommen.
Ich habe daher in den Contao Einstellungen die Option "Die Sprache zur URL hinzufügen" ( also: www.xyz.de/de/test.html usw.) aktiviert.

Das Aufrufen der mmenu Links/Navigation reagiert in allen Browsern einwandfrei - Nur nicht im IE ( getestet mit v9 und v10 )?
Wenn ich im IE das mmenu aufrufe und hier einen Link anklicke -
lande ich auf einer "falschen Seite" da der IE versucht folgendes aufzurufen: www.xyz.de/de/de/test.html

Der Sprachzusatz wird einfach verdoppelt? Hat jemand hierzu eine Idee.

( Auch ich habe nur jQuery aktiviert )

Danke
Frank

[Dirch]

@Frank: mmenu legt sich um den gesamten Inhalt und schiebt den dann hin und her. Es kann schon sein, daß das mit anderen Dingen kollidieren kann.

@Franko: von diesem abstrusen IE-Verhalten habe ich schon gehört, aber da ich keinen PC mit entsprechendem Windows habe nicht genauer anschauen können. Dürfte aber nichts mit der Erweiterung, sondern eher mit dem Script zu tun haben.

Seit nicht ganz 1 Woche ist Version 4 draußen. Da hat Fred am ganzen Script-Core wohl extrem viel geändert/modularisiert. Ich weiß noch nicht wann ich die Zeit finde das Upgrade einzubauen, da es dies mal mit Script+CSS reinlegen und 2 Zeilen Code anpassen wohl nicht getan ist. Evtl. würden sich damit dann diverse Problemchen erledigen. Kann aber nicht abschätzen, wenn ich Zeit dafür finde...

[dtptiger]

Hallo,

ich muss ein togglemenu (wie in contao.org) in Contao 2.11 erzeugen.

Könnte ich das dk_mmenu auch für Contao 2.11 irgendwie verwenden?

Gruss dtptiger

[Dirch]

Hallo,

ich muss ein togglemenu (wie in contao.org) in Contao 2.11 erzeugen.

Könnte ich das dk_mmenu auch für Contao 2.11 irgendwie verwenden?

Gruss dtptiger

Hallo hallo,

die Erweiterung kannst du nicht für Contao 2.x benutzen, aber das mmenu-Script kannst du manuell einbauen und es würde dann auch dort laufen.

Viele Grüße...
...Dirk

[dtptiger]

Hallo Dirk,

, aber das mmenu-Script kannst du manuell einbauen und es würde dann auch dort laufen.

Ich habe mir jetzt aus dem reposit.. das "dk_mmenu" geladen.


Aber … wo finde ich das mmenu-Script?

Gruss dtptiecher

[Dirch]

Hallo Dirk,



Ich habe mir jetzt aus dem reposit.. das "dk_mmenu" geladen.


Aber … wo finde ich das mmenu-Script?

Gruss dtptiecher

in .../assets/js/

Aber das Script allein wird dir nicht viel helfen, da du es auch entsprechend konfigurieren und starten mußt. Schau am besten mal auf seiner HP: http://mmenu.frebsite.nl/

Da steht alles und in dem dortigen Komplett-Paket sind auch Beispiele enthalten.

[Leolux]

Guten Morgen,

ich bastele gerade an einer OnePage-Seite und steuere die einzelnen Abschnitte mithilfe von Artikel-IDs an. Lässt sich das Menü auch für diesen Fall einsetzen? Es wird vermutlich etwas im Template ersetzt werden müssen?

Viele Grüße
Leolux

[Kahmoon]

Mir ist gerade noch etwas aufgefallen. Die Menüpunkte eines Submenüs lassen sich bei mir auf dem iPhone nicht "anklicken"

http://www.frankdaniels.de Portfolio Unterpunkte

Hat noch jemand das Problem?

Vg

[Dirch]

@Leolux: eigentlich ja, aber ich weiß nicht, ob und wie das mit dieser Version machbar ist. Zumindest müßtest du das manuell machen. Ich weiß allerdings nicht, wo man die von mir eingebaute Version noch laden kann. Aktuell ist eine 4.1, die das auch kann, aber die komplett anders ist, als der von mir noch verwendete 3er-Strang.

@Kahmoon: ja die Submenüs sind in der Version irgendwie total am Arsch. Ich weiß nicht, was Fred da an Inkompatibilität eingebaut hatte, denn ein paar Versionen davor hatte das zusammen mit Contao noch wunderbar funktioniert.

Ich komm nur wegen der anderen Erweiterungen und Contao 3.2 und anderweitigem Zeitmangel aktuell nicht dazu, die Erweiterung auf 4.1 hochzuziehen...

[Kahmoon]

Klingt nach einer größeren Anpassung die da gemacht werden müsste?

[Dirch]

Klingt nach einer größeren Anpassung die da gemacht werden müsste?

Jau - Fred hat das ganze Script komplett neu gemacht. Das CSS komplett umgeworfen und modularisiert. Die meisten Einstellungen sind wohl gleich geblieben, aber ich muß "unter der Haube" einiges an neuer Logik implementieren.

Schätzungsweise 2 volle Tage Arbeit bis alles wieder paßt.

[Leolux]

Danke für die Info! Und viel Erfolg bei den Anpassungen.

Gruß
Leolux

[Kahmoon]

Funktioniert bei Euch eigentlich die Suche? Ich hatte die jetzt immer aktiv aber als ich sie getestet habe kam "Kein Ergebnis".

Man kann auch keine Zielseite für die Suche angeben. Muss ich das im Template machen?

vg

[Luminanz]

Die in mmenu integrierte Suche durchsucht meines Wissens 'nur' die Navigation.

[Dirch]

Die in mmenu integrierte Suche durchsucht meines Wissens 'nur' die Navigation.

genau so ist es. Im Fall der Contao-Erweiterung ist es nur die Navigation. Aber man kann mmenu für alle möglichen ul-Strukturen verwenden. Genau genommen durchsucht mmenu die ul/li-Tags, die in seinem Container liegen.

[Kahmoon]

Ahh ok das erklärt kein Suchergebnis

Danke

[ISNC]

Ich steh gerade aufm Schlauch und verstehe diese Anweisung nicht:

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.

Also ich gehe zu Layout-> Themes ->Module -> mmenu
und kopiere folgenden Code bei den Experteneinstellungen unter
<a href="#CSS-ID">(...)</a>

Ok es ist zu spät....
ersten Fehler erkannt.
ich vergebe einfach dem Modul eine CSS-ID.

Dann brauche ich ein zusätzliches Modul mit:
<a href="#CSS-ID">(...)</a>
oder wie... ok ich schau mir das morgen nochmal an... mein Hirn schläft schon. Aber über Hilfe wäre ich sehr dankbar.