Umstellung auf Responsive (Anfängerfrage)

**shrike** · 13.11.2016, 15:53

Hallo Community,

ich hoffe, ich habe beim durchforsten die Antwort nicht überlesen....

Folgende Anfängerfrage hätte ich:
Ich habe mit einer Desktopversion einer Homepage angefangen und erst im nachhinein kam mir die Idee, das Ganze auch noch responsive zu gestalten.
Ich habe mich an dem Buch von Peter Müller entlang gehangelt und komme aber an eine Stelle, die mich stoppen lässt..
Die Desktopversion hat eine Top-Navigation im Header und eine Sub-Navigation die in Left dargestellt wird.
Für eine responsive Navigation sollen aber alle Links auf einmal dargestellt werden...
Nun habe ich mir kurz damit geholfen, dass ich ein Layout für mobile Seiten erstellt habe und jede Seite darauf verwiesen. Leider funktioniert dieser
Trick nicht, wenn Contao nicht merkt, dass es ein mobile Device ist...

Die Frage also: Gibt es ohne großes Redsign eine Möglichkeit, Contao bei geringen Auflösungen die Navigation komplett aufzubauen?

**tab** · 13.11.2016, 16:30

Grundsätzlich funktioniert so etwas über media queries im CSS. Beide Varianten der Navigation werden ins Layout eingebunden, je nach Viewport-Breite wird dann die eine Variante mit display:none aus- und die andere mit display:block eingeblendet.

**shrike** · 13.11.2016, 17:04

Wahrscheinlich war ich zu unklar mit meiner Frage oder ich verstehe Deine Antwort nicht..

Ich habe ja im Seitenlayout eingestellt, dass die Top-Navigation im Header und die Sub-Navigation in Left dargestellt wird.
Der Trick wäre also jetzt, mittels einer Möglichkeit (die ich nicht kenne) die Ausgabe der Sub-Navigation in die Top-Navigation aufzunehmen.
Wenn das natürlich mit Media-Querys geht, dann wäre das toll.

**tab** · 13.11.2016, 17:14

Nein, da wirst du für die mobile Navigation eine dritte Navigation brauchen, die von vornherein beides enthält.

**shrike** · 13.11.2016, 17:25

Für das mobile Layout hab ich das ja auch genau so gelöst....
Nur für die Anpassung an verschiedene Auflösungen scheitert das...dafür muss ja die Sub-Navigation quasi aus dem Left herausgelöst werden damit es im Navigationsbaum mit eingeblendet wird...

**tab** · 13.11.2016, 17:35

Die Top und Subnavigation müssen eben beide mit diesplay:none ausgeblendet werden (per media query) und die zusätzliche mobile Navigation, die alles enthält, wird dann als einzige genutzt.

**shrike** · 13.11.2016, 17:42

Hmmm, ich glaub, so langsam komme ich dahinter was Du meinst...
Mal schauen:
- Alternatives Layout für mobile Seiten ist unnötig
- Alle Nav-Module in die Seite einbauen und mit Media Query ein- bzw. ausschalten. Da Left ja eh unter den Main rutscht und dort ausgeschaltet wird (bei kleinem Viewport), sieht man auch keinen Platzhalter mehr

Kommt das so in etwa hin?

**tab** · 13.11.2016, 19:33

So in etwa. Wobei das mit dem "Platzhalter" nicht zutrifft. Den sieht man überjaupt nicht, egal wo er steht, selbst wenn es mitten in der Hauptspalte wäre. Genau das macht ja display:none, die so "gestylte" Navigation wird einfach überhaupt nicht dargestellt, nimmt auch keinen Platz auf der Seite ein. Ist für die Ansicht im Browser im Prinzip genau so, als ob die Navigation gar nicht im HTML drin stünde. Es gab hier sogar mal einen Fall, da hatte jemand <body> auf display:none gesetzt und sich gewundert, warum da nur eine leere Seite angezeigt wird

. Freilich, wer sich den Seitenquelltext anschaut, der wird die zusätzliche Navigation finden. Und natürlich muss sie auch heruntergeladen werden, das macht dann halt ein paar Extra-Bytes.