mmenu_dk im Seitenlayout platzieren

[MarinoB]

Liebe Contao Experten,
Ich habe folgende Frage.
Ich habe auf einer Seite die mmenu_dk Erweiterung angewendet.
Die funktioniert soweit auch sehr gut, nur möchte ich nun, dass das Menu statt vom linken Browser-Rand vom Wrapper aus hineingleitet.
Ich hab es bislang, nach vielem Suchen und Ausprobieren, nicht hinbekommen und muss hierbei auch gestehen, dass javascript und PHP nicht meine Kernkompetent ist.

Diesen Hinweis habe ich bisher erfolglos versucht einzubinden.

$("#menu").mmenu({
  // options
}, {
//  pageNodeType: "div"
  pageSelector: "#wrapper"
});

Vielleicht hat ja jemand genau dieses Problem gelöst und kann mir ein paar Tips geben, ob und wie oder wo ich sowas einbinden kann.
Hier kann man sich die Bastelversion angucken.


Mit freundlichen Grüßen Marino

[Andreas]

Dein Code ist im FE nicht zu sehen. Wo hast du ihn eingefügt?

[MarinoB]

Lieber Andreas,
Danke für deine schnelle Antwort.

Wo hast du ihn eingefügt?

Dies ist eben genau das Problem.
Wenn ich den Code so in die fe_page.html5 einfüge, ganz unten im script Tag, dann verhaut es mir die Navigation.
Sprich: kommt der offcanvas link erst wenn ich das Browser-Fenster Wrapperbreite verkleinere.
Sogar wenn ich den Code wieder aus fe_page rauslösche funzt die Nav nicht mehr.
Erst wenn ich die ursprungs fe_page.html5 wieder in die templates überschreibe, kommt die Navigation wieder wie gehabt.

Gruss Marino

[Andreas]

Müsste man mal in eingebautem Zustand sehen.

[MarinoB]

Lieber Andreas,
hab die aktuelle Version auf den Server geladen.
Nun verhaut es die Navigation nicht mehr, aber der eingefügte Code bringt auch nichts.

marinobeleffi.ch

[Andreas]

Das kann so nicht funktionieren. Du musst dein js_mmenu Template anpassen, so dass deine Option dort mit ausgegeben wird. Das hier kommt neu hinzu:

,
                offCanvas: {
                    pageSelector: "#my-wrapper"
               } 

Am Ende muss es so aussehen:

<script>
    (function($) {
        var $mmenu = $('#offcanvas');
        $(document).ready(function() {
            $mmenu.mmenu({
                isMenu: true,
                classes: "mm-slide mm-zoom-panels ",
                offCanvas: {
                    moveBackground: false,
                    zposition: "next"
                },
                onClick: {
                    close: false
                }
            }, {
                classNames: {
                    selected: "active"
                },
                offCanvas: {
                    pageSelector: "#wrapper"
               }
            }).removeClass('invisible');
        });
    })(jQuery);
</script> 

Warum das nicht oben bei offCanvas hinzugefügt werden soll, weiß ich nicht. Evtl. funktioniert dies aber auch:

<script>
    (function($) {
        var $mmenu = $('#offcanvas');
        $(document).ready(function() {
            $mmenu.mmenu({
                isMenu: true,
                classes: "mm-slide mm-zoom-panels ",
                offCanvas: {
                    moveBackground: false,
                    zposition: "next",
                    pageSelector: "#wrapper"
                },
                onClick: {
                    close: false
                }
            }, {
                classNames: {
                    selected: "active"
                }
            }).removeClass('invisible');
        });
    })(jQuery);
</script> 

[MarinoB]

Lieber Andreas,
Herzlichen Dank für deine professionelle Unterstützung.
Leider habe ich es bis anhin nicht hinbekommen.. Bin ein Contao Frischling und habe noch sehr mit der Systemstruktur zu kämpfen (bin Wordpress verseucht)
Nun hab ich beschlossen das offcanvasmenu selber zu basteln. Lehrling by doingdoingdoing
Die nächsten Stolpersteine sind vor"programmiert"

