Mobile Menü

**Generic1** · 19.06.2013, 10:00

Hallo,

ich hätte noch eine Frage zum Menü, wenn die Größe des Bildschirmes kleiner wird.
Auf der WebSeite
http://liechtenecker.at/responsive-w...gn-die-basics/
ist genau das Verhalten, dass ich auf meiner Webseite haben möchte.
Wenn man den Browser zusammenschiebt, wird statt dem gesamten Menü ein Menü- Button angezeigt und beim Draufklicken wird das Menü angezeigt -> genau so hätte ich es auch gerne.
Meine Frage wäre jetzt, bietet Contao dafür Unterstützung an oder gibts eine Erweiterung dafür für Contao?
Besten Dank für Antworten und lg
Generic1

**Lego2013** · 19.06.2013, 10:04

Das hat weniger mit Contao zu tun, sondern mit CSS. Du musst für bestimmte Viewports auch entsprechende CSS-Regeln hinterlegen. Das wird mit den Media-Queries gemacht. So kriegst Du auch diese Art der Menüs hin.

Contao bietet Dir auch an, eine spezielle Mobile-Version der Webseite über den Server auszuliefern, ist aber nicht dasselbe! Mal im Handbuch lesen oder googlen. Läuft unter dem Stichwort RESS.

**Generic1** · 19.06.2013, 10:21

Besten Dank,

Das mit den Media- Queries hab ich schon gemacht, z.B. logo vom Header in den Content- Bereich, ich was mir aber nciht sicher, ob ich das alles selber machen muss oder ob es eben eine Erweiterung gibt, im Grunde ist es ja immer das selbe.

Das mit dem Anzeigen des Menü- Buttons ist mir grundsätzlich klar, was mir noch nicht klar ist, was ich nach dem Klicken auf den Menü- Button machen muss.
Brauch ich da JavaScript oder die kann ich das Menü dann vertikal anzeigen -> das wäre ja dann eine Sachen von einer Erweiterung in Contao, oder.
Die Erweiterung könnte dann den JavaScript- Code zur verfügung stellen, der für das Ein- und Ausklappen zuständig ist.
Oder sehe ich da was falsch?

Vielen Dank für die Hilfe.

lg
Generic1

***xchs*** · 19.06.2013, 10:42

Dirch hat erst vor wenigen Tagen eine auf jQuery basierende Erweiterung im ER veröffentlicht, welche solch ein "mobiles Menü-Konzept" implementiert: https://contao.org/de/extension-list..._mmenu.de.html

Wie das dann aussehen könnte, zeigt diese Demo: http://mmenu.frebsite.nl/mmenu-2.0.1.../advanced.html

**Generic1** · 20.06.2013, 05:34

Vielen Dank für die Antworten, das was genau das, was ich wissen wollte bzw. was ich brauche.
Eine Kleinigkeit bekomm ich noch nicht hin (ich entschuldige mich jetzt schon für die Frage :-))

