CSS and active state nav elements

Question

Making an active nav element for a menu isn't too difficult, here is an example. http://jsfiddle.net/6nEB6/38/

<ul>
    <li><a href="" title="Home">Home</a></li>
    <li class="active"><a href="" title="Deals">Deals</a></li>
    <li><a href="" title="Support">Support</a></li>
    <li><a href="" title="Contact">Contact</a></li>
</ul>

CSS:

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
} 

ul {
    background: url(http://shared.web2works.co.uk/tmp/tab-bg-top.png) no-repeat;
    height: 51px;
    font-family: arial;
    font-size: 14px;
}

ul li {
    float: left;
    height: 51px;
}

ul li a {
    display:block;
    background: url(http://shared.web2works.co.uk/tmp/nav-seperator.gif) no-repeat top right;
    padding: 17px 20px 17px 21px;
    text-decoration: none;
    color: #263e60;
}

ul li:last-child a{
    /*background-image: none;*/
}

ul li:first-child a{
    padding-right: 75px;
}

li.active a, li:hover a {
    background: #02284c; 
    color: #FFF;
    margin-left: -2px;
    padding-left: 23px;
}

What I need is a bit different. In most active states people tend to style their menu buttons so you can use the same style for every button. I need it so the buttons activate a different image for every state.

This is an image of what I'm talking about:

Those buttons have different glow effects which are all different images. When you select a different button the glow should stay active. So if I do it this way I'm not able to use the same style for every button.

The buttons change pages and the hovers work correctly, I'm just having trouble with setting the states for each button to active when it reaches it's destination page. The only state that works is the first button, the home page.

Here is my code(important bits):

<div id="wrapper">
</div>

<div class="menu" id="menunav">
    <ul class="menuul">
        <li><a id="home-link">Home</a>
        </li>

        <li><a id="work-link">Work</a>
        </li>

        <li><a id="about-link">About</a>
        </li>

        <li><a id="contact-link">Contact</a>
        </li>

        <li><a id="resources-link">Resources</a>
        </li>
    </ul>
</div>

CSS:

.menu {
    height: 50px;
    margin: auto;
    width: 650px;
    text-align:center;
    padding:10px;


}

.menu ul li {
    display: inline-block;
    margin: 0 10px;
}

.menu ul li a {
    display: block;
    text-indent: -99999px;
    cursor: pointer;
    color: #00000;

}

#home-link {
    background: transparent url() no-repeat;
    width: 90px;
}

#home-link:hover, #home-link.current-item {
    background:url() no-repeat;
}

#work-link {
    background: transparent url() no-repeat ;
    width: 90px;
}

#work-link:hover, #about-link.current-item {
    background:url() no-repeat;
}

#about-link {
    background:url() no-repeat;
    width: 90px;
}


#about-link:hover, #services-link.current-item {
    background:url() no-repeat;

}

#contact-link {
    background: transparent url() no-repeat;
    width: 90px;
}

#contact-link:hover, #work-link.current-item {
    background:url() no-repeat;
}

#resources-link {
    background:url() no-repeat;
    width: 100px;
}

#resources-link:hover, #contact-link.current-item {
    background:url() no-repeat;
}

.current-item {
}

JS:

function switchscrollscroll()
{
    var scrolloffset = $("#wrapper").scrollLeft();

    if(scrolloffset == 0 && scrolloffset <= 1999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#home-link').addClass("current-item");
    }
    else if(scrolloffset >= 2000 && scrolloffset <= 3999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#work-link').addClass("current-item");
    }
    else if(scrolloffset >= 4000 && scrolloffset <= 5999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#about-link').addClass("current-item");
    }
    else if(scrolloffset >= 6000 && scrolloffset <= 7999)
    {
        $('#menu ul li a').removeClass('current-item');
        $('#contact-link').addClass("current-item");
    }
    else if(scrolloffset >= 8000 && scrolloffset <= 10000)// Contact
    {
        $('#menu ul li a').removeClass('current-item');
        $('#resources-link').addClass("current-item");
    }
}

switchscroll();
 $("#wrapper").scroll(function(){
    switchscrollcroll();
});
});

Images were taken out on purpose. If anyone has done something like this before, I'd appreciate the help.

Answer 1

You can do this by adding a class to the body. For example if you have class work on the body of the work page then your css can look something like

.work #work-link {
    background: transparent url(different image) no-repeat ;
}
#work-link {
    background: transparent url(default image) no-repeat ;
    width: 90px;
}

If you don't want to go around editing every page then you can use jquery to figure out which page you are on and add the appropriate class