Active Menu Item

Question

Hi there.
I'm going to be making a site pretty soon with a menu that has the menu items consisting of tabbed images (I might use some jquery script for this instead), but when they are hover, they will change colour giving the typical button effect.
I just wondered, how could I show a different colour when the user is currently on that page.
Does that make sense.?
Thanks,
Craig

Answer 1

Using the Spry framework you would have the following in the head section of your document
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
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>
<style type="text/css">
.activeMenuItem {
     font-weight: bold;
</style>
The above finds the list item with the same href as the URL, then turns the font into bold. Similar code can show a different background colour or a different image.