Jquery 平滑变换菜单下划线

我正在尝试创建一个边框底部，它可以“滚动”菜单下的页面。所以基本上，我使用的是一页wordpress主题，当用户按下菜单项时，我不想让边框底部移动到菜单下，这样它就会跟随页面。一个很好的例子可以在上找到，如果您按下菜单或向下滚动该页面，您可以在滚动后找到一个小边框。你可以找到我目前正在开发的网站

您可以看到，当我滚动时，我已经在每个菜单项下添加了一个边框底部，但我希望在它打开时进行平滑转换 所以它不只是在菜单项之间跳转

我不确定在添加边框底部时是否完全走错了方向，我正在考虑创建一个左边距和一个右边距，在滚动时会发生变化，但我不确定这是否是实现良好代码和良好外观的正确步骤

非常感谢您在这方面的任何帮助

---

另外，我已经搜索了很多例子，但没有找到类似的例子。理解网站#1上的代码非常困难

以您提供的网站为例，它使用了一个名为“活动指示器”的id，该id具有以下css属性：

#active_indicator {
width: 136px;
height: 3px;
background: #FFF;
position: absolute;
left: 0px;
transition: 0.5s;
opacity: 0;

}

它还有一些位置的附加属性

---

对于平滑变换，您可以使用相同的：

transition:0.5s这个网站使用的。
谢谢，但不管我用什么方式，我都没有我要找的移动过渡，这只是改变了不透明度，而不是从左到右和反转。这个过渡正是我要找的，但是，这个过渡是基于静态边距的，我希望是自动的，由于此示例仅在有4个菜单项时有效，因此如果添加新菜单项，则必须始终更改代码。这也是悬停，而不是滚动，但它给了我一些想法，并为这篇文章作出了贡献，谢谢！