"Abgespeckte" Navigation für mobile Seite

[Uwe367]

Hallo allerseits,
Ich möchte daß die Navigation für eine mobile Seite auf das nötigste reduziert wird während die Desktopvariante die Navigation für alle Unterseiten behalten soll. Wie mache das am besten? Ich kann ja im RT von NAV_LIST_UL keine Seiten in der mobilen Version ausklammern.
Ich war schon am überlegen mit dem RT <!--if:mobile-->...<!--/if:mobile--> zu arbeiten, aber damit komme ich ja auch nicht an die Navigation ran.
Einzige Idee die ich nun hätte wäre daß ich die Ebenen ID rendern lasse und dann enstprechendes CSS, z.B.

Code: Select all

cat1{ 
display: none;
}

darauf ansetze und das in den RT <!--if:mobile-->...<!--/if:mobile--> packe und so die Unterseite in der mobilen Ansicht ausblende.
Nachteil ist natürlich daß ich dann für jede Ebene, die ich ausblenden will, eine eigene CSS ID anlegen muß aber mir fällt momentan nix anderes ein oder sehe icn mal wieder den Wald vor lauter Bäumen nicht?

[Old Boy]

du kannst ja vielleicht in die Kategorie eine CSS Klasse einfügen.

Die wird ja in die NAV-LIST_UL übernommen

Und dann die entsprechenden Kategorien/Artikel durch Ansprechen in der CSS-Datei abschalten?

[Uwe367]

du kannst ja vielleicht in die Kategorie eine CSS Klasse einfügen.

Ja schon, aber das wirkt sich dann auch auf die Desktopversion aus da ich in diesem Feld nicht deklarieren kann in welcher Version die ausgeblendet werden soll.

Meine Idee würde in der Praxis so aussehen:
Beispielstruktur:
+Home
++Seite1
++Seite2
+++Seite 2-1
++Seite3

Als erstes sorge ich dafür daß die Category ID´s gerendert werden. Dazu hier mehr
Nun soll Seite 2-1 in der mobilen Version augeblendet werden. Dazu lege ich eine CSS Datei an, z.B. mobile_hidden_categories.css.
In diese schreibe ich welche Ebenen in der mobilen Version ausgeblendet werden sollen, also z.B

Code: Select all

#cat3{ 
display: none;
}

In der mobilen Version lasse ich dann diese CSS Datei laden.

Code: Select all

<!--if:mobile--><!-- CSS:{TEMPLATE}inc_css/mobile_hidden_categories.css --><!--/if-->

Sollte doch klappen oder?

[Oliver Georgi]

Normalerweise regelt man das mit @media, nach dem Prinzip Mobile First.

Code: Select all

ul > li > ul {
    display: none;
}
@media screen and (min-width: 768px) { 
    ul > li > ul {
        display: block;
    }
 }

[Uwe367]

Stimmt Oliver, Danke.
Ich sagte ja.. ich seh wahrscheinlich den Wald vor lauter Bäumen nicht mehr.