Separate css classes menu to wayfinder

Hi, i do not get it, how to tell the wayfinder that every menu link has its own class? The thing is every menu item has defined its own place in page, it is not ordered menu list.
for example i have html like this:


Thanks!

Hi,
I have a way of doing this, it’s not automatic, though. You edit the "link attribute" on a page. This will affect the actual link, not the list item.

Try adding something like the following to the Link Attribute on your About Us page:

class="about-us"

And take a look at the result. You could also use "id" instead of "class". I have used this method for cases when the client wanted a unique image to appear as background for each menu item, for instance.

Cheers, Dave

ok, i still can not figure it out,

for example html and css code below, how to add wayfinder to it?

html:


css:


i suppose i should use different &rowTpl chunks, but i can not understand - how?

You would need to use a bit of trickery there. Since Wayfinder applies the exact same HTML to each line, you can’t do that. However, each document has a "link attributes" field. This field was originally intended to have things like target="_blank", and Wayfinder will add the contents of that field verbatim where the [+wf.attributes+] placeholder is put. So in your rowTpl you could have

Then for each document in its link attributes field, put class="home", or class="about_us". Just make sure that the rowTpl doesn’t have the [+wf.attributes+] placeholder inside the <a> tag, as it would if this were really link attributes.

ok, thank you very much, now i get it

just one strange thing with links active state. My rowTpl looks like this:


and the css code looks like:

the thing is that the background image for active state defined in css is displayed but the color defined in css is not displayed. Actually the color is displayed from defined visited state.

Background image disapears if i turn off background string in Firebug.
How could that be?

Since you are using the [+wf.attributes+] tag to hijack the [+wf.classes+] tag for the li tag, which is usually used to wrap the <a> tag, you may need to add another block-level element for wrapping the <a> tag and carry the css for the active links. Perhaps a set of <span> tags set to display: block, then otherwise treated as normally is done for the <li> element.