Bootstrap 3.0 Sliding Menu from left

twitter-bootstrap drop-down-menu twitter-bootstrap-3 slidingmenu mmenu
Syl picture Syl · Sep 27, 2013 · Viewed 102.4k times · Source

I've implemented a sliding menu from left to right in my bootstrap 3.0 website using mmenu. However, the performances in Android (samsung galaxy) are not ideal. I also have a default collapsing menu (nav- dropdown) which perform much better.

I was wondering if any of you guys has a solution to improve the left menu ? Is there any Bootstrap 3.0 component that would do that and be as smooth as the default dropdown ? (couldn't find anything mentioned in the doc) ? or any other recommendation ?

Answer

Marnix Harderwijk picture Marnix Harderwijk · Feb 12, 2014

I believe that although javascript is an option here, you have a smoother animation through forcing hardware accelerate with CSS3. You can achieve this by setting the following CSS3 properties on the moving div:

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);
}

I've made a plunkr setup for ya'll to test and tweak...

Related questions

How to left align bootstrap 3 dropdown menu?

In the above image MenuItems are align to right side of the MyMenu, I needed to left align the MenuItems of MyMenu (I mean it must aligned to left edge of MyMenu), I try to use pull-left and pull-right class …

Read More
Keep Bootstrap Dropdown Open When Clicked Off

If the dropdown is visible, and I click outside the dropdown it closes. I need it to not close. From the documentation: When opened, the plugin also adds .dropdown-backdrop as a click area for closing dropdown menus when clicking outside …

Read More
How to make Twitter Bootstrap menu dropdown on hover rather than click

I'd like to have my Bootstrap menu automatically drop down on hover, rather than having to click the menu title. I'd also like to lose the little arrows next to the menu titles.

Read More