Wayfinder menu with parent tab active. Can't seem to keep correct template

11 Posts

olafskaug Reply #1, 17 years, 6 months ago

I’m trying to create a 3 level deep menu.

1.-|
2.-|
5.-|
6.-|
7.-|
3.-|
4.-|

You can see the example at http://dev.freedomofspeech.no

The menu works great as long as i’m on the first level. The tabs display correctly, but when i traverse down to level 2 (5.-|) it doesn’t keep the template for the parent level.
The way i approached the menu building was that i only used onw wayfinder for the first level. Then i assed a new one for the second level.
Please bear in mind that i’m not that familiar with Wayfinder.

Here is how i try to get the menu in the second level template:

<div id="navigation">
    [!Wayfinder? &startId=`[[UltimateParent]]`&level=`1`&hereTpl=`menuHere`&rowTpl=`menuRow`!]
    
</div><!-- end of navigation -->
<div id="navsmall">
    [!Wayfinder? &startId=`24`&level=`1`&hereTpl=`menuProductsRow`&parentRowHereTpl=`menuHere`&activeParentRowTpl=`menuHere`!]
</div>

Am I approaching this the wrong way? The whole point is that if you’re on the first level and you select a menu item with a child. You display the children of that item, but only one level deep. The different menu levels also have different stylings.
I thought just adding the activeParentRowTpl would help, but it didn’t.

Olaf

241 Posts

bob1000 Reply #2, 17 years, 6 months ago

Could you show us the code for your menuHere, menuRow and menuProductsRow chunks so we can take a look.

11 Posts

olafskaug Reply #3, 17 years, 6 months ago

menuHere:

<li[+wf.classes+]>
   <img src="/assets/images/layout/menu_active_left.png" /><span class="middle">[+wf.linktext+]</span><img src="/assets/images/layout/menu_active_right.png" />
    [+wf.wrapper+]
</li>

menuRow:

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

menuProductsRow:

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

11 Posts

olafskaug Reply #4, 17 years, 6 months ago

Here are some images of the tab the way it should be, and how it stops giving the wanted effect.

Correct: http://dev.freedomofspeech.no/assets/images/layout/correct.png
Broken: http://dev.freedomofspeech.no/assets/images/layout/broken.png

As you can see the tab is not visible in the second example.

241 Posts

bob1000 Reply #5, 17 years, 6 months ago

I think the problem with your &parentRowHereTpl and &activeParentRowTpl parameters in the second Wayfinder call is that because you have two Wayfinder calls, the second one doesn’t recognise the the top one as a parent and so doesn’t include the parentRow chunks. But I might be wrong about that!

Personally, I would get rid of all the template chunks (menuRow is the same as menuProductsRow anyway) and style the active menu item using CSS.

Try change your Wayfinder calls to this (I’ve just removed the chunks):

<div id="navigation">
    [!Wayfinder? &startId=`[[UltimateParent]]` &level=`1`!]
    
</div><!-- end of navigation -->
<div id="navsmall">
    [!Wayfinder? &startId=`24` &level=`1`!]
</div>

Then change the CSS rules for the #navigation section to this:

#navigation {
	height: 42px;
	border-bottom: 3px solid #CCCCCC;
	background: url('images/menu_black_bg.png') repeat-x bottom;
	width: 100%;
	margin: 0px;
	padding:5px 0 0 0;
	font: 14px Arial, Helvetica, sans-serif;
}

#navigation ul {
	position: relative;
	left: 135px;
	top: 4px;
	width: 1001px;
    margin: 0 auto;	
    text-align: left;
	list-style: none;
}
#navigation li {
	float:left;
	width: auto;
	margin:0 0 0 0;
	display: block; 
}

#navigation ul li a {
	color: #999999;
	font-weight: bold;
	display: block; 
	min-height:31px;
	padding: 4px 10px;
	line-height:31px;
	text-decoration:none;
}

#navigation li.active {
	position: relative;
	top: -4px;
	color: #fff;
	background: #000 url('images/menu_active_right.png') no-repeat right top;
}

#navigation li.active a {
	padding: 8px 10px 3px 10px;
	text-decoration:none;
	color: #000;
	background: transparent url('images/menu_active_left.png') no-repeat left top;
}

You might want to alter the padding on the active <a> element to get it looking how you want.

The last thing to change is the menu_active_right.png image. I’ve attached an updated version. This method uses the sliding-doors technique with one background image on the active <li> element, the other image on the <a> element inside that.

11 Posts

olafskaug Reply #6, 17 years, 6 months ago

This worked perfectly! Thank you so very much

It was a real head ache for me.