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

[tsunami]

Bei euch gehts nun auch?
Ich finde es etwas wuchtig...
Spricht da was gegen die Zeilenhöhe, die Schriftgröße etc. im css zu verändern, oder ist das nicht möglich?
Gruß

[folkfreund]

Natürlich geht das. Es ist nur etwas 'fummelig', die richtigen Selektoren zu finden. Am Besten machst du das auf dem Desktop mit Firefox "Entwicklerwerkzeuge | Bildschirmgrößen testen". Da stellst du ein kleines Display ein, so dass das mmenu aufrufbar ist. Dann kannst du mit dem Inspektor (auch Entwicklerwerkzeuge) die Selektoren raussuchen.

[Tinker2]

Hallöchen alle
Ich habe eine etwas grundsätzliche Frage zu diesem Menu:

Ist es möglich, dieses Menü so zu benutzen, dass es:
a) für Desktop ein "ganz normales" horizontales Menu ist das dann
b) für mobile Seiten zum Hamburger wird und sich reinschiebt?

Und wenn ja, was wäre ein Ansatz dafür?
Ich kapiere ca. die Hälfte (was meist ausreicht...), beiße mir aber an diesem Punkt die Zähne aus und tue mir schwer das auszuprobieren (mangels Ansatz).

Vielen Dank schonmal!

[folkfreund]

Da machst du dir lieber zusätzlich ein 'normales' Contao-Menü.
Per CSS kannst du dann abhängig von der Fenstergröße das eine oder das andere Menü anzeigen bzw. verstecken.

[fritti]

Hi Leute,

ich benutze die Erweiterung dk_mmenu in der Version 1.5.1.

Gerne möchte ich eine schicke Icon-Morphing-Animation für mein Offcanvas einsetzten:
http://codepen.io/designcouch/pen/Atyop

Diese ist bereits eingebaut und wird bei einer Auflösung kleiner als 1200 px angezeigt.

Nun benötige ich aber eine Abfrage, die das Öffnen und Schließen des offcanvas-menu anspricht. Denn bei Klick wandelt sich das Icon zwar von einem "Menü-Icon" in ein "X" um und das Menü öffnet sich auch gleichzeitig, aber beim Schließen des Menüs wandelt sich das Icon nicht mehr zurück. Es bleibt als "X" stehen.

Leider ist es hier via Jquery mit einer einfachen toggleClass bei click nicht getan. Wenn das Menü geöffnet wird, funktioniert der toggle nicht mehr.

Ich habe nun schon ein paar Stunden versucht selbst eine Abfrage zu basteln. Ich vermute, dass man hier eine bestimmte Methode aus dem Plugin ansprechen muss, die mir aber völlig unbekannt ist.

Die Abfrage müsste wie folgt (gerne auch anders) lauten:
1. Bei Klick auf das Hamburger-Icon wird dieses in ein Schließen-Icon via CSS gemorphed (funktioniert bereits).
2. Gleichzeitig öffnet sich dabei das Offcanvas
3. Wird das Menü geschlossen, durch Klick auf das Schließen-Icon oder auf den Bereich außerhalb des Menüs, wird das Icon wieder in ein Hamburger-Icon gemorphed.

Ich hoffe Ihr könnt mir helfen. Habe auch schon diverse (einfache) Abfragen mit Jquery gebastelt. z.B. Bei Hinzufügen der Klasse mm-opened im nav-Tag soll das Icon wieder umgewandelt werden. Funktioniert aber nicht. Daher glaube ich, dass man sich an eine Methode oder Funktion im Plugin anhängen muss.

Hier der Link zu meiner Seite:
heimat-bassenheim.de

u: chris
p: kuenstec#HGB
Ab einem Vieport von 1200 px zu sehen.

[Spooky]

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

[fritti]

Supergeil, es funktioniert! Vielen Dank Spooky (schon wieder )

[traumwerk]

Hallo
Erstmals ganz herzlichen Dank für die geniale Erweiterung! Kommt bei mir fast immer zum Einsatz...
Etwas ist mir aber aufgefallen, was aus meiner Sicht ein wenig verwirrend ist, resp. vielleicht etwas unglücklich.

Ich setze vielmals das mmenu - article ein, da ich jeweils noch andere Contents/Links ins Flyout nehme. Passt auch perfekt für einen Seitenbaum.
Jedoch bei mehreren Seitenbäumen tritt das Problem auf, dass ich jeweils den Artikel den ich anziehen will, nur aus dem 1. resp. obersten Seitenbaum auswählen kann.
Das heisst habe ich zwei oder mehrere Bäume, müsste ich die Artikel im ersten Seitenbaum platzieren, ist da aber ein wenig unglücklich, da es sich ja um zwei Eigenständige Bäume handelt... dasselbe bei mehrsprachigen Webseiten.

