Navigation



Die mit den Navigationstool erstellten Navigationsstrukturen können mit folgenden Tags ausgegeben werden:

^ we:tag ^ Zweck ^
| ''[[https://tags.webedition.org/navigation|<we:navigation>]]'' | Initialisiert die Navigation |
| ''[[https://tags.webedition.org/navigationEntry|<we:navigationEntry>]]'' | Steuert die Ausgabe der Einträge |
| ''[[https://tags.webedition.org/navigationEntries|<we:navigationEntries>]]'' | Gibt die im aktuellen Navigationspunkt enthaltenen Einträge aus |
| ''[[https://tags.webedition.org/:navigationField|<we:navigationField>]]'' | Gibt den Wert eine Navigationsfeldes aus (z.B. Titel) |
| ''[[https://tags.webedition.org/navigationWrite|<we:navigationWrite>]]'' | Gibt die generierte Navigationsstruktur aus |

Wichtig zu verstehen ist, dass die Navigation aus Definitionen für verschiedene Zustände dynamisch zusammengebaut wird. Die Ausgabe der Navigationseinträge wird dabei über das Tag ''<we:navigationEntry>'' entweder global oder für definierte Zustände (z.B. aktiver Navigationseintrag der 1. Ebene) festgelegt (sh. [[#zweistufige-navigation|Code-Beispiel 2]]).

<note tip>Im Menü "Module" -> "Navigation" wir die Navigationsstruktur angelegt. Über den Reiter "Vorschau" kann die Navigation und der generierende Code angezeigt werden.</note>


Beispiele



Einfache Navigation


Der Code im folgenden Beispiel gibt nur Navigationseinträge (Ordner) der ersten Ebene aus.

<box 100% round blue|Beispiel #1: Einfache Navigation>
<code xml>
<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>

<we:comment> Ausgabe des aktiven Navigationelements in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="true">
<li>
<a class="is-active" href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Ausgabe der inaktiven Navigationelemente in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="false">
<li>
<a href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Generierte Navigation ausgeben <we:comment>
<we:navigationWrite navigationname="navMain"/>

</code>
</box>

<note important>''\$n_main'' steht für den übergeordneten Navigationseintrag und muss vorab definiert werden. Wird ''parentid'' nicht gesetzt, werden die Einträge aus der obersten Navigationsebene (''id="0"'') ausgegeben.</note>


Zweistufige Navigation


Um im aktiven Navigationspunkt der ersten Ebene die zweite Navigationsebene auszugeben, muss das Beispiel von oben wie folgt erweitert werden.

<box 100% round blue|Beispiel #2: Zweistufige Navigation>
<code xml>
<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>

<we:comment> Ausgabe des aktiven Navigationelements in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="true">
<li>
<a class="is-active" href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>

<we:comment> Navigationspunkte der 2. Ebene ausgeben </we:comment>
<ul class="nav_submenu"><we:navigationEntries /></ul>
</we:navigationEntry>

<we:comment> Ausgabe der inaktiven Navigationelemente in der ersten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="1" current="false">
<li>
<a href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Ausgabe des aktiven Navigationelements in der zweiten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="2" current="true">
<li>
<a class="is-active" href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Ausgabe der inaktiven Navigationelemente in der zweiten Ebene <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" level="2" current="false">
<li>
<a href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Generierte Navigation ausgeben <we:comment>
<we:ifHasCurrentEntry>
<we:navigationWrite navigationname="navMain"/>
</we:ifHasCurrentEntry>

</code>
</box>

Mehrstufige Navigation


Um eine einfache mehrstufige Navigation zu definieren, kann folgender Code verwendet werden:

<box 100% round blue|Beispiel #3: Mehrstufige Navigation>
<code xml>
<we:comment> Navigation "navMain" initialisieren <we:comment>
<we:navigation navigationname="navMain" parentid="\$n_main"/>

<we:comment> Ausgabe des aktiven Navigationelements für alle Ebenen <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" current="true">
<li>
<a class="is-active" href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>

<we:comment> Navigationspunkte der untergeordneten Ebene ausgeben </we:comment>
<ul class="nav_submenu"><we:navigationEntries /></ul>
</we:navigationEntry>

<we:comment> Ausgabe der inaktiven Navigationelemente für alle Ebenen <we:comment>
<we:navigationEntry type="folder" navigationname="navMain" current="false">
<li>
<a href="<we:navigationField name="href"/>">
<we:navigationField name="text"/>
</a>
</li>
</we:navigationEntry>

<we:comment> Generierte Navigation ausgeben <we:comment>
<we:navigationWrite navigationname="navMain" depth="4"/>

</code>
</box>

<note tip>Über das Attribut ''depth="4"'' in ''<we:navigationWrite/>'', wird die Ausgabe auf maximal 4 Navigationsebenen beschränkt.</note>
powered by webEdition CMS