Slide Over Menu combined with Bootstrap

Question

I am trying to create something similar to this effect, where you can click on the hamburger icon and a menu slides out: http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/

I don't need the hover event, just the click.

My problem is that in the above example, there is already space allocated for the menu to live. In my situation, I need my main content to shrink to make room for the menu. So, using Bootstrap, I am switching my main content from the "col-md-12" class to the "col-md-11" class, so that my menu with the "col-md-1" class can fit:

$('#toggle').mousedown(function () {
    $('#mainMenu').toggleClass('col-md-1');
    $('#mainMenu').toggleClass('zero');
    $('#mainContent').toggleClass('col-md-12');
    $('#mainContent').toggleClass('col-md-11');
});

I have attempted something here: http://jsfiddle.net/955RV/

But it's not quite right. The negative margin trick is because I'm not sure how else to bring in the menu from the left. I also am not happy with the right side of the content shrinking in animation before the menu appears and would prefer it to happen simultaneously. My guess is that they are technically happening simultaneously, but that the margin animation takes longer to complete than the width animation.

Any help would be appreciated. Let me know if I can help clarify anything.

Answer 1

This looks like a great place to start:

http://tympanus.net/Blueprints/SlidePushMenus/

Notice the difference between the "push" and "slide" type menus. I was looking for "push."

Code explained here: http://tympanus.net/codrops/2013/04/17/slide-and-push-menus/