Nochmals vielen Dank
Marino

[Andreas]

Neues Template erstellen von js_mmenu.html5. Dann ziemlich weit unten findest du "classNames:". Dort einfach einfügen und ausprobieren.

Ansonsten nehmen die meisten hier [mobile_menu] für die mobile Navigation. Aber Reingleiten vom Wrapper aus, geht damit auch nicht out of the box.

[MarinoB]

Hallo Andreas,
erstmals vielen Dank für die Verdeutlichung. Es hat aber dennoch nicht geklappt. herbei müsste ich noch sagen, dass ich noch in der version 3.5 von Contao arbeite.
Nun hab ich, wie angekündigt, das offcanvas menu selbst gebastelt ohne js und mit Hilfe des Tutorial von erdmann-freunde.
In der Hoffnung dass ich dabei mehr Gestaltungsfreiraum bekomme und dabei Contao besser kennen lerne.

Hat soweit alles gut gelappt, bis auf die Positionierung des Ganzen.
Da ich das Menu via html-modul einpflege, ist das ganze einwenig zu verschachtelt. ( <div id="wrapper"> <div id="container"> <div id="main"><div class="inside"><header id="header"><div class="inside"> )

Somit habe ich auch das Problem das der Inhalt der Artikel immer den Abstand hat von dem geschlossenen "header" Bereich der ja schon im main liegt.
Ich habe auch schon versucht die Artikel via Inserttag zum html-Modul hinein zu setzen, doch dann sind die Texte nicht mehr responsiv.

Vielleicht hat da jemand einen guten Trick, wie erstens den Button " label[for="show-meng"] " für das schließen und öffnen der Navigation mit der Navigation mit animieren kann und zugleich sich der Content Bereich mit verschiebt.

Ich bin mir nicht ganz sicher, ob das überhaupt ohne js möglich ist.
Anschauen

Liebe Grüsse Marino

[Andreas]

Das würde ich nicht so verschachteln. Packe es doch direkt mit in den Hauptbereich.

<main id="main">
  <div class="inside">
    <div class="slide-nav">
      <input id="show-menu" type="checkbox">
      <label for="show-menu">show menu</label>
      <nav class="mod_navigation nav-left">

Und dann ein entsprechendes CSS, z.B.:

main .inside {
  padding: 2rem 2rem 2rem calc(20vw + 2rem);
}
.slide-nav {
  position: absolute;
  left: 0;
  background-color: beige;
  width: 20vw;
}
#show-menu {
  display: none;
}
[for="show-menu"] {
  display: block;
  line-height: 32px;
  background-color: black;
  color: beige;
  text-align: center;
  cursor: pointer;
  transition: all .5s ease 0s;
}
#show-menu:checked + label {
  background-color: tomato;
}
.nav-left {
  transform: translate(-100%);
  transition: all .5s ease 0s;
}
#show-menu:checked + label + nav {
  transform: translate(0);
} 

Hier mal ein Fiddle: https://jsfiddle.net/Andreas/gu8dcf0x/6/

Wenn du die linke "Spalte" gleich hoch haben möchtest, dann kannst du diese Navigation auch in den linken Bereich legen, und mit Flexformatierung bekommst du sie dann leicht auf die gleiche Höhe.

Wenn du das hier mit den Devtools auf der Seite https://demo.contao.org/en/content-elements.html als neues CSS hinzufügst, dann siehst du was ich meine.

#container {
    display: flex;
    padding: 0;
}
#left {
    background-color: tomato;
    margin-left: 0;
    order: -1;
    right: auto;
} 

Wobei eigentlich nur dies hier nötig wäre. Der Rest ist zum Überschreiben von dem CSS von Contao.

#container {
    display: flex;
}
#left {
    order: -1;
    background-color: tomato;
}