Colored Menu by link-attribute with Wayfinder

15 Posts

ragnar Reply #1, 15 years, 5 months ago

Hi community

I wouldlike to create a menu in a different color for each category.

My strucutre:

root
Balcony
submenu 1
subsub 2
subsub 2
...
submenu 2
Roof
submenu 1
subsub 2
subsub 2
...
submenu 2
...
Street
...

so my goal is to have different colors for the different main categories (roof, balcony, street) and all it’s children.

the easiest thing would be to alter the outerTpl and add a <div class="red"><ul>[[+wf.wrapper]]</ul></div>, unfortunately it only adds this line once on the root level. so i can’t assign multiple colors.

my actual Wayfinder call looks like this: [[!Wayfinder? &startId=`[[!UltimateParent]]` &hideSubMenus=`true` &parentClass=`hide` &hereClass=`current` &selfClass=`iamactive` &level=`3`]]

now the outputted code looks like this:

<div class="subnavi-holder">
  <ul>
    <li class="first hide current">
      <a href="topcategory/balcony/">Balcony</a>
      <ul>
        <li class="first current iamactive">
          <a href="balance.html">Balance</a>
        </li>
        <li>
          <a href="topcategory/balcony/flexible.html">flexible</a>
        </li>
        <li class="last hide">
          <a href="topcategory/balcony/objects/">objects</a>
        </li>
      </ul>
    </li>
    <li class="hide"><a href="topcategory/roof/">roof</a></li>
    <li class="last hide"><a href="topcategory/special/">Special</a></li>
  </ul>
</div>

and it should look like this:

<div class="subnavi-holder-red">
  <ul>
    <li class="first hide current">
      <a href="topcategory/balcony/">Balcony</a>
      <ul>
        <li class="first current iamactive">
          <a href="balance.html">Balance</a>
        </li>
        <li>
          <a href="topcategory/balcony/flexible.html">flexible</a>
        </li>
        <li class="last hide">
          <a href="topcategory/balcony/objects/">objects</a>
        </li>
      </ul>
    </li>
  </ul>
</div>
 
<div class="subnavi-holder-blue">
  <ul>  
    <li class="hide"><a href="topcategory/roof/">roof</a></li>
  </ul>
</div>

<div class="subnavi-holder-green">
  <ul>
    <li class="last hide"><a href="topcategory/special/">Special</a></li>
  </ul>
</div>

I hope there is an easy option with the tpl’s do realise the colored menu.

I played around with all kinds of TPL’s and variations, but I just did not come to a success.

So I hope that someone can give me a hint, to get me back on track...

thank you
cheers

☆ A M B ☆
24,524 Posts

sottwell Reply #2, 15 years, 5 months ago

You can set a unique ID for each item, and use CSS to style items and their children as desired.

&rowIdPreﬁx
default: FALSE
values: name of preﬁx
description: If this parameter is set, Wayﬁnder will replace the placeholder [+wf.id+] with a unique id
consisting of the speciﬁed preﬁx plus the document id.
example: &rowIdPreﬁx=`topMenu` will output the following for doc # 29: id="topMenu29"

So if Balcony is #4, then you could have in your CSS

#category4 ul li a{background:blue;}

and all of the submenu items under Balcony would have a blue background.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

15 Posts

ragnar Reply #3, 15 years, 5 months ago

that solution works

I think it’s not the most elegant, because I have multiple context with different languages and for each context tree, there has to be a colored navigation. So I have 5 contexts and with them 5 times the page "balcony" which has to be blue.

so now the css looks like this:

#colorMenu29 a, #colorMenu131 a { color:blue; } 

and

#colorMenu29 a:hover, #colorMenu131 a:hover { color:blue; text-decoration:none; }

so with 5 context I have to add three more ID’s and if they ever change, I have to manually adapt the ID’s in the CSS file. So not the most practical approach. But it works for now.

Still would be interessted in some other solutions

just for the sake of perfection

but, thank you. It really helped me out.