mobile_menu

[neelix]

Hallo zusammen,

ich spiele hier gerade mit der Erweiterung, aber so ganz verstehe ich sie nicht.

Wie stelle ich es ein, dass am PC eine klassische horizontale Navigation angezeigt wird, und erst wenn der Platz nicht reicht, auf die kompakter Version umgeschaltet wird?

Neelix

[tab]

Das ist jedenfalls nicht in dieser Erweiterung enthalten und muss nötigenfalls per CSS / Media queries gemacht werden. Also zwei Navigationen, die je nach Viewport-Größe ein- bzw ausgeblendet werden.
Edit: Alternativ kann per geeigneter Erweiterung oder mobilem Seitenlayout auch jeweils nur das passende Navigationsmoduk eingebunden werden.

[Andreas]

Wenn man die Navigation für beide Ansichten nutzen möchte, dann ist das mit der Erweiterung [mobile_menu] einfacher. dk_mmenu zerreißt die Liste per JS in mehrere ULs.

Mit mobile_menu könnte man als Ausgangspunkt für die Desktopansicht so ein CSS benutzen.

@media (min-width: 960px) {  
  .mobile_menu {
    width: 100% !important;
    height: auto !important;
    transform: none !important;
  }
  .mobile_menu .inner {
    height: auto;
    overflow: visible;
  }
  .subnav li {
    float: left;
  }
  .subnav li.submenu_hide > ul {
    display: none;
  }
  .subnav ul ul {
    position: absolute;
    left: 0;
  }
}
/* optional */
.subnav .submenu > a::after,
.subnav .submenu > span::after {
  content: '›';
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
}
.subnav .submenu_show > a::after,
.subnav .submenu_show > span::after {
  transform: rotate(90deg);
} 

Meine Navigation hat die Klasse subnav. Mein Breakpoint liegt bei 960px. Der Ansatz ist für maximal 2 Level.

[Schnippel]

@ Andreas

Gibt es für den Einsatz von der ER [mobile_menu] eine Beispielseite?
Ich suche eine Möglichkeit für Desktop / Tablet mit DropDown-Navigation, bei der die Level 2 per Touch aufklappt.

Beispiel: Unbenannt-2.jpg

[Andreas]

Ja, das müsste das hier sein https://codefog.pl/extension/mobile-menu.html

Level 2 klappt beim ersten Click/Touch auf Level 1 auf. Beim zweiten Click wird Level 1 aufgerufen (abschaltbar). Bereits geöffnete Level klappen automatisch zu, wenn ein zweiter Level 1 geklickt wird. Ist man bereits auf Level 2, dann ist dieses Level aufgeklappt.

[Schnippel]

Ja, in diese Richtung soll es gehen.
Aber wie binde ich das Ganze ein?
ER ist installiert. Wie stelle ich nun den Bezug zu dem Modul "Navigationsmenü" her?

[Andreas]

Steht alles auf der Seite. z.B. hier https://codefog.pl/files/media/exten...figuration.png

[Schnippel]

Ich hab das per Modul "Navigationsmenü, welches die ID 8 hat, in das Feld "MENÜ-CONTENT" per {{insert_module::8}} eingebunden, aber es funktioniert nicht. Die Navigation wird nicht dargestellt. :-/

[Andreas]

Dann musst du halt mal ein wenig auf die Suche gehen. Quelltext ansehen, JS-Fehler suchen usw. Browser auch mal zusammen schieben.

[Schnippel]

Bekomme es nicht hin. Da steckt der Fehler entweder bei mir im System oder es fehlt noch was.
Trotzdem Danke für Deine Hilfe und die Tipps.

So soll stelle ich mir das Ganze in der LARGE-Ansicht vor:
Unbenannt-2.jpg

und soll es auf kleinen Bildschirmgrößen aussehen:
Unbenannt-3.jpg

[Andreas]

Das sind viel zu wenig Infos, und ohne einen Link zur Seite wäre das von unserer Seite ein reines Rätselraten.

[Andreas]

