Responsive Layout Formatierung mit Navigation und Artikelliste

[Twitt]

Hallo ins Forum
Ich habe eine Navigationsstruktur einer Website die folgendermassen aufgebaut ist:

Platzierung: Header
- Hauptnavigation
- Unternavigation (Stufe 1)

Platzierung: Sidebar
- Artikelliste (Stufe 2 / mit Sprunglinks zu den Artikeln)

Ich mach mir gerade Gedanken wie ich das sinnvoll umsetze wegen der Artikelliste? Soll ich Navi und Unternavi platzieren und die Artikelliste (z. B. bei der Smartphoneansicht) vor dem Inhalt setzen. Oder besteht die Möglichkeit die Artikelliste als Unternavigation (Stufe 2) unter die Stufe 1 zu integrieren?

Hoffe ich drück mich da verständlich aus und danke euch für eure Inputs.
Twitt

[folkfreund]

Hallo Twitt,
Für die Desktop-Ansicht hast du also schon zwei Navigationen, unter dem Header iund in der Sidebar.
Ich finde immer, dass die normalen Navigationen, v.a. mit Unterebenen, viel zu viel Platz in einer Mobile-Ansicht verbrauchen. Darum setze ich gerne für diesen Fall mmenu ein. Entweder lieferst du komplett unterschiedliche Layouts für Desktop und Mobile aus, oder du machst das einfach per Mediaquery von der Fenstergröße des Browsers abhängig. Dann kann man per CSS mal die Desktop-Navigation(en) und mal das mmenu einblenden. Das beherrscht auch mehrere Unterebenen - sollte also für deinen Fall passen.

Gruß, folkfreund

[hippo]

Wir haben gerade eine tolle Seite mit vielen responsive Elementen gebaut, und dafür foundation 5 genutzt. Damit lassen sich Inhalte bei Änderung des Gerätes/Bildschirmgröße beliebig verschieben/einblenden/ausblenden. Menüs sind natürlich uch möglich. Das fuktioniert auch schon alles auf der foundation Seite (sieht man, wenn man mal den Browser zusammenschiebt). Finde das ist ein sehr mächtiges Tool.

Vielleicht hilft dir das.

Viele Grüße
hippo

[Twitt]

Hallo folkfreund
Danke dir für deinen Ansatz zu mmmenu. Wollte dies anfänglich eigentlich nur mit CSS und der Pseudoklasse (target, glaub ich...) lösen. Die Geschichte mit foundation5 klingt ebenfalls interessant. Ich als Newbie hab aber (noch) meine Probleme mit Verständnis und Einbindung in Contao.

Habe bisher nicht mit mmenu gearbeitet. Kann ich da auch zur eigentlich Navigation auch noch die Artikellisten mitreinnehmen?

Hallo Twitt,
...Das beherrscht auch mehrere Unterebenen - sollte also für deinen Fall passen.

Gruß, folkfreund

[folkfreund]

Guten Morgen. Ich bemerke gerade, dass du keine Antwort auf deine eigentliche Frage bekommen hast.
Wie du deine Navigation bei Mobilgeräten anordnest, das hängt natürlich sehr von deren Umfang ab. Wahrscheinlich darum hast du auch nur Tipps für Responsive-Hilfsmittel bekommen. Die Designentscheidung liegt bei dir.

