jquery - 带进度条的菜单

Question

我想创建一个像这个网站 http://www.easywaytea.com.au/这样的菜单 而不是下拉部分只有进度动画

这就是我正在尝试的

$(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>

但问题是当移动到下一个菜单项动画时，每次我悬停菜单项时都会重复任何建议都会有所帮助。

Answer 1

This could be an example:

$('.menu ul li').mouseover(function(){
    var x = $(this).offset().left + $(this).width();
    $('#menu_progress').animate({width:x});
});

with some CSS style:

Fiddle

Answer 2

试试这个演示

它包括简单的 Jquery 为：

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

});

======= 编辑1 =============

要将进度条角色恢复到鼠标退出的正常位置只需添加鼠标退出事件

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

见演示2

Answer 3

这里我有两个 jsfiddle 示例：

http://jsfiddle.net/wmichaelgreen/Gj6Pv/

http://jsfiddle.net/xXM2z/

在那里你也width用 JQuery 改变了。也许它会帮助你。