Question

I am trying to make an off-canvas navigation that slides in from the left to take up 20% of the page while the content slides to the left ( some of it will be off canvas ) taking up 80% of the page.
This has been seen in Google’s mobile site and Facebook’s mobile app.

Here is a version using CSS3 Transitions: http://codepen.io/chriscoyier/pen/umEgv

Except, I am trying to make one that relies only on JQuery / Javascript and not CSS Transitions at all.

Below is a link to what I have so far.

I don’t understand why it is not working. The width of the #main-nav should be toggled every time .menu-button is clicked; thus creating a sliding tot he right effect.

Can someone please help me fix this and / or help me with that I am trying to achieve.

Here is what I have so far: http://pastebin.com/0X7uT7tC

Answer 1

Changed width to 20% in css and then hide this on load.

HERE IS FIDDLE

jQuery

 $('#main-nav').hide();
 $('.menu-button').click(function () {
     $('#main-nav').animate({
         width: 'toggle'
     });
 });

CSS

    .main-nav {
    position: fixed;
    top: 0;
    width: 20%;
    height: 100%;
    background: #3B3B3B;
    overflow: hidden;
}