Jetzt hast du den Link in nem anderen Thread gepostet. Ich mach mal hier weiter.

http://ips.internet-projekt-service.de/

Die Navigation ist da und kann auch aufgeklappt werden. Oben siehst du den Toggler, welchem du den Inhalt "Navigation" gegeben hast.

Setze jetzt erstmal im Modul den Breakpoint von 3000 auf 950. Gib der Navigation dann die Klasse "subnav" (kannst du ja später ändern) und bringe mein CSS ins FE.

Nimm auch mal diese @charset "utf-8"; aus deinem CSS. Und auch die @mixin - soweit sind wir noch nicht mit CSS.

[Schnippel]

Setze jetzt erstmal im Modul den Breakpoint von 3000 auf 950. Gib der Navigation dann die Klasse "subnav" (kannst du ja später ändern) und bringe mein CSS ins FE.

Danke, das Funktioniert schon mal.
Wie bekommt man nun noch die kleinen Pfeil-Icons rein, damit der User erkennt, daß unter dem Menü-punkt noch weitere Ebenen existieren?
Unbenannt-3.jpg

[Andreas]

Dafür ist in meinem CSS oben der optionale Block mit dem ::after zuständig. Er war mit in dem media-query, deswegen würde er dann nur auf Desktop zum Tragen kommen. Ich habe es oben korrigiert und ihn aus dem media-query heraus genommen.

[Schnippel]

Aus der "Navigation" (Toggle) hab ich einen Menü-Button gemacht.
Unbenannt-1a.jpg

Problem: wenn man auf CLOSE klickt, klappt zwar die Navigation wieder weg, aber der Menü-Button bleibt auf CLOSE stehen.
Woran liegt das und was muß wie wo geändert werden, damit nach dem Schließen der Menübutton wieder auf NAVIGATION steht?

siehe Testseite

[neelix]

Hallo!

Ich verzweifle auch gerade an dem "mobile_menu", aber nicht am Design. Ich wäre froh, wenn ich mal irgendwas an Inhalt bekäme.

Bin nach Anleitung vorgegangen:

Navigationsmenü erstellt -> ID 3

Mobile Menu erstellt und in Menü Inhalt folgendes eingetragen:

{{insert_module::3}}
<div>Dummy</div>

Trigger ist ganz simple

<strong>Navigation</strong>

Dann das neue Modul im Seitenlayout eingefügt. Aber auf der Seite kommt nichts davon an. Der entsprechende Block ist einfach leer.
http://www.coachingundberatung.eu/cms-dev/start.html

Hat jemand eine Idee?

Neelix

[Andreas]

@Administratoren: Könnte ihr hier bitte mal irgendwie aufräumen? Ab #3 (wo ich [mobile_menu] als Alternatiave empfohlen hatte) bis hierhin betrifft dieser Thread [mobile_menu] und nicht, wie im Titel, [dk_mmenu]. Danke schön.

@neelix: Mach dich über die Contao-Docs oder das Contao Wiki darüber schlau, wie man FE-Module im FE zur Ausgabe bringt.

[neelix]

1. Als Eigentümer dieses Themas konnte ich den Titel anpassen.

2. Was soll ich noch mehr machen als das Modul im Seitenlayout in den entsprechenden Abschnitt zu packen, wie es auch in der Anleitung steht:

Do not forget to include the module in the page layout! Depending on your configuration and style of developing the websites, you can either do that by adjust the page layout settings or using the {{insert_module::ID}} insert tag in some HTML front end module that is used to render page header.

Wenn ich die klassische Navigation an dieser Stelle einfüge, sehe ich die auch, nur von mobile_menu ist nichts zu sehen.

[Andreas]

Ah, ja, du bist ja der Eigentümer, dann reicht wohl die Änderung des Titels.

• Welche Contao Version?
• Sind deine Erweiterungen alle kompatibel?
• Stelle das FE mal von XHTML auf HTML.
• Benutze mal nur die Core-Templates (mit HTML greifen nur xxx.html5 Templates).
• Schreibe kein eigenes HTML, oder fehlerfreies HTML.

