Hallo!
Ich möchte gerne eine Navigation haben, wie ich sie hier unten als TS hinzugefügt habe.
Jedoch soll vor den aktiven Menüeintrag die Grafik no-active.gif geladen werden (leerer schwarzer Kringel)vor den aktiven Menüeintrag soll auch eine Grafik active.gif (ausgefüllter schwarzer Kringen)
Wie kann ich dies machen?
Bis jetzt wird das Menü halt schön untereinander angezeigt und versetzt, die Grafiken fehlen noch...
Hier mein TS
subparts.leftcol = HMENU
subparts.leftcol {
special = directory
special.value = 1
wrap = <div id="mainmenu">|</div>
1 = TMENU
1 {
noBlur = 1
wrap = <ul>|</ul>
NO = 1
NO {
linkWrap = |<span class="hidden">.</span>
wrapItemAndSub = <li>|</li>
ATagTitle.field = abstract // description // title
}
CUR < .NO
CUR.linkWrap = <div class="cur">|<span class="hidden">.</span></div>
CUR.doNotLinkIt = 1
ACT < .NO
ACT.ATagParams = class="act"
}
2 < .1
3 < .1
}
Und hier mein CSS:
#leftcol {
margin-top:65px;
margin-left:10px;
position: relative;
float: left;
width: 150px;
display: inline;
/*funktioniert im FF und IE*/
}
span.hidden {
position:absolute;
left:-1000px;
top:-1000px;
width:0;
height:0;
overflow:hidden;
display:inline;
}
div#leftcol {
background-color:#d5d5d5;
width: 180px;
border: 1px solid white;
border-bottom: 0px;
}
div#leftcol * {
margin: 0px;
padding: 0px;
color: black;
}
div#leftcol .cur {
color: #005BAB;
}
div#leftcol .act {
color: #005BAB;
}
div#leftcol ul {
list-style-type: none;
}
div#leftcol ul li {
border-bottom: 1px solid white;
margin:0 0 0 14px;
}
* html #leftcol li li { height:1%; }
div#leftcol ul li a,
div#leftcol ul li div {
padding: 3px 3px 3px 2px;
text-decoration: none;
font-family: verdana,arial,helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
display: block;
}
div#leftcol ul li a:hover {
background-color: #ffffff;
}
div#leftcol ul ul {
background-color: #e5e5e5;
}
div#leftcol ul ul li {
border-bottom: none;
}
div#leftcol ul ul li a,
div#leftcol ul ul li div {
font-size: 10px;
padding-left:6px;
color:#C30027;
}
div#leftcol ul ul ul li a,
div#leftcol ul ul ul li div {
color:black;
font-size:9px;
}
div#leftcol ul ul li a:hover{
background-color: #ddddff;
}
Dankeschön und Gruß