Bootstrap 3.0 左侧滑动菜单

Posted

技术标签:

【中文标题】Bootstrap 3.0 左侧滑动菜单【英文标题】:Bootstrap 3.0 Sliding Menu from left 【发布时间】:2013-10-03 05:19:53 【问题描述】:

我使用mmenu 在我的 bootstrap 3.0 网站中实现了从左到右的滑动菜单。然而,在安卓(三星银河)中的表现并不理想。 我还有一个默认的折叠菜单(导航下拉菜单),它的性能要好得多。

我想知道你们中是否有人有改进左侧菜单的解决方案?是否有任何 Bootstrap 3.0 组件可以做到这一点并且与默认下拉菜单一样平滑? (找不到文档中提到的任何内容)?或任何其他建议?

【问题讨论】:

看看getbootstrap.com/examples/offcanvas 或***.com/questions/16871718/… 可能 谢谢哥们。我最终确实使用了画布。除了 iphone 之外,其他手机上只有很少的性能问题。 Bootsrap 3 and mmenu的可能重复 【参考方案1】:

我相信,尽管此处可以选择 javascript,但通过强制使用 CSS3 进行硬件加速,您可以获得更流畅的动画。您可以通过在移动的 div 上设置以下 CSS3 属性来实现此目的:

div.hardware-accelarate 
     -webkit-transform: translate3d(0,0,0);
        -moz-transform: translate3d(0,0,0);
         -ms-transform: translate3d(0,0,0);
          -o-transform: translate3d(0,0,0);
             transform: translate3d(0,0,0);

我已经制作了一个plunkr 设置供你们测试和调整...

【讨论】:

【参考方案2】:

可能晚了,但这里有一个插件可以完成这项工作:http://multi-level-push-menu.make.rs/

v2 还可以使用滑动等移动手势;)

【讨论】:

链接失效 仍然可以通过 archive.org 访问链接:web.archive.org/web/20200109020357/http://…

以上是关于Bootstrap 3.0 左侧滑动菜单的主要内容,如果未能解决你的问题,请参考以下文章

美团点餐左侧菜单滑动

鼠标滑动一定距离的左侧菜单置顶效果

安卓开发之左侧滑动菜单学习

【求助】SlidingMenu 左右滑动菜单与viewpage冲突问题

自定义导航栏切换(从下拉菜单到左侧滑动)

Xcode AMSlideMenu 仅使用按钮打开左侧菜单,禁用滑动