bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動(dòng)的，有時(shí)滿(mǎn)足不了個(gè)性化的需求，需要做一個(gè)類(lèi)似于android drawerLayout 側(cè)滑的菜單，這就是我要實(shí)現(xiàn)的bootstrap自定義側(cè)滑菜單，參考了很多官網(wǎng)的側(cè)滑，實(shí)現(xiàn)方法各有不同，優(yōu)缺點(diǎn)也十分明顯，有的官網(wǎng)首頁(yè)為了僅僅實(shí)現(xiàn)一個(gè)側(cè)滑的效果，用了owl.carousel滑屏的插件，個(gè)人覺(jué)得小題大做了。這個(gè)bootstrap側(cè)滑菜單更專(zhuān)業(yè)的名字叫做手機(jī)導(dǎo)航欄。我也比較這個(gè)名字，更符合bootstrap的特性。所以我這篇文章介紹的更容易的一種做法，新手更容易接受。

bootstrap側(cè)邊導(dǎo)航欄實(shí)現(xiàn)原理

• 側(cè)滑欄使用定位fixed

• 使用bootstrap響應(yīng)式使用工具類(lèi) visible-sm visible-xs hidden-xs hidden-sm等對(duì)不同屏幕適配

• 側(cè)滑欄的側(cè)滑效果不使用jquery方法來(lái)實(shí)現(xiàn)，使用的是css3 transforms屬性進(jìn)行p的移動(dòng)，側(cè)滑的動(dòng)畫(huà)效果使用的是css屬性transition

• 缺點(diǎn)：使用兩套菜單，一套是pc端屏幕顯示的菜單，一套是移動(dòng)端顯示的手機(jī)導(dǎo)航菜單，這個(gè)缺點(diǎn)比較明顯，生成無(wú)關(guān)的標(biāo)簽，優(yōu)點(diǎn)代碼少，簡(jiǎn)單容易接受

【