Gibt es hierzu eine Lösung um das anziehen der Artikel aus allen Seitenbäumen?

Liebe Grüsse
Reto

[Dirch]

Hmm ich habe sm Code dafür aus einem anderen Element entnommen. Hast du en Beispiel bei welchem man ad allen Seitenbäumen wählen kann? Dann dchsu ich mir das mal an. Wenn du die Möglichkeit hast en Ticket auf github zu erstellen wäre super. Dann Vergesse ich es nicht. Schauspieler nach der Reha an.

[contao100]

Ich habe die Erweiterung "dk_mmenu" schon bei sehr vielen Projekten erfolgreich im Einsatz! Ein tolles Lob an die Entwickler

Eine Sache lässt sich meinerseits aber nicht ganz nachzuvollziehen.

Wenn ich auf den Menü-Button klicke öffnet sich das Menü. Wenn ich dann nochmals auf den Menü-Button klicke schließt sich das Menü.

Das klappt aber gefühlt nur in 7 von 10 Projekten. Bei den anderen 3 muss ich extra einen eigenen Close-Menü Button mit Javascript erstellen.

Da sich die Projekte alle ziemlich ähneln kann ich es nicht verstehen warum es manchmal automatisch schließt und manchmal nicht.

Es wird stets die neuste Version (1.5.1) eingebunden.

Hat das Phänomen schon mal jemand beobachtet?

Schöne Grüße aus Bocholt.

[Kahmoon]

ich habe diese Erweiterung bei mindestens 5 Seiten im Einsatz und kenne dieses Verhalten nicht. Klingt für mich eher danach das irgendein Layer darüber liegt oder JS Konflikt auftritt.

[contao100]

ich habe diese Erweiterung bei mindestens 5 Seiten im Einsatz und kenne dieses Verhalten nicht. Klingt für mich eher danach das irgendein Layer darüber liegt oder JS Konflikt auftritt.

Habe bemerkt das die Funktion immer dann ein Problem hat, wenn ich die fe-page bearbeite. Ich platziere oft den Header und Footer aus dem Wrapper. Dann gebe ich dem Header und Footer eine Breite von 100% und dem Wrapper eine feste Breite.

[contao100]

Habe bemerkt das die Funktion immer dann ein Problem hat wenn ich die "fe-page" bearbeite.

Ich platziere oft den Header und Footer aus dem Wrapper.

Dann gebe ich dem Header und Footer eine Breite von 100% und dem Wrapper eine feste px Breite mit einem margin auto damit er mittig platziert wird.

Der Menu-Button befindet sich immer im Header.

Wenn ich die Standart "fe-page" auswähle läuft es einwandfrei.

[Kahmoon]

Dann liegt dort die Ursache :-)

[tab]

Definitiv. Schau dir mal das HTML in der Entwicklungsumgebung an, nachdem das Javascript es umgebaut hat. Der Wrapper wird in ein spezielles div gepackt, das seinerseits nach der Navigation, die ebenfalls verschoben wird, im body liegt. Da dein Header und Footer nicht im Wrapper liegen, führt das dann wohl zu deinen Problemen. Ich würde in diesen Fällen eventuell in die fe_page ein zusätzliches div einziehen innerhalb des Wrappers, so dass Header und Footer direkt im Wrapper liegen und der Rest in dem div. Dann den Wrapper auf 100% und dieses div auf die feste Breite setzen. Dann kann dk_mmenu sein Ding machen mit dem Wrapper und hoffentlich problemlos funktionieren.

[folkfreund]

Ich platziere oft den Header und Footer aus dem Wrapper.
Dann gebe ich dem Header und Footer eine Breite von 100% und dem Wrapper eine feste px Breite mit einem margin auto damit er mittig platziert wird.

Warum machst du dir das Leben so schwer?
Gib dem ganzen #wrapper die 100% und mach mit dem darin befindlichen #container das, was du mit deinem Rest-Wrapper gemacht hast. Das sollte dann ganz ohne Änderungen an der fe_page gehen (ist auch bei Updates besser) - und dk_mmenu funktioniert auch direkt

Gruß, folkfreund

[tab]

Bin mir jetzt nicht ganz sicher, aber ich glaube, es könnte damit Probleme geben, wenn dann mehrere Holy-Grail Spalten im Container drin sind. Dazu gab es früher schon des öfteren Threads zu dieser 100% Hearder/Footer Thematik. Das dazu notwendige Padding des #container würde diesen verbreitern, was normalerweise der #wrapper verhindert. Eventuell kann man es auch irgendwie umgehen mit box-sizing. Wenn es nur #main gibt, sollte es aber auf jeden Fall auch so klappen.

