Mobile Navigation mit allen Sub-Levels zu lang

Hallo zusammen,

nachdem ich meine Website ausgebaut habe (Toplevel 7 Punkte, mehrere haben 3-4 Level 2 Einträge), stelle ich jetzt fest, dass das mobile Menü doch ziemlich länglich wird, weil alle Menü-Punkte angezeigt werden. Kann man in der mobilen Variante einstellen, dass (wie in der Desktop-Variante) nur die Unterpunkte der aktuellen Seite angezeigt werden? Ich hab schon mit den Angaben für die Start- und Stop-Levels rumgespielt, aber das gewünschte Ergebnis bisher nicht hinbekommen.

Sollte ich das nicht hinbekommen, tendiere ich dazu die Level-2 Seiten in der Navigation zu verbergen, damit das mobile Menü übersichtlich bleibt, aber das kann ja eigentlich nicht der Weg sein...

Oder gibt es gar völlig andere Ansätze, um die mobile Navigation besser nutzbar zu machen?

Dankbar für jeden Input
robinhutter <><

Du kannst doch mit CSS die Sublevels der nicht aktiven Seiten ausblenden.

:D Hatte ich vergessen zu sagen, dass ich Contao-Novize und CSS-Laie bin? DU kannst das vielleicht. ;) Ich (bisher) noch nicht. Aber vielleicht hast Du mir einen Hinweis, wo ich mich schlau machen kann oder kannst mir gar selbst ein bisschen dazu sagen? Ich weiß, es gibt viel Material da draußen, aber es ist alles sehr unübersichtlich, wenn man sich nicht wirklich auskennt und weiß, wo man nach was suchen muss. Und das tue ich (noch) nicht. :o

Etwas genaues kann man dir ohne Link zur Seite schlecht sagen.

Wenn es darum geht, "die Sublevels der nicht aktiven Seiten auszublenden", brauchst du CSS Basics. Da gibt es unzählige Kurse im Internet, viele empfehlen z.b. little-boxes.de

Du musst halt lernen wie eine CSS-Anweisung aufgebaut ist, mit welchen Eigenschaften du etwas ausblenden kannst und vor allem welchen Selektor (=welches Element) du ansprechen musst.

In deinem Fall könnte es etwa in diese Richtung gehen:

Code:

---

.meine-navigation ul ul {
  display: none;
}

---

Damit würdest du alle <ul> Elemente ab Level 2 ausblenden und ihre einzelnen Listenpunkte somit auch.

Da Contao viele Klassen automatisch generiert, z.B. "active" für den aktiven Menüpunkt, kannst du darüber die Subnavigation wieder einblenden:

Code:

---

.meine-navigation ul li.active ul {
  display: block;
}

---

Ein Link zur Seite wäre nicht schlecht. Zusätzlich würde ich mir aber generell auch Gedanken zum Aufbau der Seite machen. 6 oder 7 Level finde ich schon arg viel. Das zu beurteilen geht aber nicht ohne die Seite zu sehen.

Bei einer Navigation mit 4. Level stehen mir ohnehin leicht die Nackenhaare zu Berge. Als Besucher einer Seite hab ich dann meist schon die Hasskappe auf.
In vielen Fällen ist das auch mit einem durchdachten Konzept vermeidbar.

Zitat:

---

Zitat von robinhutter

https://community.contao.org/de/imag...es/biggrin.png Hatte ich vergessen zu sagen, dass ich Contao-Novize und CSS-Laie bin? DU kannst das vielleicht. https://community.contao.org/de/images/smilies/wink.png Ich (bisher) noch nicht. Aber vielleicht hast Du mir einen Hinweis, wo ich mich schlau machen kann oder kannst mir gar selbst ein bisschen dazu sagen? Ich weiß, es gibt viel Material da draußen, aber es ist alles sehr unübersichtlich, wenn man sich nicht wirklich auskennt und weiß, wo man nach was suchen muss. Und das tue ich (noch) nicht. :o

---

Wie schon erwähnt vieles was Du fragst hat nichts mit Contao zu tun, sondern es handelt sich mehr oder weniger um css-Basics.
Das Anspruchsdenken des zitierten Satzes stösst mir gerade mächtig auf. Insbesondere zusammen mit den vielen Themen die Du gerade hier laufen hast. Da bekomme ich leider das Gefühl, dass Du die Communtity dazu benutzen willst Deinen kompletten Seitenaufbau zu bewerkstelligen.
Schon in einem anderen Thread hatte ich Dir empfohlen doch vielleicht mal ein Buch oder ein Video zu bemühen, dann ist da auch nichts unübersichtlich, sondern schön Schritt für Schritt an Hand von Beispielen erklärt. Warum nutzt Du solche Hinweise nicht? ;)

Für CSS und auch für Contao ist m.E. Peter Müller (u.a. Little Boxes) mit seinen zahlreichen Büchern und Videos eine gute Wahl.

Also erst mal vielen Dank für alle, die bereit sind hier Zeit zu investieren. Das hilft mir persönlich sehr. Und nur zur Klärung: Meine Seiten haben nicht 7 Level! Das war vielleicht ein wenig missverständlich formuliert. Es gibt maximal 2 Level. Ich meinte, dass mehrere Navigationspunkte auf Level 1 3-4 Einträge auf Level 2 haben. Also 7 mal Level 1 plus 3x3 = 9 Level-2-Einträge macht bei einer Navigation, in der alle Level offen sind schon 16 Punkte und das finde ich halt "unhandlich". Also: Ich bedanke mich nochmal für die vielen Tipps und missbrauche dieses Forum nicht dafür, dass Ihr meine Arbeit macht. Ich dachte halt, dass es vielleicht ein schnelles Kochrezept oder so gibt. :D Also wird jetzt erst mal die Schulbank gedrückt und CSS gelernt... Oder ich such mir jemanden, der das schon kann. :)

Oder wenn möglich ein Link zur Seite. Dann kann dir bestimmt jemand beim CSS-Problem helfen

Setze im Navigationsmodul das Startlevel auf 0 und das Stoplevel auf 1 OHNE hard limit, dann müsste das gewünschte Ergebnis kommen - ganz ohne nachträgliche CSS-Ausblendung.

Für die mobile Navigation kannst du auch mal die Erweiterung mobile_menu ausprobieren. Dort sind die aktuellen aufgeklappt und die anderen können aufgeklappt werden.

Das hört sich interessant an. Muss ich mal ausprobieren. Danke für den Tipp.