I am a newbie to modx and currently enjoying some of its features.However im having issue with creating a vertical menu.What i want to do is that:
I want to highlight my first menu item when the site loads for the first time. i seem not to find any appropriate Wayfinder template to do this for me.I need HELP
My Current Wayfinder Call
[!Wayfinder? startId=`1` &level=`1` &hereTpl=`menulinks` !]
Wayfinder Template
<li><a style="background-color:#ADADAD;" href="[+wf.link+]" title="[+wf.title+]">[+wf.linktext+]</a></li>
[+wf.wrapper+]
This only works once the link is clicked but i would want the first child menu to have a grey background once the site load.Thanks
Thnaks alot Sottwell. I tried your suggession and found out that with the hereClass and selfClass the visitor would have to click the link first before it works. But the main issues still persist.When i load the index page fresh, nothing is hightlighted. But i would like my first child item to be hightlighted without the visitors involvement.Be glad if u could through more light on the issue.THANKS
-
☆ A M B ☆
- 24,524 Posts
Actually you don’t need a distinct template for that if you’re using the default unordered list that Wayfinder generates. You can specify two classes to use, selfClass for the exact page the visitor is on, and hereClass for the "breadcrumb" of the page the visitor is on plus all of its parents up to the top level. These classnames will automatically be added to all li elements in the menu. You can then use CSS to style items with the selfClass name and/or the hereClass name you specify.
[!Wayfinder? startId=`1` &level=`1` &hereClass=`here` &selfClass=`self` !]
Then in your CSS something like this will give all the a elements in the .here li containers the grey background:
.here a{background:#adadad;}