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)

发表评论

请登录后发表评论: