妙味的官網(wǎng)和智能社的官網(wǎng)上，會(huì)看到一個(gè)帶彈性的導(dǎo)航欄，這個(gè)導(dǎo)航欄的效果非常流暢，其實(shí)這個(gè)效果并不難實(shí)現(xiàn)，說一下思路：正常的導(dǎo)航欄布局，只是在第一個(gè)li前加一個(gè)div，設(shè)置定位為絕對(duì)定位，并給div設(shè)置背景，設(shè)置其z-index值為1，設(shè)置li的z-index值為2，設(shè)置其父元素ul為相對(duì)定位，li設(shè)置成相對(duì)定位，li如果不設(shè)置成相對(duì)定位，會(huì)出現(xiàn)z-index失效的麻煩，然后用js調(diào)節(jié)背景的位置，當(dāng)然了，還需要引入寫好的彈性運(yùn)動(dòng)框架，彈性運(yùn)動(dòng)框架需要注意的問題是，檢測(cè)終止條件，和終止之后直接將div拖到目標(biāo)點(diǎn)。

?

代碼地址：https://github.com/peng666/blogs/tree/gh-pages/flex

在線測(cè)試地址：http://peng666.github.io/blogs/flex

轉(zhuǎn)載于:https://www.cnblogs.com/zpfind/p/5529631.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。