"Abgespeckte" Navigation für mobile Seite

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
Uwe367
Posts: 992
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

"Abgespeckte" Navigation für mobile Seite

Post by Uwe367 » Sun 3. Mar 2019, 17:27

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
Posts: 1113
Joined: Fri 23. Nov 2012, 13:52

Re: "Abgespeckte" Navigation für mobile Seite

Post by Old Boy » Sun 3. Mar 2019, 17:45

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

Die wird ja in die NAV-LIST_UL übernommen :idea:

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

User avatar
Uwe367
Posts: 992
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: "Abgespeckte" Navigation für mobile Seite

Post by Uwe367 » Sun 3. Mar 2019, 18:09

Old Boy wrote:
Sun 3. Mar 2019, 17:45
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?
Last edited by Uwe367 on Sun 3. Mar 2019, 19:48, edited 1 time in total.

User avatar
Oliver Georgi
Site Admin
Posts: 9568
Joined: Fri 3. Oct 2003, 22:22
Location: Moscow, Russia
Contact:

Re: "Abgespeckte" Navigation für mobile Seite

Post by Oliver Georgi » Sun 3. Mar 2019, 18:34

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;
    }
 }
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Систрон

User avatar
Uwe367
Posts: 992
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: "Abgespeckte" Navigation für mobile Seite

Post by Uwe367 » Sun 3. Mar 2019, 19:49

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

Post Reply