Unique class/id for individual submenus?

Hi,

I’ve got a fairly standard menu but am really struggling with styling active links because each submenu (is ideally) meant to have a different color assigned when ’active’. The menu basically looks like this:

STORE
product1
product2

PRESERVES
product3
product4

SWEETS
product5
product6

So when you are viewing product1 page, the ’STORE’ and ’product1’ links will be red for example, and the rest of the buttons would stay black. I have managed to get it to this stage, BUT, what really needs to happen is for each submenu (STORE, PRESERVES, SWEETS) to have it’s own active color. So when you are on product3 page, the active button and heading are green, and when on product5 page the active button and heading are blue etc etc.

So if looking at a store product the nav would look like this:

STORE
product1
product2

PRESERVES
product3
product4

SWEETS
product5
product6

But looking at a preserves product, the nav would look like this:

STORE
product1
product2

PRESERVES
product3
product4

SWEETS
product5
product6

If I was starting the site from scratch I wouldn’t be bothering with this, but I’m re-building an old static site, and it was much easier achieving this with static pages!

If anyone has any ideas then I would be extremely grateful - the only way I can think of doing it (and I’m no MODx or PHP expert) is by having a bunch of different templates, 1 for each category, and having a different &hereClass in the WayFinder calls, which seems really clunky and inelegant.

Any help would be hugely appreciated!

Hi Dan,

A similar situation was addressed here: http://modxcms.com/forums/index.php/topic,38970.0.html

Two working solutions are provided there.

Have a look at that page and see if it is what you are after. Basically, you need an ID for each of those unique main menu items (like you’ve said in the title of your post ). The sub-menu items don’t really need IDs but can inherit their parents properties.

With WF, one of the ways to do that is to use the parameter &rowIdPrefix in conjunction with [+wf.id+] placeholder. The way it works is that if Wayfinder finds this placeholder [+wf.id+] in your WF tpl chunks, it will replace it with a unique ID for the menu item.

Therefore, you can create a parentRowTpl and include the [+wf.id+] in the chunk code so that the parent items (Store, Preserves, Sweets, etc) get unique IDs. Like I said, their children don’t really need IDs, but can inherit their parents properties. So, the children can just use normal rowTpl without the [+wf.id+].

Note however that if you have none parent main menu items, the parentRowTpl will not be applied to them. If you still require unique IDs, then you might have to use [+wf.id+] on the rowTpl instead. There could be other workarounds as well. Hope this makes sense. I am typing in a hurry..

Problems, just holla! Hope this helps!

cheers/k

Hi Kongondo, thanks for the quick response!

I have used the [+wf.id+] placeholders (thanks to your guide - It’s really helping me learn WF!), but I am having trouble referencing the IDs that are output. Maybe it’s just my (lack of!) CSS skills. This is the markup at the moment:



What I want to achieve is ’when the <a> is active, and the heading (which is just a <li>) is active too, and the id=nav25, make those elements blue (for example)’, but I can’t get the styles to work. I can do it for just ’when active’ and also ’when id=nav25’ for the li headings, but not at the same time.

I get the children inheriting parent properties bit - I reckon with a bit of head scratching I can get it to work, it’s just the above stuff that is starting to drive me crazy!

Hope that all makes sense!

It kinda makes sense . Using "Store" as an example:

Do you want "Store" to be "blue" all the time, or only when active?

It could the CSS or your tpl chunks or both...but need more info about this. In addition, post the code of your tpl chunks. Thx.

cheers/k

Only when active. It’s probably easier to see what I mean by looking at the original ’static’ site:

http://www.verutrulysicilian.com/products_caponata.html

If you flick through the product menu you should see what I mean!