simple menu - can't manage | MODX Community Forums

7 Posts

Shmuratko Reply #1, 15 years, 4 months ago

Hi!

I need the main menu with items of level 1 only. Level 2 will be placed in a different div and it’s not a point here. The main menu display must obey 2 restrictions:
1) When level 1 page is current, the menu’s item is bold and plain text, not a link.
2) When level 1’s children pages are current (i. e. level 2 pages, they are absent in the main menu), the main menu’s item is bold and link.

Restriction 1 is simple to implement. I use the call:

[!Wayfinder? &startId=`1` &level=`1` &hereTpl=`ActiveMenuItem`!]

I can’t make the 2nd restriction work. As of now, the parent of the current level 2 item is a link but plain text - same as all other items.

Could anyone help?

11 Posts

moltis Reply #2, 15 years, 4 months ago

First point: Does your CSS make items with "ActiveMenuItem" bold?

Second point: That should be hereClass=`ActiveMenuItem` not hereTpl

- moltis

7 Posts

Shmuratko Reply #3, 15 years, 4 months ago

No, it must be hereTpl, since I need to get rid of a link for the current item.

How about the 2nd restriction?

793 Posts

ottogal Reply #4, 15 years, 4 months ago

May be you need both:
[tt]&hereTpl[/tt] to get rid of the link, and [tt]&hereClass[/tt] to style the item’s text.

7 Posts

Shmuratko Reply #5, 15 years, 4 months ago

No, &hereTpl is enough to satisfy restriction 1 because the code will contain class "active" for the current item.

My question is - how to satisfy restriction 2?

11 Posts

moltis Reply #6, 15 years, 4 months ago

This is the code I use for Wayfarer, and it works fine with making the actives above it highlighted along with my CSS.

[[Wayfinder?
  &startId=`0`
  &level=`3`
  &outerTpl=`menu.outer`
  &innerTpl=`menu.inner`
  &rowTpl=`menu.row`
  &innerRowTpl=`menu.innerRow`
  &firstClass=`first`
  &lastClass=`last`
  &hereClass=`active`
]]

However, I can’t really show it in effect since I’m running on XAMPP while I develop it.

&hereClass will make the active item and all items above it have the class "active" in addition to other classes.

- moltis

11 Posts

moltis Reply #7, 15 years, 4 months ago

Basically, ottogal is right. You need both.

&hereTpl to remove the link on the current item and &hereClass to style the active tree.

- moltis

7 Posts

Shmuratko Reply #8, 15 years, 4 months ago

moltis, ottogal - thanks a lot! Indeed, it works. At first it didn’t since when I was at the level 2 the code generated for its parent was

<li class="here">
<a ...> link </a>
</li>

and my CSS rule looked like

.here {font-weight: bold;}

I don’t know why "bold" didn’t refer to <a> as well in this example. Do you have an idea? Anyway, I just added

.here a {font-weight: bold;}

11 Posts

moltis Reply #9, 15 years, 4 months ago

Because the general rule for links (in this case not being bold) overrides the bold you added to text in that section. It’s a quirk of CSS.

- moltis

7 Posts

Shmuratko Reply #10, 15 years, 4 months ago

Thanks, moltis. The question is exhausted.