Coole Sitemaps durch CSS

Jede Website, die eine gewisse Größe erreicht hat, bietet als Navigationshilfe auch eine Sitemap an. Und das ist auch gut so. Doch in den allermeisten Fällen werden diese Sitemaps als einfache verschachtelte Listen angezeigt. Von Gestaltung ist entweder weit und breit nicht viel zu sehen oder es wurde der etwas erfolglose Versuch unternommen, die Liste, die sich in der Liste befindet, welche wiederum in einer Liste ist usw. ... irgendwie für das menschliche Auge aufzubereiten. So auch auf unserer eigenen Website ... ja wir bekennen uns schuldig - und geloben Besserung.

Doch diese Tristesse muss nicht sein. Es geht auch anders - schreibt jedenfalls Steve Stedman in seinem Artikel "CSS SiteMap".

Glauben Sie, dass folgender Quelltext...

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

...einen solchen Output im Browser liefert?

Wenn ja, dann haben Sie Recht.
Wenn nein, dann haben sie auch Recht.
Es ist der oben genannte Quelltext - aber nicht nur.

Der am Anfang beschriebene Vorlagen-Quelltext liefert (natürlich nur in Verbindung mit dem Navigations-Tool von webEdition) eine ganz einfache verschachtelte Liste. Etwa so in dieser Art (vereinfach):

<div id="sitemap">
  <ul>
    <li>Home</li>
    <li>Produkte
      <ul>
        <li>Produkt 1</li>
        <li>Produkt 2</li>
        <li>Produkt 3</li>
      </ul>
    </li>
    <li>Kontakt</li>
  </ul>
</div>

Und nun .. wie sagt Steve so schön ... "The Magic". Oder wie man es landläufig auch bezeichnen kann: Die dazugehörigen CSS-Definitionen:

<style type="text/css" media="screen">
  a {
    font-size: 0.9em;
    color: #FFFFFF;
    text-decoration: none;
  }

  #sitemap {
    background: #FFFFFF;
    font: normal 16px Arial,sans-serif;
    overflow: hidden;
    padding: 1em;
  }

  /* Erste Ebene */

  #sitemap ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #sitemap li {
    background-color: #6666CC;
    margin: 0 0 -0.1em;
    min-height: 1em;
    padding: .2em .4em;
    position: relative;
    width: 9em;
    color: #FFFFFF;
  }

  /* Zweite Ebene */

  #sitemap ul ul {
    font-size: 90%;
    margin-top: -1.4em;
  }

  #sitemap ul ul li {
    background: #99CC33;
    border-left: 0.5em solid #333399;
    border-top: 0.5em solid #FFFFFF !important;
    left: 10.4em;
  }

  /* Dritte Ebene */

  #sitemap ul ul ul li {
    background: #CC9933;
    border-color: #669900;
  }

  /* Vierte Ebene */

  #sitemap ul ul ul ul li {
    background: #CC3333;
    border-color: #996600;
  }

  #sitemap ul ul ul ul ul li {
    background: #666666;
    border-color: #990000;
  }
</style>

Beeindruckt? Ja? Ich auch.

Um es nicht bei diesem, zugegeben recht außergewöhnlichen, Beispiel zu belassen, interessieren mich andere Möglichkeiten der Umsetzung und Gestaltung. Die Sitemap-Parade ist damit eröffnet. Coole Sitemap gefunden oder selber gemacht? Bitte einfach als Kommentar zum Eintrag dazuschreiben. Ich bin gespannt!

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