Question

I want to create a menu like this site
http://www.easywaytea.com.au/
not drop down part only the progress animation

this is what i am trying

$(document).ready(function(){
// box 1
$('#level2').mouseover(function(){
    $('#menu_progress').animate({width:"37%"});
});
$('#level2').mouseout(function(){
    $('#menu_progress').animate({width:"8%"});
});

});

<div class="menu_container">
    <nav class="menu">
        <ul>
            <li id="level1"><a href="index.html" class="current">Home</a></li>
            <li id="level2"><a href="current-promotions.html">Current Promotions</a></li>
            <li id="level3"><a href="our-drinks.html">Our Drinks</a></li>
            <li id="level4"><a href="faq.html">FAQ’s</a></li>
            <li id="level5"><a href="location.html">Location</a></li>
            <li id="level6"><a href="contact-us.html">Contact Us</a></li>
        </ul>
    </nav>
  <div id="menu_progress"></div>
  </div>

but problem is that when moving to the next menu item animation is repeating every time i hover a menu item
any suggestion will be helpful.

Answer 1

Try this DEMO

Its Include simple Jquery as:

$(function(){
  $(".navLinks").on("hover","a",function(){
    width =$(this).position().left +parseInt($(this).width());
    $(".thermo").animate({width: width}, {queue: false});
  });

});

======= Edit 1 ============

To role the progress bar back to normal position on mouseout
Just Add a mouse Out event

$(".navLinks").mouseout(function(){
  width =$(".navLinks .activeLink").position().left +parseInt($(".navLinks .activeLink").width());
  $(".thermo").animate({width: width}, {queue: false});
  });

See the DEMO2