So, I'm a newbie in the world of development (I'm a designer, not a coder) and a student who has a web project due in 2 days. I can't figure out how to get the active page's menu button to be a different color than the rest of the menu bar. I've successfully changed the rollover states and background colors, but the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus doesn't change the active state like I thought I would. Please help!

Nancy'e solution is a really good and solid way to show the current menu item and if I did not have another way of doing the same, I would most certainly use Nancy's solution.

So, here is the solution that I use.

the JS

<script src="SpryAssets/SpryDOMUtils.js"></script>

<script>

function InitPage(){

Spry.$$('#MenuBar1 li').forEach(function(node){

var a=node.getElementsByTagName("a")[0]; // finds all a elements inside the li, but we only want the first so [0]

if(a.href == window.location){

Spry.Utils.addClassName(node,"activeMenuItem");

}

});

}

Spry.Utils.addLoadListener(InitPage);

</script>

and the CSS

<style>

.activeMenuItem a {

background: yellow !important;

color: red !important;

text-decoration: underline;

}

</style>

The difference between the two solutions is in the way the the current menu item is identified. In Nancy's solution each body and each menu item tag needs to have a class attached to it. In my solution the identification is made by comparing the URL of the page with the menu item link, thus no extra markup is needed.

Both of the above solutions assume that you are using a template system such as DWT or SSI.

If you are not using a template system and are repeating the menu structure on each page, you are better off ignoring both of the above and merely adding the activeMenuItem class to the corresponding menu item as in

I have just come upon the SAME ISSUE; also a designer and not a coder. did you ever solve this one? I was doing the exact same thing as you were, per instructions on the help.adobe.com site ... Does not work.(!)

I was referring to the original post; sorry i'm kind of a novice at this forum. I have my spry menu on the template, from which i've created all the other pages on the website.

Per the original post, engravedbeauty2578 posted:

"..I can't figure out how to get the active page's menu button to be a different color than the rest of the menu bar. I've successfully changed the rollover states and background colors, but the ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus doesn't change the active state like I thought I would...."

I also have blue type in the menu bar when the pages first load. I have successfully changed the "hover" color to red, but once the new page becomes active, its tab color reverts back to blue. So i specified the "a:focus" color to red but nothing happened. I was assuming that "focus" referred to the active page's tab. I probably assumed wrong, right?

Nancy, thanks for the link re: persistent-page-indicator; i've read it and headed over to the Dreamweaver help PDF on "editable tag attributes in a template". It will take me some time but I think i should be able to solve it. Appreciate your help!