Show menu item as active

I’m new to this but you guys seem to be doing a great job.

I’m a web designer building my first test site using MODx - this is a replica of a site I have already produced. I’m proficient in CSS but not proficient in PHP.

I’m using Wayfinder and have a couple of questions.

1. On my ’conventional’ site I use "body id" to give the page an identity that the CSS then recognises as the active page and therefore the correct background image is displayed for the active menu item - how can I achieve this using MODx / Wayfinder?

2. I generally have 4 different menus on my sites: A small accessibility menu, A horizontal menu (home | about us | etc), a vertical products/services menu, and a footer menu (terms & conditions etc). Can I use more than one instance of Wayfinder on a page?

Many thanks - go easy on a newbie!

By default, Wayfinder puts class="here" when generating the link for the active page. Check the documentation; you can change the classname, and you can also make a separate chunk template for the "here" item as well as the "here" container.

http://wiki.modxcms.com/index.php/Wayfinder

You can use as many Wayfinder calls as you like.

Many thanks for the prompt reply.

Are you saying that if I replace "a:active" with "a:here" (in my style sheet) it will work. If I’m completely wrong here just tell me to go and read more!

I’ve called multiple instances of Wayfinder but I can’t figure out how to get different content in each menu - at the moment I’m just getting the same menu items repeated in every instance?

No, the a:active is a pseudocalass, like a:hover and a:visited. Those are part of the HTML specification, and have nothing to do with MODx or Wayfinder.

http://www.html.net/tutorials/css/lesson6.asp

Wayfinder will addd a classname:

then you can style the li.here and any of its children in your CSS. Or you can change the classname it uses, or you can use a custom chunk template for the "active" elements to make them do anything you want.

As far as getting different menus for each Wayfinder call, you need to change the &startId to the document/container that you want to be the root of the given menu. For example, your main menu will probably have &startId=`0`, while the menu for your News section might have &startId=`6`, if the container for your news items is document #6.

Thanks,

I’ll go and have a play

Great thread, I was trying to do the exact same thing

That’s what we’re here for