jquery鼠标经过导航菜单来回弹性滑动

今天在一个设计中发现菜单下面有一条横线,我想起了这个有意思的效果,鼠标经过导航来回滑动的效果,滑动导航菜单其实有两种哦。

第一种:使用一个css横线

jQuery弹性滑动菜单,也就是鼠标滑过导航的时候下面一条横线随着鼠标滚动,当鼠标离开菜单时自动滚回原来的位置,看起来挺好看的

See the Pen jquery弹性导航菜单 by kujian (@kujian) on CodePen.

演示

第二种:使用背景

跟Miui官方网站上的类似,不过它那个代码太复杂了,而且是事先设置了位置,如果导航文字改变或者位置改变则需要重新修改js代码的位置数组,建议使用我这种直接用js代码定义比较智能省功夫

See the Pen jquery弹性背景菜单 by kujian (@kujian) on CodePen.

演示

我比较喜欢第一种方式,里面同样可以实现第二种的效果,只需要将nav-line的样式改为这个背景,然后调整一下css样式就可以了。

你会怎么做呢?说说你的看法吧。

原文:jquery鼠标经过导航菜单来回弹性滑动 ,未经许可,禁止转载。
来源:前端开发博客 (http://caibaojian.com/jquery-slide-menu.html)