Sitemap: Unterschied zwischen den Versionen

Aus SiteparkWiki
Zur Navigation springen Zur Suche springen
 
Zeile 7: Zeile 7:
 
     <div><a href="/a/index.php" title="B"><span>A</span></a></div>
 
     <div><a href="/a/index.php" title="B"><span>A</span></a></div>
 
   </li>
 
   </li>
   <li class="lastOpenNode path parent" id="n2">
+
   <li class="node path parent" id="n2">
 
     <div><a href="/b/index.php" title="B"><span>B</span></a></div>
 
     <div><a href="/b/index.php" title="B"><span>B</span></a></div>
 
     <ul>
 
     <ul>
       <li class="first lastOpenNode active" id="n2_1">
+
       <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>
 
         <div><a href="/b/1/index.php" title="B 1"><span>B 1</span></a></div>
 
         <ul>
 
         <ul>
Zeile 48: Zeile 48:
 
|-
 
|-
 
| <code>lastOpenNode</code>
 
| <code>lastOpenNode</code>
| Diese Klasse ist gesetzt, wenn das <code>&lt;li&gt;</code>-Element das letzte innerhalb einer <code>&lt;ul&gt;</code>-Ebene ist, das Unterelemente besitzt.
+
| Diese Klasse ist gesetzt, wenn das <code>&lt;li&gt;</code>-Element das letzte Element im aktiven Pfad ist, das Unterelemente besitzt.
 
|-
 
|-
 
| <code>node</code>
 
| <code>node</code>

Aktuelle Version vom 1. September 2009, 14:57 Uhr

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.