亚洲最大看欧美片,亚洲图揄拍自拍另类图片,欧美精品v国产精品v呦,日本在线精品视频免费

  • 站長資訊網(wǎng)
    最全最豐富的資訊網(wǎng)站

    淺談bootstrap如何自定義側(cè)邊導航欄樣式

    淺談bootstrap如何自定義側(cè)邊導航欄樣式

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

    bootstrap側(cè)邊導航欄實現(xiàn)原理

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

    • 使用bootstrap響應式使用工具類 visible-sm visible-xs hidden-xs hidden-sm等對不同屏幕適配

    • 側(cè)滑欄的側(cè)滑效果不使用jquery方法來實現(xiàn),使用的是css3 transforms屬性進行p的移動,側(cè)滑的動畫效果使用的是css屬性transition

    • 缺點:使用兩套菜單,一套是pc端屏幕顯示的菜單,一套是移動端顯示的手機導航菜單,這個缺點比較明顯,生成無關(guān)的標簽,優(yōu)點代碼少,簡單容易接受

    贊(0)
    分享到: 更多 (0)
    網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號