[peter_lang]

Hallo zusammen,

ich nutze das auch sehr oft, super Erweiterung.

Würde gerne wissen, ob und wie es geht, dass hier z.B. auch ein Level_2 positioniert werden kann. D.h. ich möchte bestimmte Menueinträge einrücken..

[contao100]

Danke für die Anregungen. Konnte das Problem beheben.

Momentan binde ich ein MMenu Article ein. In diesem Article möchte eine Standart Contao Navigation (mod_navigation) einbinden.

Hier tritt das Problem auf, das der Article mir mit seinen eigenen geladenen CSS-Klassen meine Navigation "stylt".

Lässt sich dies unterbinden? Auf der Seite der Erweiterung steht ja auch:

"Wird ein Artikel eingebunden, so werden für diesen keine CSS-Stile gesetzt. Dies ist so gewollt."

[Dirch]

Das verstehe ich nicht so recht. Das mmenu setzt sobald man ihm mitteilt dass es ein Artikeln ist die mmenu Stile nicht sondern öffnet und schließt es nur noch mit den entsprechenden Einstellungen. So besteht die Möglichkeit den artikel komplett zu gestalten. Die Aussage bzgl des nicht stylens bezieht sich NUR auf mmenu das sonst Stile setzen würde. Alles was man in den Artikel packt wird natürlich nach wie vor von system gestaltet

[contao100]

Das verstehe ich nicht so recht. Das mmenu setzt sobald man ihm mitteilt dass es ein Artikeln ist die mmenu Stile nicht sondern öffnet und schließt es nur noch mit den entsprechenden Einstellungen. So besteht die Möglichkeit den artikel komplett zu gestalten. Die Aussage bzgl des nicht stylens bezieht sich NUR auf mmenu das sonst Stile setzen würde. Alles was man in den Artikel packt wird natürlich nach wie vor von system gestaltet

Der Artikel verbindet sein eigenes CSS mit dem Contao-Modul "mod_navigtion".

Dadurch sieht die "mod_navigation" genau so aus, als ob ich direkt ein "mmenu - Navigationsmenü" erstellt hätte.

[folkfreund]

Ich hab das jetzt so verstanden:
Du willst im mmenu einen Artikel einbinden (nicht per mmenu anspringen), der dann wieder eine normale Contao-Navigation enthält?
Dann verlierst du doch die Vorteile von mmenu, z.B. bei kleinen Screens.

Was ist deine Idee dabei?

[traumwerk]

Hmm ich habe sm Code dafür aus einem anderen Element entnommen. Hast du en Beispiel bei welchem man ad allen Seitenbäumen wählen kann? Dann dchsu ich mir das mal an. Wenn du die Möglichkeit hast en Ticket auf github zu erstellen wäre super. Dann Vergesse ich es nicht. Schauspieler nach der Reha an.

Hallo Dirch

Herzlichen Dank für Deine Rückmeldung und Support... und entschuldige die späte Antwort :O

Ein Element was ich gesehen habe ist bei den Inhaltselementen > Artikel (Include Elemente) > Bezogener Artikel (Bei der Auswahl kann man Artikel aus allen Seitenbäumen auswählen)

Habe bei github unter "Issues" noch ein Ticket erstellt (Hoffe das ist Korrekt so :O ).


Nochmals besten Dank

Herzliche Grüsse
Reto

[Dirch]

Danke Reto und ich habe erst in deinem Zitat gesehen was die Autokorrektur und die Smartphone Tastatur aus meinen schönen Worten gemacht haben 😂

[nckwtzl]

Hallo ihr Lieben,

ist es möglich die Erweiterung über das Template bzw. Contao selbst so zu konfigurieren, dass man bei der Auswahl der Navigation auch Artikel auswählen kann?
Hat das schon mal jemand probiert oder kann mir dazu Auskunft geben?

[Spooky]

Ja, prinzipiell musst du es dabei nur schaffen, eine Navigation ausgeben zu lassen, die eben auch die Artikel enthält. Das hat nichts direkt mit (dk_)mmenu zu tun, sondern mit dem regulären Navigations Templates von Contao.

[nckwtzl]

Ja, prinzipiell musst du es dabei nur schaffen, eine Navigation ausgeben zu lassen, die eben auch die Artikel enthält. Das hat nichts direkt mit (dk_)mmenu zu tun, sondern mit dem regulären Navigations Templates von Contao.

