Tab menu using Wayfinder

9 Posts

gaelle berton Reply #1, 15 years, 2 months ago

I would like to change the bg images of the menu item when clicked
here is my wayfinder:

[!Wayfinder?startId=`0` &level=`1`!]

I dont seem able to use any Jquery with the 'active' class, What is the way to proceed?

9 Posts

gaelle berton Reply #2, 15 years, 1 month ago

Any one has examples?
I simply would like to highlight the selected menu item, i am thinking changing the css backgroung image via Jquery. () Maybe i am not putting the script in the right place.. Still new to templating Modx.

[!Wayfinder?startId=`0` &level=`1` &selfClass=`self` !]

863 Posts

Lucas Reply #3, 15 years, 1 month ago

You don't need jQuery for that, you've set selfClass to 'self' so just use css:

.self {
    background-image: url('image.png');
}

9 Posts

gaelle berton Reply #4, 15 years, 1 month ago

It doesnt seem to work for me; where would you put the code? i have tried in the external style sheet used in thde template

.self{
    background-image: url('http://www.ventoline.co.uk/nav_over.png');
}

☆ A M B ☆
894 Posts

benmarte Reply #5, 15 years, 1 month ago

You css is incorrect that's why it's not working.

Should be:


.self{
	background:url('pathtoimage/nav_over.png');
}

Like Lucas said.

Benjamin Marte
Interactive Media Developer
Follow Me on Twitter | Visit my site | Learn MODX

9 Posts

gaelle berton Reply #6, 15 years, 1 month ago

weird glitch gets into the code when i paste it !

.self{
background-image: url('http://www.ventoline.co.uk/nav_over.png');
}

thats is what i have and the other background images work..

863 Posts

Lucas Reply #7, 15 years, 1 month ago

If that's your site it seems to have been done completely in flash. You'll have to change the flash source if you want different styles.

9 Posts

gaelle berton Reply #8, 15 years, 1 month ago

http://www.ventoline.co.uk/works is the site, it is just css html

863 Posts

Lucas Reply #9, 15 years, 1 month ago

Ok

Add this to your stylesheet, below your existing menu styles as you want it to override them:

.menu .self {
    background-image: url('www.ventoline.co.uk/nav_over.png' );
}

Add http:// before the url, there's a bug in how this forum handles code blocks.

9 Posts

gaelle berton Reply #10, 15 years, 1 month ago

That was it! Thanks a lot.