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