Vielen Dank für die schnelle Antwort. Leider hab ich relativ wenig Plan wie man die nav_default so bearbeitet dass auch Artikel ausgegeben werden..

[planepix]

Hallo nckwtzl,

in der Beschreibung des dk_mmenu steht auch:

Darüber hinaus kann mit mmenu - Artikel ein beliebiger Artikel in ein mmenu ausgegeben werden.

Habe ich bisher noch nicht eingesetzt, aber vielleicht das man ausprobieren.

[Thomas Hinze]

Halo,

ich gebe im Menü einen Artikel aus,

dazu habe ich das template mod_mmenu_project.html5 angelegt

<div class="<?php echo $this->class; ?> invisible block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <div class="container">
{{insert_article::16}}
    </div>
</div>

und dem entsprechenden mmenu Modul zugewiesen.

klappt schon mal.

ABER: der Artikel beinhaltet ein Newslist Modul, und darüber gibt es ein Menü um nach Tags zu filtern.
Klappe ich das Menü auf, kann ich einen Beitrag wählen, Menü schließt sich, Detailseite des Beitrag ist zu sehen - Verhalten ist so richtig.
Klicke ich auf einen Filter innerhalb des Menüs geht das Menü zu und ich sehe die gefilterte Ansicht aber eben als normale Seite. Das sollte sich alles im Menü abspielen.

Jetzt meine Überlegung.

Statt Artikel binde ich einen iFrame (Artikel mit Newslist und Filtern) ins Menü ein.
Dann sollte ich schon mal innerhalb des Menü klicken können?!
Aber wie muss der Link auf einen Beitrag aussehen, wenn ich aus dem Frame zurück auf die normale Seite möchte? (Menü schließt sich und Beitrag ist in Hauptseite zu sehen)

Nächster Punkt,
kann ich das Menü öffnen und dem enthaltenen iFrame gleichzeitig einen Parameter übergeben der den Tag Filter steuert?
(öffne mm_Menü mit iFrame->Auszeichnungsfilter XY)

Für Ideen und konstruktive Kritik bin ich wie immer ausgesprochen dankbar.

[Thomas Hinze]

ok, iFrame klappt.

<div class="<?php echo $this->class; ?> invisible block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
    <div class="container">
        <iframe width="100%" height="100%" src="{{link_url::17}}" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Weiterführende Links im newslist template sind mit target="_parent" versehen.

Fehlt "nur noch" die Möglichkeit von der Hauptseite das mm_menu mit Parameter aufzurufen.
Theoretisch reicht es die URL vom iFrame zu ändern.

irgendwie so...

Default: iframe src="newslist.html"

If Parameter replace "newslist.html" with "newslist/tag/{{parameter}}.html"

[contao100]

Ich würde gerne fragen ob jemand das dk_mmenu auch bereits im "Landscape-Modus" erfolgreich im Einsatz hat?

Bei mir ist es so das im normalen "Portrait-Modus" auf mobilen Endgeräten alles einwandfrei läuft.

Wenn ich das mobile Endgerät jedoch drehe und in den "Landscape-Modus" gelange, kann ich zwar das Menü per Trigger von der Seite einblenden lassen, jedoch bei der kleinsten Berührung verschwindet das Menü wieder.

Es sieht also so aus als ob bei einem aktivierten "Landscape-Modus" beim scrollen nicht das Menü gescrollt wird, sondern der Content im Hintergrund. Also Body allgemein.

Ich habe gesehen das es folgende Funktion gibt: Scroll bug fix. Link: http://mmenu.frebsite.nl/documentati...l-bug-fix.html

Jedoch kriege ich diese nicht zum laufen.

Kennt jemand das Problem?

[contao100]

Ich würde gerne fragen ob jemand das dk_mmenu auch bereits im "Landscape-Modus" erfolgreich im Einsatz hat?

Bei mir ist es so das im normalen "Portrait-Modus" auf mobilen Endgeräten alles einwandfrei läuft.

Wenn ich das mobile Endgerät jedoch drehe und in den "Landscape-Modus" gelange, kann ich zwar das Menü per Trigger von der Seite einblenden lassen, jedoch bei der kleinsten Berührung verschwindet das Menü wieder.

Es sieht also so aus als ob bei einem aktivierten "Landscape-Modus" beim scrollen nicht das Menü gescrollt wird, sondern der Content im Hintergrund. Also Body allgemein.

Ich habe gesehen das es folgende Funktion gibt: Scroll bug fix. Link: http://mmenu.frebsite.nl/documentati...l-bug-fix.html

Jedoch kriege ich diese nicht zum laufen.

Kennt jemand das Problem?

Ich weiß jetzt woran es liegt.

