滑动导航箭头(Sliding Nav Arrow)

我想在我的头的最顶部是水平滑动，根据当前激活的菜单项来创建一个滑动箭头。

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

箭头应该是在正确的位置时，页面加载（即直接在活动菜单项以上）。 目前，我的努力它从屏幕的左侧将要停下来激活键时，页面加载/刷新前上方滑动。

我目前使用在我的网站为各种其他功能的jQuery 1.8.3，Modernizr的和周期的精简版。

Answer 1:

下面的小提琴，我了解你正在寻找演示之多：

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

以下是的jsfiddle的JavaScript。 在这方面，我使用的利润率调整nav_arrow，但你可以很容易地把它绝对定位的基础上的选项offsetLeft移动。

该装置的功能，ARR（），被添加到鼠标悬停和鼠标移开的事件，这意味着nav_arrow的新位置可以被计算，并且余量相应的调整，与默认选项由鼠标移开，以便发送对于箭头弹回默认。

每个菜单项已经具备了财产默认添加到它，为了一个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过渡，我相信会有制作IE过渡平滑合适的jQuery的解决方案。

希望帮助！

编辑！

这也可能与简单地使用的CSS喜欢：

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

假设menuitem1是

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

和使用过渡作为等之前

文章来源: Sliding Nav Arrow