滑动导航箭头

Question

我正在尝试在根据当前活动的菜单项水平滑动的标题顶部创建一个滑动箭头。

编辑 - 我所指的网站作为一个例子不再有效。

当页面加载时（即直接在活动菜单项上方），箭头应该处于正确的位置。目前，当页面加载/刷新时，我的努力使它从屏幕的左侧滑入，然后在活动按钮上方休息。

我目前在我的网站上使用jQuery 1.8.3，Modernizr和Cycle Lite来获得各种其他功能。

Answer 1

下小提琴，展示了不亚于我明白你正在寻找：

http://jsfiddle.net/8DZZQ/13/

以下是的jsfiddle的JavaScript。在这里，我使用边距调整了nav_arrow，但是您可以很容易地将其定位并根据选项的offsetLeft进行移动。

将排列函数arr（）添加到mouseover和mouseout事件中，这意味着可以计算nav_arrow的新位置，并相应地调整边距，默认选项由mouseout发送以便默认情况下箭头会弹回。

每个菜单项都有属性默认添加到它，以便onclick事件更改哪个项目成为默认返回 - 虽然这假设您的链接是动态的，并且页面不重新加载/换成另一个页面，如果是这种情况，那么你应该改变哪个div有id =“d”到不同页面的html上的相应项目，并相应地调整代码。

我也加了一个微调数组，所以你可以将你的箭头放在每个div上到你喜欢的精确点。的值被添加到每个菜单项的左侧的位置，所以对于LINK1说，它的宽度是60ish和具有填充/利润率等34微调放置nav_arrow在中心：

window.onload = function() { 
    var fine = [36, 34, 34, 34]; 
    var mitms = document.getElementsByClassName('mitm'); 
    var l0 = (mitms[0].offsetLeft + fine[0]); 
    document.getElementById("nav_arrow").style.marginLeft = l0 + "px"; 

    for (var i = 0; i < mitms.length; i++) { 
     mitms[i].default = false; 
     mitms[i].fine = fine[i]; 
     mitms[i].onmouseover = function() {arr(this);}; 
     mitms[i].onmouseout = function() { 
      var tmp = document.getElementsByClassName('mitm'); 
      for (var j=0; j<tmp.length; j++) { 
       if (tmp[j].default === true) {arr(tmp[j]); break;} 
      } 
     }; 
     mitms[i].onclick = function() { 
      var tmp = document.getElementsByClassName('mitm'); 
      for (var j=0; j<tmp.length; j++) {tmp[j].default = false;} 
      this.default = true; 
     } 
    } 
    mitms[0].default = true; 
}; 

function arr(el) { 
    var mitms = document.getElementsByClassName('mitm'); 
    var l = el.offsetLeft + el.fine; 
    document.getElementById("nav_arrow").style.marginLeft = l + "px"; 
} 

的HTML是类似于你给的例子网站：

<div id="nav"> 
    <div id="d" class="mitm"><a href="#">Default</a></div> 
    <div class="mitm"><a href="#">Link1</a></div> 
    <div class="mitm"><a href="#">Link2</a></div> 
    <div class="mitm"><a href="#">Link3</a></div> 
    <div id="nav_arrow"></div> 
</div> 

随着平稳过渡所覆盖的CSS：

#nav_arrow { 
    position: relative; 
    margin: 20px 0 0 0; 

    /* Gets you your triangle, no image needed */ 
    background: transparent; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 10px solid #000; 
    border-bottom: none; 
    width: 0px; 
    height: 0px; 
    font-size: 1px; 

    /* Transitions to give smooth movement*/ 
    transition: margin 1s; 
    -moz-transition: margin 1s; /* Firefox 4 */ 
    -webkit-transition: margin 1s; /* Safari and Chrome */ 
    -o-transition: margin 1s; /* Opera */ 
    /* IE doesn't support until ie10 */ 
} 

由于IE浏览器还不支持CSS过渡，我敢肯定有将是一个适当的jQuery解决方案，使IE过渡顺利。

希望有所帮助！

编辑！

这也是可行的，简单地使用CSS的喜欢：

#menuitem1:hover ~ #nav_arrow { 
    margin: 0px 0px 0px 185px; 
} 

假设menuitem1是

<a id='menuitem1'></a> 

和使用过渡如前等