Ob du deine 'Artikelliste' auch mit mmenu umsetzen kannst, das hängt sehr davon ab wie du sie realisiert hast. Was verbirgt sich dahinter - ein Shop, einfache Unterseiten Level 2, sonst irgendwas?
mmenu bildet so wie die normale Contao-Navigation den Seitenbaum in einem Menü ab, das normalerweise bis auf einen kleinen Link (z.B. mmenu.png unsichtbar ist. Es kann über diesen Link (oder eine Wischgeste) eingeblendet werden. Der Vorteil: dein eigentlicher Inhalt ist sofort ohne Scrollen sichtbar, der Platz wird nicht durch ein Menü belegt.
Wenn du also unter 'Artikelliste' Seiten in deinem Seitenbaum verstehst, dann kannst du das direkt umsetzen. Du kannst es z.B. auf meiner Seite (folkfreun.de) sehen, wenn du das Browserfenster klein machst. Ich habe allerdings nur eine Unterebene, aber das Prinzip wird sicher trotzdem klar.

[Twitt]

Salut folkfreund
Merci für deine Aufmerksamkeit. Ich habe im Anhang eine optische Aufzeichnung der Navigation erstellt. Ich denke das macht mehr Sinn fürs Verständnis.

... Wie du deine Navigation bei Mobilgeräten anordnest, das hängt natürlich sehr von deren Umfang ab. Wahrscheinlich darum hast du auch nur Tipps für Responsive-Hilfsmittel bekommen. Die Designentscheidung liegt bei dir.
Ob du deine 'Artikelliste' auch mit mmenu umsetzen kannst, das hängt sehr davon ab wie du sie realisiert hast. Was verbirgt sich dahinter - ein Shop, einfache Unterseiten Level 2...
... Wenn du also unter 'Artikelliste' Seiten in deinem Seitenbaum verstehst, dann kannst du das direkt umsetzen.

Die Artikelliste wäre quasi Level 3 der Navigation.
Nebenbei: die "Hilfsnavi" würde ich im Header (sollte dann Platz sein) platziert lassen. Wenn ich das so richtig verstehe, sollte dies umsetzbar sein.
Was mir noch nicht ganz klar ist, wie ich die Artikelliste zusammen mit der Navigation ins mmenu bringe?

Besten Dank für deine Hilfe.

[folkfreund]

Gute Idee mit der Übersicht! Der Begriff 'Artikel' ist ja tatsächliche mehrdeutig .

Dennoch bin ich nicht sicher, ob ich das jetzt richtig verstanden habe. Verlinken die Artikellinks im Menü nur auf Anker auf derselben Seite? Dann sind die dort sichtbaren 'Artikel' eher Content-Elemente? Oder Teaser für Artikel? Oder hast du tatsächlich viele Artikel auf jeweils einer Seite plaziert?
Welchen Modultyp hat das 'Modul Artikelliste' - 'Artikelliste' oder 'Globale Artikelliste'?

Mit diesen Modulen habe ich noch nicht gearbeitet. Vermutlich kann das dann nicht ohne Weiteres in mmenu eingebunden werden, da die Menüpunkte dann ja nicht direkt aus der Seitenstruktur gebildet werden. Aber vielleicht gibt es einen Hook, über den man das beeinflussen kann... Da kenn ich mich leider nicht genug mit den mmenu-Interna aus.

Noch eine andere Idee: Vielleicht kann man das Template für die Artikelliste ja auf eine Combobox umbauen. Die braucht dann nicht so viel Platz im Mobile-Layout. Dann könnte sie außerhalb des mmenu bleiben.

[Twitt]

Gute Idee mit der Übersicht! Der Begriff 'Artikel' ist ja tatsächliche mehrdeutig .
Dennoch bin ich nicht sicher, ob ich das jetzt richtig verstanden habe. Verlinken die Artikellinks im Menü nur auf Anker auf derselben Seite? Dann sind die dort sichtbaren 'Artikel' eher Content-Elemente? Oder Teaser für Artikel? Oder hast du tatsächlich viele Artikel auf jeweils einer Seite plaziert?
Welchen Modultyp hat das 'Modul Artikelliste' - 'Artikelliste' oder 'Globale Artikelliste'?

Ja das hast du richtig verstanden. Die Artikellinks sind nur zum Erreichen der Anker.
Ich habe einzelne Artikel für "Kontakt 2" und "Kontakt 3" angelegt. (ist denn die Umsetzung so verkehrt oder könnte man das eleganter lösen)
Es handelt sich um das Modul "Artikelliste"

Mit diesen Modulen habe ich noch nicht gearbeitet. Vermutlich kann das dann nicht ohne Weiteres in mmenu eingebunden werden, da die Menüpunkte dann ja nicht direkt aus der Seitenstruktur gebildet werden. Aber vielleicht gibt es einen Hook, über den man das beeinflussen kann... Da kenn ich mich leider nicht genug mit den mmenu-Interna aus.

Darum meine Frage hier im Forum. Mir war nicht klar wie ich dann die Artikellisten in die Navigation bei mmenu bringe ;-) Und ich fand nirgends einen Hinweis, dass ich im Navigationsmodul Anker ansteuern könnte.

Noch eine andere Idee: Vielleicht kann man das Template für die Artikelliste ja auf eine Combobox umbauen. Die braucht dann nicht so viel Platz im Mobile-Layout. Dann könnte sie außerhalb des mmenu bleiben.

Guter Ansatz. Dies meinte ich weiter oben mit dem Hinweis die Artikelliste in die Inhaltsspalte zu platzieren. Im Moment steh ich aufm Schlauch, was ist eine Combobox?

[folkfreund]

Im Moment steh ich aufm Schlauch, was ist eine Combobox?

Sorry, ich meine so eine Dropdown-Box oder wie heißt das... Ähnlich dem Punkt 'Nützliche Links' hier oben im Forum. Das müsste so ähnlich gehen wie bei anderen Dropdown-Navigationen.

(ist denn die Umsetzung so verkehrt oder könnte man das eleganter lösen)

Nee, verkehrt gibt es in diesem Zusammenhang nicht. Zumindest kommst du so sehr elegant an die Artikelliste. Eine andere/bessere Lösung fällt mir gerade auch nicht ein. Diese hat nur leider den Nachteil, dass die Anker nicht mit einer 'normalen' Navigation erreichbar sind.

Wenn mir noch etwas einfällt, dann werde ich schreiben.

Gruß, folkfreund

[Twitt]

Sorry, ich meine so eine Dropdown-Box oder wie heißt das... Ähnlich dem Punkt 'Nützliche Links' hier oben im Forum. Das müsste so ähnlich gehen wie bei anderen Dropdown-Navigationen.

Eine Dropdown-Navi meinst du. Ich überleg mir gerade ob es das bei der mobilen Version überhaupt noch braucht? Man scrollt ja allgemein auch bei anderen Websites. Den Luxus des "Anspringens" hätte man einfach in der Desktopversion :-).

Nee, verkehrt gibt es in diesem Zusammenhang nicht. Zumindest kommst du so sehr elegant an die Artikelliste. Eine andere/bessere Lösung fällt mir gerade auch nicht ein. Diese hat nur leider den Nachteil, dass die Anker nicht mit einer 'normalen' Navigation erreichbar sind.

Gäbe es denn eine Lösung wo die Anker mit einer "normalen" Navigation erreichbar sind?

Wenn mir noch etwas einfällt, dann werde ich schreiben.

So oder so danke dir für deine Hilfe und Feedbacks.
Twitt