How to change look of 'active' menu item

Hello,

I am trying to change the look of the ‘active’ submenu item… Meaning, when you’re on a certain page - the corresponding submenu item will look different (i.e. bold, different color, etc.)…

URL is –> IDC’s Fundamentals for Newer Directors

JS code I’m using –>

$(“*”).find(“a[href='”+window.location.href+“']”).each(function(){
$(this).addClass(“submenuactive”)
})

Any help/advice would be appreciated! Thank you!

Jodi

Hi Jodi. Welcome to SitePoint. :slight_smile:

You can do that with CSS alone if you want. For example, each page relating to a sidebar link can have a special class on the <body> element, such as

<body class="oversight">

Then in your CSS, you have

.oversight .dropTarget4 a {}

and have the special color for that link inside the brackets above. So, when you are on a page with that body class, it will target that link and color it.

Unfortunately, the menu is part of a grid within Vignette so it would take me forever to add special code to each and every page… Right now, files are pulled from several places to build the page so I’d like to get something that I can just add once and be done… Know what I mean? :frowning:

Often, a CMS will let you insert a special class to a link based on the page you are on. for example, in the CMS I use, I have a rule that if the URL includes, say, “oversight”, then that particular link gets a class of “current”. Don’t know if you can do thes with Vignette, though, as I’m not familiar with it.

Using JavaScript for this is not ideal, but if that’s your only option, someone else will have to reply, as it’s not my area, I’m afraid. :slight_smile:

I’m not that familiar with Vignette either and we use it for several sites, so I’m hesitant about changing the ‘active’ class… There’s gotta be something… :frowning:

One thing I notice:

The URLs in your links look like this:

href="/oversight/oversight_portfolio"

but

href='"+window.location.href+"'

is probably looking for the full URL, with the http:// bit etc. Can you turn the URLs into absolute ones in Vignette?

Meaning I should add “http://fundamentals.idc.org/” to each link and that might work?

It’s worth a try, but I can’t promise it will work. That’s my best guess as to why the jQuery isn’t working, though. :slight_smile:

It was worth a shot, but that did not fix the problem… I appreciate your help regardless! :frowning:

Actually, now that I think of it, that jQuery code can’t work as is, because the jQuery loads before the page, so at the time it loads, there is no <a> element yet. So you could either wrap that jQuery code in the $(document).ready() code, or place your jQuery links as they are but at the bottom of the page, just before the closing </body> tag.

i’ve added to the $document).ready() and it’s still not working… am i missing some other code?

Looks like it’s not quite in the right place. Try changing

[COLOR="Red"]});[/COLOR]
$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
}) 

to

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
[COLOR="Red"]});[/COLOR]
}) 

I’m experimenting around a bit, but at the moment, you’ve moved the code into a new file, but it doesn’t look like it’s inside the document ready code, but outside it.

EDIT: Actually, you maybe just left out the final

});

in your code, so rather than move anything, just add and extra

$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
[COLOR="Red"]});[/COLOR]
}) 

and don’t actually move anything. (As I say, this isn’t my area.)

that’s not right either and it’s messed up the menu so now everything is showing…

Ah, OK, so that was wrong. Perhaps try my first suggestion then. Try inserting the code here:

$(function(){
       	$("a[id^='dropATarget']").click(function(){
			$('a').not($(this)).next().slideUp();
       		$(this).next().slideToggle("normal");
       	});

[COLOR="Red"]$("*").find("a[href='"+window.location.href+"']").each(function(){
$(this).addClass("submenuactive")
//add your own logic here if needed
});[/COLOR]

       });

OMG! You did it! I love you! :slight_smile:

THANK YOU SOOOOOO MUCH for saving my ass… :slight_smile:

Jodi

Well I’ll be darned! Just goes to show that sometimes, the blind can lead the blind somewhere useful. :smiley:

Glad we got there in the end.

Yes, indeed… That’s why I like being a designer and not a programmer (no offense)… This stuff scares me… :slight_smile:

Have an awesome weekend! :slight_smile: