Macro-Navigation auf der Basis einer geschachtelten Liste

Beispiel-Darstellung der hierarchisch geschachtelten Liste mit dem weiter unten stehenden CSS-Code. Damit browser-übergreifend Hintergrund-Farben bündig gesetzt werden können, sind die LI-Elemente behelfsmässig wiederum im DIV-Elementen geschachtelt (siehe Vollansicht des Bildes).

Der folgende Template-Code entscheidet auf Basis des Hierarchie-Levels (getLevel()) wann die Listen-Elemente zu öffnen/schliessen sind; die Prüfung auf Level-Sprünge bzw. die die daraus folgenden Effekte für die Listen-Schlüsse machen den DTML-Code komplexer als die anderen Listen-Beispiele:

<!-- BO bodyContent_Macronavigation -->
<dtml-try>
<dtml-call "REQUEST.set ('_this', getSelf())">
<dtml-call "REQUEST.set ('prevlevel',   -1)">
<dtml-call "REQUEST.set ('firstlevel',  -1)">
<dtml-let filtchlevel="_.len (filteredChildNodes (REQUEST, PAGES))"
          nosuboffset="_.int (filtchlevel == 0)"
          startlevel="_.max (0, _.min (getLevel() - 1 - nosuboffset, 3))"
          startlevel="0"
>
<div id="Macronavigation">
<dtml-in "getNavElements (REQUEST, expand_tree = 1)">
 <dtml-unless "isResource (REQUEST) or (getLevel () < startlevel)">
  <dtml-if "firstlevel == -1">
   <dtml-call "REQUEST.set ('firstlevel', _.max (prevlevel, getLevel ()))">
  </dtml-if>
  <dtml-let sublevel="getLevel() - firstlevel" 
            titlealt="getTitlealt (REQUEST)"
            titlereq="getTitle (REQUEST)">
   <dtml-call "REQUEST.set('sublevel', sublevel)"><dtml-comment>#### FOR CALCULATING CLOSING TAGS AFTER dtml-in LOOP ####</dtml-comment>
   <dtml-if   "prevlevel == -1"><ul><dtml-var "sublevel * '<li><div><ul>'"><dtml-comment>#### START AND POSSIBLY GO DEEPLY ####</dtml-comment>
   <dtml-elif "prevlevel  < sublevel"><dtml-var "'<ul>' + (sublevel  - prevlevel - 1) * '<li><div><ul>'"><dtml-comment>#### OPEN LOWER LEVELS ####</dtml-comment>
   <dtml-elif "prevlevel  > sublevel"><dtml-var "'</li>' + (prevlevel - sublevel)  * '</ul></li>'"><dtml-comment>#### CLOSE LOWER LEVELS ####</dtml-comment>
   <dtml-elif "prevlevel == sublevel"></li><dtml-comment>#### CLOSE CURRENT LEVEL ONLY ####</dtml-comment>
   </dtml-if>
   <dtml-comment>#### INSERT CURRENT LEVEL MENU ITEM ####</dtml-comment><!-- sublevel=<dtml-var sublevel missing=""> -->
   <li><div><span <dtml-if "REQUEST['_this'].id==_['sequence-item'].id"> class="active">&#187; <dtml-else>></dtml-if><a
        title="<dtml-var titlereq>" 
        href="<dtml-var "getHref2IndexHtml(REQUEST, deep = 1)">"
        class="sublevel<dtml-var sublevel missing="">"
    ><dtml-var titlealt></a></span></div>
   <dtml-call "REQUEST.set('prevlevel', sublevel)">
  </dtml-let> 
 </dtml-unless>
</dtml-in>
<dtml-var "'</li>' + (prevlevel - sublevel)  * '</ul></li>' + '</ul>'">
</div>
</dtml-let><dtml-except>
</dtml-try>
<!-- EO bodyContent_Macronavigation -->

Der CSS-Code differenziert die Darstellung für Hierarchie-Tiefe und Aktives Objekt; desweitere gibt es eine Variante für eine alternative Darstellung auf der Homepage (indem das HTML-body-Element per Template pageelement_bodyTag eine alternative Klasse zugewiesen bekommt).

# CSS-Beispiel #

/* -- MACRONAVIGATION -----------------*/

#Macronavigation {
	margin: 0;
	border: 0;
	padding: 0;
	width:200px;
	position:absolute;
	font-size:10px;
	border-right: 1px solid <dtml-var "get_colormap()['primColorMedium']">;
}

#Macronavigation ul {
	padding: 0px;
	margin: 0px ;
	list-style-type: none;
}
#Macronavigation ul li {
	padding: 13px 3px 14px 8px;
	border-bottom: 1px solid #79aa0a;
}
#Macronavigation ul li div span a:link, 
#Macronavigation ul li div span a:visited,
#Macronavigation ul li div span a:hover,
#Macronavigation ul li div span a:active  {
	color: <dtml-var "get_colormap()['primColorStrong']">;
	font-weight:bold;
	text-decoration:none;
	text-transform: uppercase;
}
#Macronavigation ul li ul li {
	padding: 3px 3px 3px 11px;
	border: 0px;
}
#Macronavigation ul li ul li div span a:link, 
#Macronavigation ul li ul li div span a:visited,
#Macronavigation ul li ul li div span a:hover,
#Macronavigation ul li ul li div span a:active  {
	text-transform: lowercase;
}

#Macronavigation ul li div span a:hover,
#Macronavigation ul li div span,
#Macronavigation ul li div span.active a {
	color: <dtml-var "get_colormap()['teaserColor']">;
	font-weight:bold;
}

/*-- MACRONAVIGATION HOME SPECIAL --*/
body.home #Macronavigation  ul li {
	padding: 13px 3px 14px 23px;
}
body.home #Macronavigation {
	margin-top:2px;
	width:215px;
}

body.home #Macronavigation a:hover {
	color:#fff;
}