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.)…
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?
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.
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…
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.
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.)
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]
});