[neelix]

Also,

• Contao 3.5.28
• Außer mobile_menu keine FE-Erweiterungen installiert
• Änderungen von XHTML nach HTML -> keine Änderung
• ich habe keine angepassten Templates

Kann es sein, dass das Modul nur in der Kopfzeile funktioniert? Seit ich es jetzt nämlich da hin geschoben haben, sehe ich Output im Quelltext.

Jetzt muss ich es nur noch sichtbar an die Stelle bekommen, wo es hin soll.

[Andreas]

Ah, gut, jetzt hat dein HTML 0 Fehler.

Ich benutze zwar nie Custom-Bereiche, aber kann ich mir nicht vorstellen, warum es dort nicht ausgegeben werden soll.

[neelix]

Jetzt steht zwar was im Quelltext, aber auf der Seite sehe ich nix.

Irgendwas ist der Meinung das Menü auf normalen Desktops ausblenden zu müssen.

[neelix]

Ok, der Cache hat mich geärgert.

[Andreas]

Jetzt steht zwar was im Quelltext, aber auf der Seite sehe ich nix.

Irgendwas ist der Meinung das Menü auf normalen Desktops ausblenden zu müssen.

Ja, das ist der Standard, dass dieses Menü erst ab dem Breakpoint angezeigt wird. Deshalb mein obiges CSS, welches neue Regeln oberhalb des Breakpoints setzt (da wo das Menü eigentlich unsichtbar ist). Deswegen muss da auch teilweise "!important" benutzt werden um Inline-Style, welches per JS gesetzt wird, überschreiben zu können.

Edit: Darum ging es ja hier in diesem Thread ursprünglich. Eine responsive Navigation für alle Breakpoints zu benutzen. [dk_mmenu] ist auch oberhalb der Breakpoints ausgeblendet, aber dort mit eigenem CSS diesen Zustand neu zu gestallten ist mit sehr großem Aufwand verbunden, wenn überhaupt möglich. Deswegen der Tipp mit [mobile_menu], weil dort der ausgeblendete Zustand (normalerweise bei Desktop) sehr leicht mit eigenem CSS anzupassen ist.

[pipkin]

Hi,

ich hänge mich hier mal dran, da meine Frage mit dem oben zumindest verwandt ist...

Ich habe in den Einstellungen der Erweiterung "mobile_menu" den Breakpoint "1024" eingegeben.

Ich möchte, dass auf dem Tablet (ipad) in landscape und portrait die mobile Navigation angezeigt wird. Auf Laptops und Desktops soll die Desktop-Navigation angezeigt werden, auch bei einer 1024er-Auflösung. Wesentlicher Unterschied liegt in der Bedienbarkeit (Touch vs. Mauszeiger).


Im iPad landscape wird aber immer die Desktop-Navigation angezeigt, egal ob ich das Häkchen bei "Auf Tablets anzeigen" setze oder nicht. Landscape hat 1024 Pixel Breite, daher greift der reine Media Query natürlich nicht mehr. Aber welche Funktion hat dieser Tablet-Haken dann? Meine Hoffnung war, dass er zusätzlich zum Media Query noch so etwas wie eine Geräte-Erkennung einbaut. Falls dem so ist, habe ich bei mir irgendwo einen Wurm drin.


Falls er eigentlich nur einen media query definiert (und nicht das Gerät ausliest), der durch meinen eigenen Wert überschrieben wird: wie würdet Ihr das lösen?
Mein Ansatz wäre jetzt, den Breakpoint auf 1025 zu setzen ... Schön ist das natürlich nicht.

Vielen Dank für Eure Inspiration ...

[planepix]

Hallo pipkin,

schau mal hier:
http://stephen.io/mediaqueries/

https://blog.kulturbanause.de/2011/0...co-optimieren/

[pipkin]

Das interpretiere ich jetzt mal so, dass ich mir keine Hoffnung machen muss, dass derartiges schon in der Erweiterung bedacht ist ;-)

