Adding active state to my menu

7 Posts

xputris Reply #1, 14 years, 9 months ago

I am in the process of building out a new site in MODX Evolution 1.0.5 and need some help with understanding the navigation. I have searched throughout Google and haven't quite found what I was looking for.

I am basically trying to add active states to my top navigation and sidebar menus so that the active state is a different color.

I can add all of this through css by putting a class on each li but I know there is a way to do this dynamically. Any help or direction would be greatly appreciated.

Here is my dev site. http://www.myxpd.com/dwo/home

☆ A M B ☆
1,780 Posts

Frogabog Reply #2, 14 years, 9 months ago

Wayfinder does this for you if you insert &hereClass= `` into your Wayfinder call.

Like this:

[[!Wayfinder?
  &startId=`0`
  &outerClass=`outer`
  &innerClass=`inner`
  &outerTpl=`menuOuter`
  &rowTpl=`menuRow`
  &innerTpl=`menuInner`
  &innerRowTpl=`menuInnerRow`
  &hereClass=`current_page_item`
  &firstClass=``
  &lastClass =`` ]]

In your css, then define the class stylings under whatever class you choose (example defines .current_page_item - you can call it whatever you like).

Check out Mary's tutorials here for Evolution - http://modxvideotutorials.com/modx-evolution/

I am curious why you're using Evolution instead of Revolution if you're new to MODX. While many people still love Evolution, Revolution is all kinds of things Evolution isn't. Media Sources in and of itself is the best reason to use Revolution at this point IMO.

EDIT: I think the above code is Revolution specific. Revolution uses these brackets:

 [[   ]]

while Evolution uses these:

  [   ]

. You'll want to make a note of that. Sorry, I just pasted what I'm working with at the moment which just happens to be Wayfinder and Revolution. [ed. note: frogabog last edited this post 14 years, 9 months ago.]

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

7 Posts

xputris Reply #3, 14 years, 9 months ago

Thank you for your post, I will try this out. I work for a web design company who has been building sites on Evolution for a long time. I just don't think they are ready to try something new, but they should. As one of their designers I will start to mess with revolution on my next personal project. Thanks again for your help.

☆ A M B ☆
1,780 Posts

Frogabog Reply #4, 14 years, 9 months ago

Written tutorials for Evolution can be found here:

http://codingpad.maryspad.com/

(different site than the video tutorials - same tutorials however)

There's a LOT more documentation available for Evolution at the moment so you should be able to find about anything you need by googling. Include "MODX" in your searches.

This should help you with Wayfinder and Evolution as well. A whole e-book about Wayfinder.

https://forums.modx.com/thread/?thread=40293&page=

Have fun :~}

Frogabog- MODX Websites in Portland Oregon
"Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
Having server issues? These guys have MODX Hosting perfected - SkyToaster

☆ A M B ☆
24,524 Posts

sottwell Reply #5, 14 years, 9 months ago

By default Wayfinder adds a classname of "active" to the current page's li container and its parents if using a multi-level menu. You can then use this in your CSS file to style the .active elements.

This can be changed by using a couple of snippet parameters to set the classname for the active page and its parents as well as for the active page alone. Using a custom rowTpl, you can have the classname added to the li tag or the a tag (or whatever structure you're using for your menu).

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