带弹性的导航栏
Posted 小全栈
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了带弹性的导航栏相关的知识，希望对你有一定的参考价值。
妙味的官网和智能社的官网上，会看到一个带弹性的导航栏，这个导航栏的效果非常流畅，其实这个效果并不难实现，说一下思路：正常的导航栏布局，只是在第一个li前加一个div，设置定位为绝对定位，并给div设置背景，设置其z-index值为1，设置li的z-index值为2，设置其父元素ul为相对定位，li设置成相对定位，li如果不设置成相对定位，会出现z-index失效的麻烦，然后用js调节背景的位置，当然了，还需要引入写好的弹性运动框架，弹性运动框架需要注意的问题是，检测终止条件，和终止之后直接将div拖到目标点。
代码地址：https://github.com/peng666/blogs/tree/gh-pages/flex
在线测试地址：http://peng666.github.io/blogs/flex
以上是关于带弹性的导航栏的主要内容，如果未能解决你的问题，请参考以下文章