滑动导航箭头

Posted 2023-04-13

【中文标题】滑动导航箭头

【英文标题】：Sliding Nav Arrow

【发布时间】：2013-02-20 04:56:09

【问题描述】：

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

编辑 - 我作为示例引用的网站不再有效。

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

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

【参考方案1】：

以下小提琴演示了我所了解的您正在寻找的内容：

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

以下是jsfiddle javascript。在此，我使用边距调整了 nav_arrow，但您可以轻松地将其绝对定位并根据选项的 offsetLeft 移动它。

mouseover和mouseout事件中增加了排列函数arr()，意味着可以计算nav_arrow的新位置，并相应调整margin，默认选项由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>

并像以前一样使用过渡等。

【讨论】：

嗨。谢谢。几乎正是我正在寻找的东西。我已经设法为我的网站调整了您的代码。然而，有几件事让我感到困惑：1）单击按钮后，“活动”按钮需要成为默认按钮，以便在单击后箭头停留在其上方 - 正如我引用的网站上那样。关于如何使它工作的任何想法？ 2）您知道设置箭头位置的稍微更精确的方法吗？您提到了一些关于绝对定位和基于选项的 offsetLeft 移动它的内容。我不是 100% 确定你的意思。这可能是我前进的道路吗？ - 莱昂

微调阵列效果很好，谢谢。但是，我在默认元素情况下遇到了麻烦。我的按钮不是动态的，单击按钮时页面会更改/刷新。我已经有一些 javascript 代码可以在单击按钮并重新加载页面后动态地将类分配给按钮。您能否建议我如何修改您的代码以将具有所述类的元素视为默认指向页面加载时间并在鼠标移出时快速恢复？我试过用 'mitm' 代替我的 'active_class' 在不同的点上没有任何运气。

此外，我刚刚注意到 javascript 代码中的每个“默认”实例都会导致 IE8 出现乱码。我在想，如果我可以使用我的“active_class”来表示默认按钮，那么涉及“默认”的代码部分可能就没有必要了。这是一个合理的假设吗？抱歉所有问题 - 我的 javascript 知识充其量只是初级。

经过相当多的背景阅读和对您提供的代码的一些调整，我最终设法完成了这项工作。感谢您的帮助。

我只想说，这是一个令人印象深刻的答案。干得好 CJ！