Navigation

webEdition bietet eine leistungsstarke Navigation, die unabhängig von der Seitenstruktur funktioniert. Sie wird über das eigene Modul gepflegt.

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

<we:navigation> Initialisiert die Navigation 
<we:navigationEntry> Steuert die Ausgabe der Einträge
<we:navigationEntries> Gibt die im aktuellen Navigationspunkt enthaltenen Einträge aus
<we:navigationField> Gibt den Wert eine Navigationsfeldes aus (z.B. Titel)
<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. Klingt komplizierter als es ist, siehe die Beispiele weiter unten.

Insider-Tipp: Im Menü "Module" -> "Navigation" wir die Navigationsstruktur angelegt. Über den Reiter "Vorschau" kann die Navigation und der generierende Code angezeigt werden.


Beispiele



Beispiel 1: Einfache Navigation


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

<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"/>

Wichtig: ''\$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.


Beispiel 2: Zweistufige Navigation


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

<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>


Beispiel 3: Mehrstufige Navigation


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

<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"/>


Hinweis: Über das Attribut depth="4" in ''<we:navigationWrite/>'', wird die Ausgabe auf maximal 4 Navigationsebenen beschränkt.

powered by webEdition CMS