flyout menu issue, please please please help

54 Posts

One_PHANTOM Reply #1, 16 years, 8 months ago

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. I have tried to find this out but there doesn’t seem to be anything out there similar to my problem.

Basically due to the way I have worked the menu which you will see from the callouts and the CSS (using absolute 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 sub nav. I only want the active page to be highlighted in the menu.

Another issue is that once the child page is clicked on the sub menu then disappears?

Any help with this will be greatly appreciated.

Thanks a lot.

My wayfinder call is as follows:

    [[Wayfinder? &startId=`0` &innerClass=`sub` &rowTpl=`wfRowTpl` &hereClass=`here`]]

My Css for the navigation:

}
#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
}

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 my &rowTpl code:

<li[+wf.id+][+wf.classes+]>
   <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>| [+wf.linktext+]</a>
   [+wf.wrapper+]
</li>

At the moment this just adds this | to my menu items. perhaps the problem with the disappearing lies here?

54 Posts

One_PHANTOM Reply #2, 16 years, 8 months ago

Is there seriously noone that can help me? I’ve gone through so many changed in the css and can’t for the life of me work out what is wrong?

654 Posts

mconsidine Reply #3, 16 years, 8 months ago

In your style sheet, I removed the color specification under
#nav li.active a
and then the color did not seem to flow through to the submenus.
MattC

1,572 Posts

Paulp Reply #4, 16 years, 8 months ago

Try adding

#nav .sub li a, #nav .sub li a:link {
color: #fff;
}

54 Posts

One_PHANTOM Reply #5, 16 years, 8 months ago

Hi Guys,

Thanks for the responses. Those suggestions were fine but they are doing the same as what I now have. Which is an active state for the main menu, with all of the sub menus actve also, but then once clicked on one of the sub menus only one of these goes active (which is correct) but the main menu item no longer apears active (which is incorrect). So I need to find a way of manually telling wayfinder to keep the parent resource blue also. The source code tells me it is aive but for some reason it does not apply the blue.

Here is my code as it is now.

Wayfinder:

  [[Wayfinder? &startId=`0` &level=`0` &rowTpl=`wfRowTpl` &innerClass=`sub` &selfClass=`here`]]

& my css for the nav:

#nav {
	float: left;
        display:block;
        z-index:1000;
}
#nav ul {
	line-height: 24px;
        margin: 0px;
        padding: 0px;
        width: 100px;
}
#nav a:link, #nav a:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	color: #FFFFFF;
	text-decoration: none;
}
#nav 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;
        display: none;
 }
#nav ul li {
    position: relative
} 
#nav ul li.active ul {
    display:block;
}

So the nav.li here in my css combined with the wayfinder call &selfClass=`here` are telling te wayfinder to turn any active resources blue. So this is why when I click on commissons, it highlights commissions and all sub menus, then once I click on one of the sub menus it only highlghts that sub menu, becasue that is the active document.

So I need to work out how to tell it to highlight the active document as wel as its parent, but not go all the way up through the tree, as it was before.

Appreciate the help guys. Hopefully someone has had the same problem and there is a simple fix.