Dieser Code unten befindet sich am Anfang von body. Dadurch wird mein Footer etwas nach unten geschoben. Ich hab jetzt schon einiges probiert das die Mobile Navigation nicht sichtbar ist und auch nicht meine body- Elemente nach unten schiebt - leider ohne Erfolg.
Weiß jemand wie ich das machen kann, dass das Mobile- Menü, wenn es ausgeblendet ist, meine body- Elemente nicht nach unten schiebt?
(Das ist die Seite: http://www.smartinnotec.com/test/index.php/Home.html)

Code:

<nav id="mobileNavigation" class="mod_mmenu block mmenu mmenu-left mmenu-horizontal">
<a class="invisible" href="index.php/Home.html#skipNavigation61">Navigation überspringen</a>
<ul class="level_1 mmenu-opened">
<a id="skipNavigation61" class="invisible"> </a>
</nav>

**nehl** · 20.06.2013, 12:16

Zitat von Generic1

Hallo,

ich hätte noch eine Frage zum Menü, wenn die Größe des Bildschirmes kleiner wird.
Auf der WebSeite
http://liechtenecker.at/responsive-w...gn-die-basics/
ist genau das Verhalten, dass ich auf meiner Webseite haben möchte.
Wenn man den Browser zusammenschiebt, wird statt dem gesamten Menü ein Menü- Button angezeigt und beim Draufklicken wird das Menü angezeigt -> genau so hätte ich es auch gerne.
Meine Frage wäre jetzt, bietet Contao dafür Unterstützung an oder gibts eine Erweiterung dafür für Contao?
Besten Dank für Antworten und lg
Generic1

Ergänzend zu den bereits existierenden Antworten hierzu: http://twitter.github.io/bootstrap/
Damit setze ich gerade eine Seite um. Es ist zwar ein bisschen komplizierter das Ganze durch Contao zu steuern, aber möglich.

Die Grundlagen, sprich das bisschen jQuerry + CSS sind jedoch allgemeingültig; somit rein als weitere Inspirationsquelle.

**Dirch** · 20.06.2013, 14:00

Zitat von Generic1

Dieser Code unten befindet sich am Anfang von body. Dadurch wird mein Footer etwas nach unten geschoben. Ich hab jetzt schon einiges probiert das die Mobile Navigation nicht sichtbar ist und auch nicht meine body- Elemente nach unten schiebt - leider ohne Erfolg.
Weiß jemand wie ich das machen kann, dass das Mobile- Menü, wenn es ausgeblendet ist, meine body- Elemente nicht nach unten schiebt?

hmm wo hast du denn das Modul eingebunden? Eigentlich sollte das CSS von mmenu keine Auswirkungen auf den Rest der Seite haben. Evtl. hilft das Modul aus dem Header in normalen Layout-Bereich zu schieben, falls es dort eingebunden wurde.

Ansonsten solltest du noch bei den größeren Viewports, wo dein normales Menü sichtbar ist, den Aufruf für das Mobile Menü verstecken. Hier auf der Seite von Planepix kannst du eine ganz gute Einbindung sehen: http://www.contao-fuer-webdesigner.de/ Wenn du dort mit dem FireBug oder ähnlichem die Seite anschaust kannst du rausfinden was du wo wie wann setzen mußt.

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

PS: ich han vorhin eine neue Version ins ER eingestellt. Fred hatte vorgestern Version 2.0 rausgebracht wo sich auch das CSS noch geändert hat. Evtl. hat es sich schon allein dadurch verbessert.

**Generic1** · 21.06.2013, 05:41

Danke für die antworten,
ich hab das jetzt auf verschiedenen Browsern probiert.
Im Firefox zeigt sich das verhalten nachwievor, im Safari funktionierts, bei den anderen Browsern hab ich jetzt noch nicht geschaut, es is aber echt komisch
ich weiß eigentlich nicht wie ich das im Firefox lösen kann.

Es stört jetzt nicht so aber vielleicht hat jemand noch eine Idee - interessanter weise hab ich ja das Module mit dem Menü in die Fußzeile gegeben, im HTML code ist es aber immer noch ganz am Anfang im body - is irgendwie komisch.

lg
Generic1

**Dirch** · 21.06.2013, 08:57

Zitat von Generic1

Es stört jetzt nicht so aber vielleicht hat jemand noch eine Idee - interessanter weise hab ich ja das Module mit dem Menü in die Fußzeile gegeben, im HTML code ist es aber immer noch ganz am Anfang im body - is irgendwie komisch.

Das ist normal, das Script muß sich um den gesamten Inhalt legen, sonst könnte es ihn nicht komplett verschieben. Und da dessen Navigation logischerweise außerhalb davon liegen muß, steht es im Code dann ganz am Anfang von body.

Aber bette das Modul doch bitte mal nicht im Footer, sondern in der Hauptspalte ein. Das könnte/sollte es lösen.

**Generic1** · 22.06.2013, 05:17

leider nicht, ich hab ´s schon überall hingeschoben, in den Header/Footer und auch ins Hauptmenü - es war immer das selbe Verhalten, hmmmm :-(

**markusch** · 07.10.2013, 11:05

Hallo Dirch

Was mache ich wohl falsch !

Nach dem Update der dk_mmenu Erweiterung auf die neue Version sehe ich keine Einträge mehr im
Slide Menu und der Slide geht über die ganze Seite nach rechts (Android und Iphone) !

Das Modul habe ich bereits geöffnet, gespeichert und wieder geschlossen.

Danke für die Antwort.

Grüsse

Markus

**Dirch** · 07.10.2013, 11:16

Hallo Markus,

das Verhalten hatte ich auch schon auf einer anderen Seite gesehen, aber bisher habe ich keine Erklärung dafür gefunden. Es scheint meistens zu gehen, aber manchmal nicht. Eigentlich hat sich am Quellcode nicht viel geändert - bis auf das Script und die zugehörigen CSS-Files.

Bei meinen Tests hatte ich das Verhalten nicht gehabt, deshalb bin ich da noch etwas ratlos. Hast du einen Link wo ich da genauer nachforschen kann?

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

**markusch** · 07.10.2013, 11:44

Hallo Dirk und danke dir für die schnelle Antwort.

Ich sende dir gerne einen Link zu, muss aber zuerst das Update wieder ausführen
um den Fehler zu generieren. Bin wieder auf die "ältere" Version zurück gesprungen.

Kann ich dir den Link auch per Mail senden ?? Sollte nicht gleich open sein, da ich da
am testen bin für eine neue Website !

Gibst du mir bisschen Zeit, bin jetzt dann gleich unterwegs bis Abends.....

Danke dir...

Grüsse

Markus

**Dirch** · 07.10.2013, 12:14

Klar kannst mir den Link auch per PM schicken, aber wenn die alte Version geht und genau das macht was sie soll, würde ich auch bei dieser bleiben. Man muß ja nicht jedes Update mitmachen.