平滑变换菜单下划线

时间:2015-12-16 09:53:42

标签: jquery html css wordpress

我正试图创建一个边框底部"滚动"与菜单下的页面。所以基本上,我使用单页wordpress主题,当用户按下菜单项时,我不想在菜单下移动边框底部,以便它跟随页面。在http://vatorsecurities.se/上可以找到一个很好的例子。如果您按下菜单或向下滚动该页面,您可以在滚动后找到一个小边框。您可以在http://euronsin.farrabah.se/

找到我目前正在处理的网站

我可以看到,当我滚动时,我已经在每个菜单项下添加了一个border-bottom但是我希望在http://vatorsecurities.se上进行平滑转换 所以它并不只是在菜单项之间跳转。

我不太确定在添加边框底部时我是否完全朝着错误的方向行进,我正在考虑创建一个边距左边和边距右边的内容滚动,但我不确定这是否是实现良好代码和良好外观的正确方法。

非常感谢任何帮助。

PS。我已经搜索了很多例子并且没有找到这样的东西。理解网站#1上的代码非常困难。

1 个答案:

答案 0 :(得分:0)

您作为示例http://vatorsecurities.se/提供的网站使用名为“active_indicator”的ID具有以下css属性:

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

}

它还有一些额外的职位属性。

对于平滑转换,您可以使用此站点使用的transition: 0.5s;