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
<li class="activeMenuItem"><a href="about.html">ABOUT US</a></li>
Gramps
