站長資訊網(wǎng)
bootstrap自帶的響應(yīng)式導(dǎo)航欄是向下滑動的，有時滿足不了個性化的需求，需要做一個類似于android drawerLayout 側(cè)滑的菜單，這就是我要實現(xiàn)的bootstrap自定義側(cè)滑菜單，參考了很多官網(wǎng)的側(cè)滑，實現(xiàn)方法各有不同，優(yōu)缺點也十分明顯，有的官網(wǎng)首頁為了僅僅實現(xiàn)一個側(cè)滑的效果，用了owl.carousel滑屏的插件，個人覺得小題大做了。這個bootstrap側(cè)滑菜單更專業(yè)的名字叫做手機(jī)導(dǎo)航欄。我也比較這個名字，更符合bootstrap的特性。所以我這篇文章介紹的更容易的一種做法，新手更容易接受。
bootstrap側(cè)邊導(dǎo)航欄實現(xiàn)原理
-
側(cè)滑欄使用定位fixed
-
使用bootstrap響應(yīng)式使用工具類 visible-sm visible-xs hidden-xs hidden-sm等對不同屏幕適配
-
側(cè)滑欄的側(cè)滑效果不使用jquery方法來實現(xiàn)，使用的是css3 transforms屬性進(jìn)行p的移動，側(cè)滑的動畫效果使用的是css屬性transition
-
缺點：使用兩套菜單，一套是pc端屏幕顯示的菜單，一套是移動端顯示的手機(jī)導(dǎo)航菜單，這個缺點比較明顯，生成無關(guān)的標(biāo)簽，優(yōu)點代碼少，簡單容易接受
【
