Problem:
The selected menu item should look like a round container. The images consist only of left and right border for the round container. The container will be built dynamically with the correct width, if the menu item is selected. I have a xhtml-template/css and I want to port it to MODx.
I have only the possibility to define &hereClass for Wayfinder, but not id "current". Where I have to make some changes to get the selected menu item visible. Do I have to manipulate the css file to achive this with wayfinder. But in which in kind, because I am not a css profi.
my XHTML-Menu
<!-- navigation starts-->
<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="index.html">Services</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
<!-- navigation ends-->
</div>
my CSS-File:
/* Navigation */
#nav {
clear: both;
padding: 0; margin: 0;
width: 952px;
height: 50px;
background: #988060 url(../img/nav.gif) no-repeat;
}
#nav ul {
float: left;
list-style: none;
margin: 5px 0 0 0;
height: 45px;
padding: 0 0 0 40px;
}
#nav ul li {
float: left;
margin: 0; padding: 0 0 0 10px;
}
#nav ul li a {
float: left;
margin: 0;
padding: 0 15px 0 5px;
color: #FFF;
font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
text-decoration: none;
}
#nav ul li a:hover,
#nav ul li a:active {
color: #E7FAA9;
}
#nav ul li#current {
background: transparent url(../img/left-tab.gif) no-repeat;
}
#nav ul li#current a {
color: #4B3D2C;
background: transparent url(../img/right-tab.gif) no-repeat right top;
}
Wayfinder-Chunks
OuterTpl:
<ul>
[+wf.wrapper+]
</ul>
innerRowTpl:
<li [+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]"><em>[+wf.linktext+]</em> </a>
[+wf.wrapper+]
</li>
Wayfinder-Call:
[!Wayfinder?startId=`1` &outerTpl=`vl_OuterTpl` &rowTp=`vl_InnerRowTpl`!]
thanks
