webEdition: Navigation mit 2 Ebenen

webEdition bietet das Navitool an, das unter “Extras”->”Navigation” zu finden ist. Mit diesem Navitool kann unabhängig vom Seitenbaum eine Navigation erstellt werden [Bild 1].

Anhand dieses Navitools können Navigationseinträge auf webEdition Dokumente erstellt werden. Um die Navigationseinträge anschließend wieder auszugeben, kann ein Template includiert werden. Das Template kann komplett mit we:tags erstellt werden. Das gute an dieser Navigation: man hat volle Kontrolle über den ausgegebenen Code. Die Ausgabe der Navigation kann so ohne Probleme an den jeweiligen Bedarf angepasst werden [Bild 2].

Wichtig in diesem Beispiel ist das im Navitool keine Einträge, sondern Ordner erstellt werden. Das erspart beim Ausbau auf weitere Ebenen Probleme. Das Template in diesem Beispiel ist wie so aufgebaut:

  <we:navigation navigationname="default"  parentid="1">

Zuerst wird festgelegt wie die Navigation benannt werden soll. Da in webEdition das Erzeugen der Navigation und die Ausgabe an zwei verschiedenen Punkten geschieht, wird später bei der Ausgabe auf diesen Namen zurück gegriffen. parentid=”1″ gibt an, welche ID der Startordner der Navigation im Navitool hat. Wen man mit der Maus über einen Ordnereintrag im Navitool fährt, erscheint im unteren Bereich des Fensters die ID.

<? // ----  Navi normal 1. ebene start ----- // ?>
    <we:navigationEntry type="folder" level="1" navigationname="default">
      <li class="navilink"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a></li>
    </we:navigationEntry>
<? // ----  Navi normal 1. ebene ende ----- // ?>

Hier wird die erste Ebene der Navigation erstellt. Dieses Menü hat den Zustand “inaktiv”. Zusätzlich kann die Navigation im aktiven Zustand anders ausgeben werden. Dafür ist current=”true” verantwortlich:

<? // ----  Navi normal 1. ebene aktiv start ----- // ?>
    <we:navigationEntry type="folder" level="1" navigationname="default" current="true">
        <li class="navilinkaktiv"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a>
          <we:ifHasEntries><ul class="subnavi"><we:navigationEntries /></ul></we:ifHasEntries>
        </li>
    </we:navigationEntry>
<? // ----  Navi normal 1. ebene aktiv ende ----- // ?>

Hier wird eine andere CSS Klasse für den aktiven Navigationspunkt verwendet. Ausserdem wird abgefragt, ob der aktuell aktive Navigationspunkt weitere Navigationseinträge enthält. we:ifHasEntries kann auch bei einem nicht aktiven Navipunkt verwendet werden. Dann ist die Navigation immer komplett ausgeklappt.

Nachdem nun die erste Ebenen ausgegeben ist, kommt die zweite Ebene. Der Aufbau ist identisch, lediglich die Angabe level=”1″ wird auf level=”2″ geändert:

<? // ----  Navi normal 2. ebene start ----- // ?>
    <we:navigationEntry type="folder" level="2" navigationname="default">
        <li class="subnavilink"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a></li>
    </we:navigationEntry>
<? // ----  Navi normal 2. ebene ende ----- // ?>

<? // ----  Navi normal 2. ebene aktiv start ----- // ?>
    <we:navigationEntry type="folder"  level="2" navigationname="default" current="true">
        <li class="subnavilinkaktiv"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a><we:ifHasEntries><ul class="subnavi"><we:navigationEntries /></ul></we:ifHasEntries></li>
    </we:navigationEntry>
<? // ----  Navi normal 2. ebene aktiv ende ----- // ?>

Nachdem nun beide Menülevels mit aktiven und inaktiven Zustand erfasst sind, kommt die eigentliche Ausgabe der Navigation:

<? // ----  Ausgabe start ----- // ?>

<ul id="navi">
  <we:navigationWrite navigationname="default" depth="2">
</ul>

Wenn später weitere Ebenen dazukommen, muss hier der Wert depth=”2″ entsprechend angepasst werden.

Hier noch einmal das komplette Template im Überblick:

  <we:navigation navigationname="default"  parentid="1">

<? // ----  Navi normal 1. ebene start ----- // ?>
    <we:navigationEntry type="folder" level="1" navigationname="default">
      <li class="navilink"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a></li>
    </we:navigationEntry>
<? // ----  Navi normal 1. ebene ende ----- // ?>

<? // ----  Navi normal 1. ebene aktiv start ----- // ?>
    <we:navigationEntry type="folder" level="1" navigationname="default" current="true">
        <li class="navilinkaktiv"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a>
          <we:ifHasEntries><ul class="subnavi"><we:navigationEntries /></ul></we:ifHasEntries>
        </li>
    </we:navigationEntry>
<? // ----  Navi normal 1. ebene aktiv ende ----- // ?>

<? // ----  Navi normal 2. ebene start ----- // ?>
    <we:navigationEntry type="folder" level="2" navigationname="default">
        <li class="subnavilink"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a></li>
    </we:navigationEntry>
<? // ----  Navi normal 2. ebene ende ----- // ?>

<? // ----  Navi normal 2. ebene aktiv start ----- // ?>
    <we:navigationEntry type="folder"  level="2" navigationname="default" current="true">
        <li class="subnavilinkaktiv"><a href="<we:navigationField name="href">" title="<we:navigationField name="display">"><we:navigationField name="text" /></a><we:ifHasEntries><ul class="subnavi"><we:navigationEntries /></ul></we:ifHasEntries></li>
    </we:navigationEntry>
<? // ----  Navi normal 2. ebene aktiv ende ----- // ?>

<? // ----  Ausgabe start ----- // ?>

<ul id="navi">
  <we:navigationWrite navigationname="default" depth="2">
</ul>

Bildmaterial:

BIld 1: Navitool Eingabe

Bild 2: Ausgabe der Navigation

Sonstiges:

Relevante andere Beiträge

• webEdition: Sitemap anhand der Navigation erstellen
• webEdition: Klick-Vergrössern Funktion mit Multibox
• webEdition: Glossarfunktion mit einer Listingseite
• webEdition: Sitemap aller Dokumente als Liste erstellen
• webEdition: php innerhalb eines we:block benutzen
• webEdition: Beschreibung des we:block tag
• webEdition: Einfaches erzeugen und verwalten von Thumbnails
• we:tag webEdition: Bei we:listview entsprechende Meldung wenn keine Einträge gefunden wurden
• WebEdition 6 Beta wurde veröffentlicht
• webEdition: Benutzen von Dokumententypen