妙味的官網和智能社的官網上，會看到一個帶彈性的導航欄，這個導航欄的效果非常流暢，其實這個效果并不難實現，說一下思路：正常的導航欄布局，只是在第一個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

轉載于:https://www.cnblogs.com/zpfind/p/5529631.html

總結

以上是生活随笔為你收集整理的带弹性的导航栏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。