css possibly jquery help

My designer has designed the following navigation

He is wanting it implme开发者_JAVA技巧nted so that the dark bar underneath the nav animates to the current page on page load (think progress bar). No obvioulsy with PHP I can sort it so that the current a has a class so I can identify the current page, however I have no idea how I could animate the bar underneath the nav, does anyone have any advice?

Sorry I'll post in here instead.

I think you would need a div within a div. The outer div (representing the full line underneath your navigation) would need to be the width of the total navigation. You could then use jquery to animate the inner div (progress bar) to the same width as the nav element above and animate its left position to that of the navigation item you have added the class to.

Something Like

$(document).ready(function(){

    $('.selectedNav').click(function(){

    var navWidth = $(this).width();
    var posLeft = $(this).position();

    $('#innerDiv').animate({'width': navWidth, 'left': posLeft.left});

    });

});

• Make an image that is your green box with the text and bar "cut out" (e.g. transparent)
• place that into a <div style="position:relative;">
• place another div in that one: <div style="position:absolute;top:0px;left:0px;height:100%;" id="progress">
• Set the width of your "progress" div to 90px for step 1, 195px for step 2, 278px for step 3, 414px for step 4
• If you want, set the with using jQuery's animation: $.animate({width: 195}) to get it to scroll.

Do this and both your bar and text will move.

If you don't care about the text, skip the image part and just make a grey div that does the same thing.

See www.vouchr.com for the animation effect.

You could try this jquery plugin: http://grasshopperpebbles.com/ajax/a-jquery-progress-bar-plugin/