Navigation: mehrere aktive Zustände

[stas]

Hallo!
Es geht um eine 3-stufige Navigation. Die aktiven Links sollen hervorgehoben werden und bis hier komme ich auch klar. Nun möchte ich in der 3. Stufe dem übergeordneten Punkt eine andere CSS-Klasse zuweisen, damit man eine Unterscheidung zwischen einem aktiven und einem geöffneten Link sieht.

Gibt es bei webEdition die Möglichkeit einem Navigationspunkt mehrere Zustände zuzuweisen?

Damit habe ich meine Unternavigation erzeugt:

Code: Alles auswählen

<we:navigation navigationname="subnavi" parentid="1" />

<we:navigationEntry navigationname="subnavi" type="item" level="1"></we:navigationEntry>
<we:navigationEntry navigationname="subnavi" type="folder" level="1"></we:navigationEntry>

<we:navigationEntry type="folder" navigationname="subnavi" current="true" level="1">
  <we:ifHasEntries>
          <ul>
    <we:navigationEntries />
          </ul>
  </we:ifHasEntries>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="subnavi" level="2">
  <li><a href="<we:navigationField name="href" />" <we:navigationField attributes="target" />><we:navigationField name="text" /></a></li>
</we:navigationEntry>

<we:navigationEntry type="folder" navigationname="subnavi" current="true" level="2">
<li class="active"><a href="<we:navigationField name="href" />"<we:ifNotHasEntries> class="active"</we:ifNotHasEntries>><we:navigationField name="text" /></a>
<we:ifHasEntries><ul><we:navigationEntries /></ul></we:ifHasEntries>
</li>
</we:navigationEntry>

<we:navigationEntry type="item" navigationname="subnavi">
  <li><a href="<we:navigationField name="href" />"><we:navigationField name="text" /></a></li>
</we:navigationEntry>

<we:navigationEntry type="item" navigationname="subnavi" current="true">
  <li class="active"><a class="active" href="<we:navigationField name="href" />"><we:navigationField name="text" /></a></li>
</we:navigationEntry>

<we:navigationWrite navigationname="subnavi" />

Ich hoffe, das war soweit verständlich.

[haydi]

Huhuu,

also du möchtest nur dann dem übergeordneten punkt eine andere klasse zuweisen, wenn der navipunkt der dritten ebene aktiv ist sozusagen?
der übergeordnete punkt ist dann ja auch automatisch aktiv und hat kann eine entsprechende klasse haben, aber das reicht dir nicht, ja?

zum verdeutlichen...

das reicht dir nicht?
- navipunkt class="aktiv"
- subnavi class="nichtaktiv"
- subnavi class="nichtaktiv"

- navipunkt class="aktiv"
- subnavi class="aktiv"
- subnavi class="nichtaktiv"

... das ginge mit webEdition.

du möchtest:

- navipunkt class="aktiv"
- subnavi class="nichtaktiv"
- subnavi class="nichtaktiv"

- navipunkt class="aktiv_v2"
- subnavi class="aktiv"
- subnavi class="nichtaktiv"

ja?

dann würde ich es mit JavaScript (bspw. jQuery) lösen...

viele grüße
haydi

[stas]

Nein, nicht ganz. So sollte es aussehen:

- navipunkt class="aktiv"
- subnavi class="aktiv"
- subnavi class="nichtaktiv"

- navipunkt class="aktiv"
- subnavi class="offen"
- subnavi class="aktiv"

Leider ist JS nicht grad meine Stärke. Gibt's dazu vielleicht ein Beispiel?

[WBTMagnum]

Hallo Stas,

Schau dir mal das Tag <we:ifhascurrententry>/ http://documentation.webedition.org/wik ... rrententry an. Damit kannst du im <we:navigationEntry type="folder" current="true" ...>/ überprüfen, ob der aktive Navigationspunkt tiefer liegt. Falls ja, dann kannst du eine eigene CSS-Class für den aktuellen Navigationspunkt setzen. Falls nein, ist der aktuelle Navigationspunkt der aktive.

Ich hoffe das hilft dir weiter.


Liebe Grüße,
Sascha

[stas]

DAS wird's wohl sein! Danke für den Tipp, werd's gleich ausprobieren...

Edit:
Und schon funktioniert's, hier meine Änderung:

Code: Alles auswählen

<we:navigationEntry type="folder" navigationname="subnavi" current="true" level="2">
<we:ifHasCurrentEntry>
<li class="open"><a href="<we:navigationField name="href" />"<we:ifNotHasEntries> class="active"</we:ifNotHasEntries>><we:navigationField name="text" /></a>
<we:ifHasEntries><ul><we:navigationEntries /></ul></we:ifHasEntries>
</li>
<we:else/>
<li class="active"><a href="<we:navigationField name="href" />"<we:ifNotHasEntries> class="active"</we:ifNotHasEntries>><we:navigationField name="text" /></a>
<we:ifHasEntries><ul><we:navigationEntries /></ul></we:ifHasEntries>
</li>
</we:ifHasCurrentEntry>
</we:navigationEntry>

Vielen Dank nochmal!