Hi Guys,
I thought I should repost this as I originally posted in a thread that was quite old, so is perhaps not getting as many views now. I had some brilliant help with this so far, now I am just needing some help on the final little bit.
Basically due to the way I have worked the menu which you will see from the callouts and the CSS (using absoulte and relative positioning to position the sub navs for Gallery and Commissions), my "is here" state or active state (blue) is running right through to the two sub nav’s, which of course I dont want until one of these is clicked on.
So for example, on Gallery I only want gallery to be highlighted. Then when you click on one of the sub navs one of them to also be highlighted as well as Gallery.
Any way i can do this will be greatly appreciated.
Thanks a lot.
My wayfinder call is as follows:
[[Wayfinder? &startId=`0` &innerClass=`sub` &rowTpl=`wfRowTpl` &hereClass=`here`]]
This is my CSS:
body {
background-color: #000000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#main {
float: right;
height: 370px;
width: 709px;
margin-top: 4px;
background-image: url(../images/main.png);
}
#maininner {
float: left;
height: 370px;
width: 709px;
padding: 10px 5px 24px 10px;
}
#wrapper {
width: 970px;
height: 450px;
margin-top: 147px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
position: relative;
padding: 0px;
}
#header {
height: 75px;
width: 970px;
background-image: url(../images/header.png);
background-repeat: no-repeat;
float: left;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
#footer {
height: 25px;
width: 970px;
float: left;
}
#nav {
float: left;
display:block;
}
#nav ul {
line-height: 24px;
margin: 0px;
padding: 0px;
width: 100px;
}
#nav li a, #nav li a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
}
#nav li a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;
}
#nav li.here a {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
color: #0099FF;
text-decoration: none;
}
#nav .sub {
top: 0px;
left: 120px;
position: absolute;
}
#nav ul ul {
display:none;
}
#nav ul li.here ul {
display:block;
}
#nav ul li {
position: relative
}
p.footer {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: regular;
color: #0099FF;
text-decoration: none;
text-align: right;
}
.footer a {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: regular;
color: #FFFFFF;
text-decoration: none;
}
.footer a:hover {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: regular;
color: #0099FF;
text-decoration: none;
text-align: right;
}
p {
line-height: 24px;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: regular;
color: #FFFFFF;
text-decoration: none;
text-align: left;
}
This is the site as it is working now:
http://www.squaredgepictures.co.uk/cmstemp/
As you can see the here class is being applied to the sub nav before I have clicked on it. I understand this is probably because it is running down the list from the main nav active state but how do I stop this?
Thanks again for all of your time.
Edit 1:
Here is the wfRowTpl chunk that simply adds | to my menus. I thought I should post it incase it helps?
<li[+wf.id+][+wf.classes+]>
<a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>| [+wf.linktext+]</a>
[+wf.wrapper+]
</li>