Da der Bildschirm im "Landscape-Modus" nicht so hoch ist, habe ich nicht bemerkt das der Finger beim scrollen vom dk_mmenu den fixed Header berührt und somit das Menü schließt.

[cob-web]

Hallo Dirch und danke für die tolle Erweiterung.
Ich habe sie nun erfolgreich auf einer "multiplen" OnePageWebsite zum Laufen gebracht. Die Website hat mehrere "echte" Seiten, die Unterpunkte auf jeder Seite sind jedoch Anker.
Nun schließt das Menu leider nicht selbstständig, wenn ich einen Unterpunkt/Anker ansteuere.
Ich habe hier einen Hinweis gefunden, wie man es möglicherweise hinkriegen kann: http://stackoverflow.com/questions/2...on-anchor-tags
Dazu müsste ich jedoch den generierten Javascript ändern.
Wenn ich es richtig verstehe, müsste Folgendes ausgegeben werden:

$("#my-menu").mmenu({
  "slidingSubmenus": false,
  onClick : {
    close          : true,
    preventDefault : false,
  }
}); 

Kann mir vielleicht jemand einen Hinweis geben, wie ich es machen kann ohne gleich die ganze Erweiterung aufbohren zu müssen?

[Dirch]

Heho,

das kannst du im zugehörigen js-template (js_mmenu) machen. Das sieht nur etwas kryptisch aus wegen dem php-code innen drin, aber du kannst da deine parameter hinzufügen.

[cob-web]

Heho,

das kannst du im zugehörigen js-template (js_mmenu) machen. Das sieht nur etwas kryptisch aus wegen dem php-code innen drin, aber du kannst da deine parameter hinzufügen.

Danke Mann - hat wunderbar geklappt!

[Patric]

Hallo,

ich probiere gerade auch etwas mit dem mmenu rum. Klappt auch soweit ganz gut. Nun möchte ich gerne auf meiner Testseite http://testsite.rm.de1.cc das Menü in der Art wie auf der Seite http://www.mclaren.com/formula1/ darstellen. Der Burger und dazugehöriger Header-Balken sollen also immer zu sehen sein, um den Layer beliebig ein- und auszublenden. Ich habe dahingehend schon einiges in CSS probiert, komme jedoch auf keine Lösun. Vielleicht kann mir ja jemand helfen.

Vielen Dank schonmal!

Patric

[folkfreund]

Hi Patric,
irgendwo in deinem CSS steht

.mm-menu {
    background: #323849;
}

erweitere das mal testweise zu

.mm-menu {
    background: #323849;
    top: 72px;
    height: calc(100% - 72px);
}

Dann noch das Menü von oben einblenden lassen. Vielleicht funktioniert es dann ja schon.

Gruß, folkfreund

[Patric]

Hi Patric,
irgendwo in deinem CSS steht

.mm-menu {
    background: #323849;
}

erweitere das mal testweise zu

.mm-menu {
    background: #323849;
    top: 72px;
    height: calc(100% - 72px);
}

Dann noch das Menü von oben einblenden lassen. Vielleicht funktioniert es dann ja schon.

Gruß, folkfreund

Das hätte ich in ähnlicher Form auch schon versucht. Leider liegt das Icon jedoch immer noch dahinter und transformiert sich beim Klick auch nicht in die ursprüngliche Burgerform zurück.
Weist du hier eine Lösung?

[folkfreund]

Von einer Transformation des Burgers hattest du auch nichts gesagt...

Aktuell schließt nicht ein Klick auf das X das Menü sondern auf den darüber liegenden div id="mm-blocker". Darum findet also kein Klick auf das Icon statt, damit auch kein Auslöser für die Transformation.
Diesen Layer mm-blocker kannst du wie schon das Menü nach unten verschieben:

#mm-blocker {
    top: 72px;
    height: calc(100% - 72px);
}

Damit findet die Transformation bei Klick wieder statt.
Leider schließt sich jetzt das Menü nicht mehr, da das einen Klick auf den Hintergrund braucht.

Die Lösung könnte hier zu finden sein: http://mmenu.frebsite.nl/tutorials/o...-the-menu.html

In deiner Funktion myFunction(), mit der du den Burger umschaltest, kannst du dann auch das mmenu schließen. Dazu musst du natürlich wissen, ob es aktuell offen ist.

Ich hoffe das hilft dir weiter.
folkfreund

[Patric]

Vielen Dank für deine bisherige Hilfe. Bin leider auf dem Gebiet Javascript noch sehr unerfahren, wie du an meinen Bemühungen im Anhang erkennen kannst.. Es ist zum verrückt werden..