Sie sind hier:   » ZMS home » Dokumentation » Details » How-To » TOC-Listen » Tab-Menü

Horizontales Tabulator-Menu für zwei Ebenen

Autor: Michal Grüterich, xmachina; Dr. Frank Hoffmann, SNTL-Publishing, 18.07.2005

Die DTML-Template rendert eine einfache geschachtelte HTML-Liste; die Darstellung wird vollständig über CSS gesteuert.

Zoom (2KB)

Der CSS-Code befindet in der HTML-Datei, die man durch Klick auf das Downlaod-Icon errreicht.

Der DTML-Code erzeugt eine geschachtelte Liste, indem die Funktion filteredChildNodes() für den "aktiven Fall" ein zweites Mal aufgerufen wird. Das Render-Ergebnis hat folgende Struktur:

<div id="Menu">
  <ul id="channelNav">
    <li>L1 A ...</li>
    <li class="active">L1 B ...
      <ul id="channelSubnav">
        <li>L2 a ...</li>
        <li>L2 b ...</li>
        <li>L2 c ...</li>
      </ul>
    </li>
    <li>L1 C ...</li>
  </ul>
</div>

DTML

<!--  pageelement_Menu -->
<div>
<ul id="Menu">
<dtml-in "content.filteredChildNodes(REQUEST,PAGES)"><dtml-unless 
  "isResource(REQUEST)"><dtml-let 
   active="id in REQUEST['thisObj'].absolute_url().split('/')">
 <li<dtml-if active> class="active"</dtml-if>><a 
    href="<dtml-var "getHref2IndexHtml(REQUEST)">" 
    title="<dtml-var "getTitle(REQUEST)" 
    html_quote>"><dtml-var "getTitlealt(REQUEST)" html_quote></a></li>
<dtml-if active>
  <ul id="Submenu">
<dtml-in "filteredChildNodes(REQUEST,PAGES)"><dtml-unless 
  "isResource(REQUEST)"><dtml-let 
   active="id in REQUEST['thisObj'].absolute_url().split('/')">
    <li><a 
    <dtml-if active>class="active"</dtml-if> 
     href="<dtml-var "getHref2IndexHtml(REQUEST)">"
     title="<dtml-var "getTitle(REQUEST)" 
     html_quote>"><dtml-var "getTitlealt(REQUEST)" html_quote></a></li>
</dtml-let></dtml-unless></dtml-in>
  </ul>
</dtml-if>
</dtml-let></dtml-unless></dtml-in>
</ul>
</div>
</div>
<!-- /pageelement_Menu -->