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)