Position Add/Odd für Navigation

[MartinP]

Hallo meine lieben,

für eine Responsive Version möchte ich ab einer bestimmten Breite der Darstellung ein Menü Zweispaltig machen. Dafür möchte ich jedem zweiten NavigationEntry eine Klasse geben. Leider ist das ifPosition Tag nicht auf Navigations, sondern nur auf Blocks und Listviews ausgelegt.

TRICK 17 !

Ich habe einfach den NavigationEntry Tag kopiert und ein zweites mal hinzugefügt. Dann habe ich ihm den Attribut position mit dem Attributwert "odd" hinzugefügt und in der Ausgabe bestimmt, dass die Klasse "rechts" ausgegeben werden soll. Und siehe da - jeder zweite Eintrag hat die Klasse "rechts". Das ganze muss man dann natürlich auch noch für den active Zustand bzw. current="true" machen. Ich hoffe ich kann damit dem einen oder andere weiterhelfen

<we:navigation navigationname="mitgliedernavi" parentid="7" />

<we:navigationEntry type="folder" navigationname="mitgliedernavi" current="false">
<li><a href="<we:navigationField name="href" />"><we:navigationField name="name" /></a></li>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="mitgliedernavi" current="false" position="odd">
<li class="rechts"><a href="<we:navigationField name="href" />"><we:navigationField name="name" /></a></li>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="mitgliedernavi" current="true">
<li><a href="<we:navigationField name="href" />" class="aktiv"><we:navigationField name="name" /></a></li>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="mitgliedernavi" current="true" position="odd">
<li class="rechts"><a href="<we:navigationField name="href" />" class="aktiv"><we:navigationField name="name" /></a></li>
</we:navigationEntry>

[netzlum]

Hallo MartinP,
danke für das Beispiel. Darf ich das beizeiten in die Tagreferenz als Codebeispiel aufnehmen?

Grüße
Ludger

[MartinP]

Gerne

EDIT: Vielleicht kannst du mal den Titel desThemas zu Even/Odd ändern Fehler meinerseits - nur damit es auch mit den richtigen Suchbegriffen gefunden wird

[WBTMagnum]

Hi,

Zur Info:
Eine reine CSS Lösung mit den Pseudo-Classes even und odd ist meiner Ansicht nach auch möglich (sh. http://stackoverflow.com/questions/5080 ... list-items). Je nach Anwendungsfall könnte man auch CSS columns verwenden.

Hängt natürlich stark davon ab, für welche Browser man optimieren muss.

LG,
Sascha

[MartinP]

Man optimiert ja in 90% der Fälle wohl nicht für einen Browser. Ich denke, dass ALLE neuen BrowserVersionen das unterstützen. Nach meinen Infos selbst der IE, ab Version 9. Aber Fakt ist ja, dass man sich nicht darauf verlassen kann, dass ein Großteil der User seinen Broser auf aktuellem Stand hält. Gerade was IE angeht, da natürlich Version 9 erst mit Vista oder 7 (ich bin mir nicht sicher) verfügbar ist. Und CSS Columns haben nicht den gleichen Effekt.

Mein Beispiel macht aus:

1
2
3
4
5
6

Folgendes:

1 2
3 4
5 6

CSS Columns bringen dieses Ergebnis:

1 4
2 5
3 6

[WBTMagnum]

Man optimiert ja in 90% der Fälle wohl nicht für einen Browser. Ich denke, dass ALLE neuen BrowserVersionen das unterstützen. ....

"für welche Browser" -> Plural ! Für manche Projekte muss man halt auch sehr alte Versionen voll unterstützen. Da hat man mit einer reinen CSS Version natürlich kein Leiberl.

Und CSS Columns haben nicht den gleichen Effekt.

Genau! Daher habe ich auch geschrieben "Je nach Anwendungsfall". Mit den Pseudo-Classes ":even" und ":odd" kannst du aber genau dein Szenario abdecken.


LG,
Sascha