Fine tuning a Wayfinder generated menu ... probably really easy ...

I have successfully figured out how to use the Wayfinder snippet to create a sub-menu for sections of a site;

http://emc2.site4test.co.uk/index.php?q=stock-range.html

It is the menu on the left side, listing pages vertically.

I need the selected menu item to remain a solid colour once a visitor is at that page - at the moment it is just a rollover and also I’d like the items in the menu to have a blank space between the border boxes (at the moment they join so the lines are not consistant)

Any help would be fantastic as I’m really stuck here.

Thanks, David

What do your wayfinder call and templates look like?

[[Wayfinder? &startId=`50` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout`]]

and the ’flyout.css’ (which I think is the only CSS for this menu)

/* CSS Document */
/* common styling */
.menu {font-family: Verdana, Arial, Helvetica, sans-serif; width:150px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#999999; width:150px; height:20px; text-align:left; border:2px solid #999999; border-width:2px 2px 2px 2px; padding-left: 5px; background:#FFFFFF; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#0099CC;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

OK sorted the formatting issue;

>I’d like the items in the menu to have a blank space between the border boxes (at the moment they join so the lines are not consistant)

with a simple change to the CSS adding this ’margin-bottom:5px;’ to the .menu ul li style

Still stuck on the solid colour when you are on that particular page.

Hi, I’m sorry I can’t give you a more detailed example but I haven’t used Wayfinder in the way you like.
What you need is to look for the hereTpl parameter in the Wayfinder Documentation http://www.muddydogpaws.com/development/wayfinder/parameters.html.

Hope that helps.

Looks like that’s where I can set it - but can’t figure it out now - I’ll look at it tomorrow.

Surprised that this is not in any of the examples, I would have thought that an indicator on a menu to show which page you were looking at would be fairly commonplace.

just set the &hereClass=’here’ and it wil generate a extra class named "here" on every item in the selected branch.

using wayfinder 2.0 and a config file is tha easy way to do it make sure that you add the&hereClass parameter to the configfile if its not there yet.

Dimmy

Really stuck on this.

I’ve upgraded to Wayfinder 2.0

I’ve added &hereClass=`here` to the snippet call on the document

[[Wayfinder? &startId=`61` &parentClass=`hide` &parentRowTpl=`cssplay_parentRow` &hereClass=`here` &outerTpl=`cssplay_outer` &innerTpl=`cssplay_inner` &rowTpl=`cssplay_row` &outerClass=`menu` &cssTpl=`cssplay_flyout_get`]]

But I’m really confused as to what else I need to do - I guess I need to change something in the Wayfinder snippet and then something in the CSS as well????

The site is here and it is the menu on the left hand side;

http://emc2.site4test.co.uk/index.php?q=call-now.html

Any help would make my day - thanks

OK it seems to be creating this html

<li class="here"><a href="/index.php?q=call-now.html" title="call now">call now</a></li>
<li><a href="/index.php?q=call-back-request.html" title="call back request">call back request</a></li>
<li><a href="/index.php?q=enquire-online.html" title="enquire online">enquire online</a></li>
<li class="last"><a href="/index.php?q=full-contact.html" title="full contact details">full contact details</a></li>

where ’here’ is the document displayed (although sometimes is says ’active’ as well - however no matter what I do to the style sheet nothing happens - here is the style sheet;

/* common styling */
.menu {font-family: Verdana, Arial, Helvetica, sans-serif; width:150px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#666666; width:150px; height:20px; text-align:left; border:1px solid #999999; border-width:1px 1px 1px 1px; padding-left: 5px; background:#FFFFFF; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; margin-bottom:5px; position:relative;}
.menu ul li ul {display: none;}

.active {color:#fff; background:#CC3333;}
.here {color:#fff; background:#CC3333;}
.menu active {color:#fff; background:#CC3333;}
.menu here {color:#fff; background:#CC3333;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#CC3333;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}

Are you sure that you have uploaded all the styles you need?
I tell you this because in the style sheets that your site are using (flyout_get.css and emc_our.css) I don’t see these rules:

.active {color:#fff; background:#CC3333;}
.here {color:#fff; background:#CC3333;}
.menu active {color:#fff; background:#CC3333;}
.menu here {color:#fff; background:#CC3333;}

P.S. If you’re using Firefox I recommend you the firebug extension (https://addons.mozilla.org/es-ES/firefox/addon/1843), it alows you to inspect which styles are being aplied to which element.