how to set activepage in wayfinder menu?

31 Posts

andyash Reply #1, 18 years, 8 months ago

I have customized the modxhost template to suit my needs and currently the wayfinder menu has one image on rollover and another one on rollout. I want the active page menu item to show the rollover image whenever the user is on the parent or child menu page and rest of the menu items to show the rollout images for veasy navigation, but am unable to do so. I am a designer and not a coder but can understand codes if shown what to do in a step by step manner.

How do I achieve this?

372 Posts

bwente Reply #2, 18 years, 8 months ago

Your best bet is to use CSS for that. There are plenty of examples available. To get the current page to "activate" use this ’<body id="home-on">’

/*Navigation Links*/

#mainnav a#home {
	background: url(../images/nav_home.jpg) no-repeat left 0px;
	width: 74px;
}

/*Hover States*/

#mainnav a:hover#home {
	background: url(../images/nav_home.jpg) no-repeat left;
}

/*Down States*/

body#home-on a#home {
	background: url(../images/nav_home.jpg) bottom no-repeat;
}

http://ghettocooler.net/2007/05/31/simple-navigation-with-css-image-replacement/

DropboxUploader -- Upload files to a Dropbox account.
DIG -- Dynamic Image Generator
gus -- Google URL Shortener
makeQR -- Uses google chart api to make QR codes.
MODxTweeter -- Update your twitter status on publish.

4,205 Posts

dev_cw Reply #3, 18 years, 8 months ago

Wayfinder by default will assign the current active menu and parents to have the class="active" which you can then style in the css file with the .active {} selector.

For example the default output for wayfinder with an active menu item would be a list:

<ul>
<li class="active">menu item
    <ul>
    <li class="active">menu item</li>
    <li>menu item</li>
    </ul>
</li>
<li>menu item</li>
<li>menu item</li>
</ul>

Here you can see that the active state has been assigned to both the parent and the child. If you are using a custom template setup for wayfinder than you can replicate this function with the appropriate state chunks.

[font=Verdana]Shane Sponagle | [wiki] Snippet Call Anatomy | MODx Developer Blog | [nettuts] Working With a Content Management Framework: MODx

Something is happening here, but you don't know what it is.
Do you, Mr. Jones? - [bob dylan]

31 Posts

andyash Reply #4, 18 years, 8 months ago

Thanks guys. Figured it out by trial and error. I’ll check into your inputs to see which one is quicker.

26 Posts

fanta Reply #5, 18 years, 2 months ago

Hi , I now this rule from CSS, but how actually do it in ModX? Because I’m using one template I cannot assign body id for each page. Does anyone knows how to tell wayfinder to highlight active menu item other way? Should be there any rule in CSS?

241 Posts

bob1000 Reply #6, 18 years, 2 months ago

You can set an id for the body element. Just add <body id="[*alias*]"> to your template and it will replace the placeholder with the field value. You can use any field you want but the alias field is useful because it doesn’t contain spaces.

If you just want to set a site-wide active CSS rule rather than a different active state for different pages, you don’t need to use body id’s. Wayfinder automatically adds a class="active" attribute to the current menu item so you can just style that class.