Danke!
Dass ich das per CSS regeln kann, war mir bekannt.

Inzwischen habe ich auch die Stelle im Javascript gesehen, die mit dem gesetzten breakpoint umgeht:

updateElementsVisibility: function () {
if (window.matchMedia('(max-width: ' + this.settings.breakPoint + 'px)').matches) {
this.showTrigger();
} else {
this.hideMenu();
this.hideTrigger();
}
},

Die sorgt anscheinend nur dafür, dass im style beim Breakpoint ein "display:none" bzw. "display:block" gesetzt wird.
Insofern hat sich meine erste Frage damit schon erledigt: der Haken bei "Tablet" hat keine Funktion.

Ich kann jetzt schauen, in welchen Objekten das Javascript überall sein display xyz reinschreibt (das Javascript liegt ja zum Glück nicht nur minified dabei...) und bastel mir entsprechende CSS, die das eventuell wieder außer Kraft setzen.

[planepix]

Ich trage gar kein Wert ein und mache das nur über die Breakpoints im CSS

Auch die Breitenangabe in Prozent kann sich als tricky erweisen.

[pipkin]

Ich trage gar kein Wert ein und mache das nur über die Breakpoints im CSS

Ja, das klingt für mich inwischen auch nach einem sinnvollen Ansatz ...

(Ich habe ein Layout mit einer Sticky Navigation (position: fixed auf den #header) gehabt, bevor ich diese Erweiterung installierte. Gehabt
Musste schon einiges der mitgelieferten CSS überschreiben, damit das wieder klappt.)

Danke für die Tipps!

[Andreas]

@pipkin:

Man kann nicht herausfinden welches Gerät und welches Display (mit/ohne touch usw.) der Besucher benutzt. (Wenn doch, dann zeige mir bitte den Link dahin.)

Das heißt für uns, wir setzen die Breakpoints nicht nach Gerät sondern nach Layout. Wir entscheiden also wo ein Breakpoint bei unserem Layout Sinn macht. Es sollte auf jeden Fall immer per Touch bedienbar sein. Mouse hover Effekte können ein Bonus für Mausbediener sein, dürfen aber nicht erforderlich sein um die Inhalte der Website zu erfassen und zu navigieren.

[mobile_menu] selbst hat in seinem CSS keine Breakpoints, da es nur für die Ansicht unterhalb des Breakpoints gedacht ist. Das einzige was nötig ist, ist die Entscheidung "soll es sichtbar sein oder nicht". Dies wird per JS gesteuert.

Die Checkboxen Smartphones und Tablets sind etwas irreführend. Das müssten eigentlich Radiobuttons sein. Im Template wird nur ein einziger Breakpoint gesetzt https://github.com/codefog/contao-mo...le.php#L71-L88. Sobald Tablets angehakt ist ist der Haken bei Smartphones ohne Bedeutung und sobald du einen eigenen eingibst ist auch der von Tablets (und Smartphones) ohne Bedeutung. Eigentlich würde hier das Feld für den individuellen Breakpoint ausreichen, welcher default auf irgendeinen Wert gesetzt wird und den du dann überschreiben kannst.

[Andreas]

... und bastel mir entsprechende CSS, die das eventuell wieder außer Kraft setzen.

Das macht mein CSS, welches ich hier oben gepostet hatte. Dies kannst du als Ausgangspunkt benutzen.

[Andreas]

Ich trage gar kein Wert ein und mache das nur über die Breakpoints im CSS

Wenn du keinen Breakpoint einträgst (keine Checkbox bei Smartphones oder Tablets und keinen Wert im Feld Breakpoint) dann hast du einen Breakpoint von "0px". Dann wird bei jeder Größenänderung des Viewports die Funktion hideMenu() https://github.com/codefog/contao-mo...y.js#L412-L457 aufgerufen, welche über die Funktion updateElementsVisibility() https://github.com/codefog/contao-mo...jquery.js#L304 getriggert wird.

Dies nur zur Info, falls es damit mal Probleme geben sollte.