Sitemap als Tree-Chart

Dass eine Sitemap nicht unbedingt nur als einfache verschachtelte Liste dargestellt werden muss, habe ich ja bereits im Artikel "Coole Sitemaps durch CSS" gezeigt. Gestern ist mir dann noch eine andere Idee von Scott Jehl zur Darstellung über den Weg gelaufen: "StyleMap v2: HTML Visual Sitemap". Dabei besteht die Sitemap zwar hinter den Kulissen noch immer aus einer einfachen HTML-Liste, aber was mit Hilfe von CSS und JavaScript daraus gemacht wird ist echt erstaunlich:


Ich habe natürlich gleich ausprobieren müssen, ob dies auch mit dem CMS webEdition und dem Navigations-Tool möglich ist. Das Ergebnis: Ja!

In seinem Artikel zeigt Scott Jehl, wie man diese Darstellung mit und ohne JavaScript realisieren kann. Ich habe mir auch beide Varianten vorgenommen und zwei Vorlagen erstellt, welche den passenden HTML-Quellcode mit den Daten aus dem Navigations-Tool von webEdition generieren.

Vorlage für die Variante mit JavaScript:

<we:navigation navigationname="default" parentid="11" />

<we:navigationEntry type="folder" navigationname="default">
  <li><div><we:navigationField complete="link"/></div>
    <we:ifHasEntries><ul><we:navigationEntries/></ul></we:ifHasEntries>
  </li>
</we:navigationEntry>

<div id="contain">
  <ul id="sitemap">
    <we:navigationWrite navigationname="default"/>
  </ul>
</div>

Vorlage für die Variante ohne JavaScript ... etwas umfangreicher:

<we:navigation navigationname="default" parentid="11"/>

<!-- Allgemeine Definition für einen Navigations-Ordner -->
<!-- inkl. Unterscheidung, ob der Ordner weitere Unterordner enthält -->
<we:navigationEntry type="folder" navigationname="default">
  <li>
    <we:ifHasEntries>
      <div class="section"><we:navigationField complete="link"/></div>
      <ul><we:navigationEntries/></ul>
    <we:else/>
      <div><we:navigationField complete="link"/></div>
    </we:ifHasEntries>
  </li>
</we:navigationEntry>

<!-- Definition für einen Navigations-Ordner, wenn dieser an der ersten Poition steht -->
<!-- inkl. Unterscheidung, ob der Ordner weitere Unterordner enthält -->
<we:navigationEntry type="folder" navigationname="default" position="first">
  <li>
    <we:ifHasEntries>
      <div class="first section"><we:navigationField complete="link"/></div>
      <ul><we:navigationEntries/></ul>
    <we:else />
      <div class="first"><we:navigationField complete="link"/></div>
    </we:ifHasEntries>
  </li>
</we:navigationEntry>

<!-- Definition für einen Navigations-Ordner, wenn dieser an der letzten Poition steht -->
<!-- inkl. Unterscheidung, ob der Ordner weitere Unterordner enthält -->
<we:navigationEntry type="folder" navigationname="default" position="last">
  <li>
    <we:ifHasEntries>
      <div class="last section"><we:navigationField complete="link"/></div>
      <ul><we:navigationEntries/></ul>
    <we:else/>
      <div class="last"><we:navigationField complete="link"/></div>
    </we:ifHasEntries>
  </li>
</we:navigationEntry>

<!-- Definition für einen Navigations-Ordner, wenn dieser der Home-Ordner ist -->
<!-- inkl. Unterscheidung, ob der Ordner weitere Unterordner enthält -->
<we:navigationEntry type="folder" navigationname="default" level="1">
  <li>
    <we:ifHasEntries>
      <div class="root section"><we:navigationField complete="link"/></div>
      <ul><we:navigationEntries/></ul>
    <we:else/>
      <div class="root"><we:navigationField complete="link"/></div>
    </we:ifHasEntries>
  </li>
</we:navigationEntry>

<div id="contain">
  <ul id="sitemap" class="solo">
    <we:navigationWrite navigationname="default"/>
  </ul>
</div>

Innerhalb der CSS-Datei (styleMap.css) aus dem Beispiel-Download vom o.g. Artikel werden drei Grafiken eingebunden. Deren Pfad müssen noch angepasst werden damit der URL vom Document Root aus geht:

Original	Angepasst
../images/vLine.gif	/Sitemap/images/vLine.gif
../images/first.gif	/Sitemap/images/first.gif
../images/last.gif	/Sitemap/images/last.gif

Die JavaScript-Datei muss nicht angepasst werden.

Einbindung der CSS- und der JavaScript-Datei in die webEdition-Vorlage:

<link rel="stylesheet" type="text/css" href="/Sitemap/css/styleMap.css" />
<script src="/Sitemap/js/styleMap.js" type="text/javascript"></script>

Dieses Beispiel können Sie sich hier als webEdition-Teilexport herunterladen:

• Sitemap als Tree-Chart
  (webEdition-Teilexport / vor dem Import entpacken)

Dirk Einecke
(living-e AG / Professional Services - webEdition)