Sitemap

Aus SiteparkWiki
Version vom 1. September 2009, 15:57 Uhr von Veltrup (Diskussion | Beiträge)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Zur Navigation springen Zur Suche springen

Generiertes HTML

Zur Darstellung der Navigation einer Seite muß aus den Sitemap-Daten HTML-Code generiert werden. Beispielsweise könnte eine generierte Navigation wie folgt aussehen:

<ul class="menu">
  <li class="first leaf" id="n1">
    <div><a href="/a/index.php" title="B"><span>A</span></a></div>
  </li>
  <li class="node path parent" id="n2">
    <div><a href="/b/index.php" title="B"><span>B</span></a></div>
    <ul>
      <li class="first lastOpenNode node active" id="n2_1">
        <div><a href="/b/1/index.php" title="B 1"><span>B 1</span></a></div>
        <ul>
          <li class="first leaf" id="n2_1_1">
            <div><a href="/b/1/a.php" title="B 1 a"><span>B 1 a</span></a></div>
          </li>
          <li class="last leaf" id="n2_1_2">
            <div><a href="/b/1/b.php" title="B 1 b"><span>B 1 b</span></a></div>
          </li>
        </ul>
      </li>
      <li class="leaf" id="n2_2">
        <div><a href="/b/2/index.php" title="B 2"><span>B 2</span></a></div>
      </li>
      <li class="last leaf" id="n2_3">
        <div><a href="/b/3/index.php" title="B 3"><span>B 3</span></a></div>
      </li>
    </ul>
  </li>
  <li class="last leaf" id="n3">
    <div><a href="/c/index.php" title="C"><span>C</span></a></div>
  </li>
</ul>

CSS Klassen der Navigation

Bis auf die Klasse des umschließenden <ul>-Tag sind alle Klasse fest definiert. Hier die Liste aller verfügbaren Klassen:

Klasse Beschreibung
first Diese Klasse ist gesetzt, wenn das <li>-Element das erste innerhalb einer <ul>-Ebene ist.
last Diese Klasse ist gesetzt, wenn das <li>-Element das letzte innerhalb einer <ul>-Ebene ist.
lastOpenNode Diese Klasse ist gesetzt, wenn das <li>-Element das letzte Element im aktiven Pfad ist, das Unterelemente besitzt.
node Diese Klasse ist gesetzt, wenn das <li>-Element Unterelemente besitzt.
leaf Diese Klasse ist gesetzt, wenn das <li>-Element keine Unterelemente besitzt.
active Diese Klasse ist gesetzt, wenn das <li>-Element der aktive Menu-Punkt ist.
parent Diese Klasse ist gesetzt, wenn das <li>-Element das übergeordnete Element der aktive Menu-Punktes ist.
path Diese Klasse ist gesetzt, wenn das <li>-Element zu dem aktiven Menu-Punkt führt.