Question

I am looking to create a nav menu where the active link has a background image behind it and as the next link is clicked the image goes to the next active link. I am not sure if this can be done solely with CSS or if some jQuery is required also.

<div id="header">
    <div id="company_name">

    </div>
        <ul id="gen_navigation" class="container_fixed">
            <li><a href="#"><span>Home</span></a></li>
            <li><a href="#"><span>About</span></a></li>
            <li><a href="#"><span>Technology</span></a></li>
            <li><a href="#"><span>Applications</span></a></li>
            <li><a href="#"><span>Benefits</span></a></li>
            <li><a href="#"><span>Inquiries</span></a></li>
        </ul>

</div>

http://jsfiddle.net/Dk6eq/

Note: I only have the basic css and html at the moment

Answer 1

It can’t be done with just CSS since CSS has no lasting “click” trigger.

Simply add a CSS class, something like

.active {
   background-image: url(...)
}

Then, when you click…

$("#gen_navigation a").on('click', function () {
   $("#gen_navigation a").removeClass('active');
   $(this).addClass('active');
});