Navigation for the complete hierarchy tree

The macronavigation unfolds in the navigation path further on. The child elements move stepwise more and more to the right side.

 

DTML

In the present example the essential presentation approach is the indentation caused by depth of hierarchy. This is achieved by a DTML generated styling. Also the active object is declared with class ="highlight"; the code contains only minimal design information so that the design can be generated per CSS almost freely. The enclosing DD/DL elements provide for browser-independent uniform outside spacings.

<!-- pageelement_Macronavigation -->
<dtml-call "REQUEST.set('_this',getSelf())">
<div id="Macronavigation">
<dl><dd><ul>
<dtml-in "getNavElements(REQUEST,expand_tree=1)">
<dtml-unless "isResource(REQUEST)">
<dtml-if "REQUEST['thisObj'].getParentByLevel(0).id in 
  absolute_url().split('/')">
<dtml-let highlightThis="boolint(REQUEST['thisObj'].id==id)"><li 
  style="padding-left:<dtml-var "getLevel()*11+3">px;
         background-position:<dtml-var "getLevel()*11-5">px 8px;"
  <dtml-if "highlightThis">class="highlight"</dtml-if> 
  ><a href="<dtml-var "getHref2IndexHtml(REQUEST,deep=1)">
  "><dtml-var "getTitlealt(REQUEST)"></a></li>
</dtml-let>
</dtml-if>
</dtml-unless>
</dtml-in>
</ul></dd></dl>
</div>
<!-- /pageelement_Macronavigation -->

CSS

CSS meets the elements through the primary selection via the DIV-ID "Macronavigation"; simply the highlight variant is to be marked explicitly. The LI-elements are sequenced shallowly so that separating lines in kind of a table can be implemented. The indentations are generated per inline-style by programme code. Bullets are used as background images because the positioning resp. the placement of line breaks in this way is easier.

/********************************/
/*----- Macronavigation -----*/
/********************************/
#Macronavigation {
	margin: 34px 0px 0px 0px;
	padding: 0;
	border: 0;
	border-top: 5px solid #ccc;
	width:170px;
	}	
#Macronavigation ul {
	padding: 0;
	margin: 0;
	list-style-type: none; 
	}
#Macronavigation ul li {
	margin: 0;
	padding: 3px;
	border: 0;
	border-bottom: 1px solid #fff;
	background-repeat: no-repeat;
	background-position: 0;
	background-image: url(<dtml-var ZMS_COMMON>/that.gif);
	background-color: #ebebeb;
	font-size: small;
	}
#Macronavigation ul li.highlight {
	background-color:#f9f9f9;
	background-image: url(<dtml-var ZMS_COMMON>/this.gif);
	}
#Macronavigation ul li a:link, 
#Macronavigation ul li a:visited {
	color: #0883AC;
	text-decoration:none;
	}
#Macronavigation ul li a:hover {
	color: #FF7600;
	text-decoration:none;
	}
#Macronavigation ul li.highlight a:link,
#Macronavigation ul li.highlight a:visited {
	color:#FF7600;
	text-decoration:none;
	}
#Macronavigation dl,
#Macronavigation dt, 
#Macronavigation dd 
	{
	margin: 0;
	padding: 0;
	border:0;
	}