Beispiel für die Anwendung des vorgestellten Codes
Beispiel für die Anwendung des vorgestellten Codes: die Einstiegssufe liegt hier variabel
Anfrage in der Mailing-List
Einfache Lösung ohne Schachtelung
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">» <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;
}
Erstellt von: Dr. R. Herold, Dr. F. Hoffmann
, erstellt am: 27.06.2008
,
zuletzt geändert: 27.06.2008