Navigation für den kompletten Hierarchie-Baum

DTML

Der wesentliche Darstellungs-Ansatz besteht im vorliegenden Beispiel in dem durch die Hierarachie-Tiefe bedingten Einzug. Dieser wird erreicht durch ein DTML-generiertes Styling. Desweiteren wird das aktive Objekt mit class ="highlight" deklariert; der Code enthält damit nur noch minimale Gestaltungsinformationen, so dass die Gestaltung fast frei per CSS generiert werden kann. Die umschliessenden DD/DL-Elemente sorgen für browserübergreifend gleichartige Aussenabstände.

<!-- 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

Das CSS trifft die Elemente durch die primäre Selektion über die DIV-ID "Macronavigation"; lediglich die highlight-Variante muss noch explizit gekennzeichnet werden. Die LI-Elemente werden flach sequenziert, damit tabellen-artige Separator-Linien eingeführt werden können. Die Einzüge werden per inline-Style durch den Programm-Code generiert. Die Bullets werden als Hintergrund-Grafiken eingesetzt, da auf diese Weise die Positionierung bzw. die Platzierung bei Zeilenumbrüchen einfacher ist.

/********************************/
/*----- 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;
	}

Erstellt von: Dr. Frank Hoffmann , erstellt am:  27.06.2008 , zuletzt geändert: 27.06.2008