Off-canvas / viewport navigation slide in with jQuery
<p>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.</p>

<p>Here is a version using CSS3 Transitions: <a href="http://codepen.io/chriscoyier/pen/umEgv" rel="nofollow">http://codepen.io/chriscoyier/pen/umEgv</a></p>

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

<p>Below is a link to what I have so far.</p>

<p>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.</p>

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

<p>Here is what I have so far: <a href="http://pastebin.com/0X7uT7tC" rel="nofollow">http://pastebin.com/0X7uT7tC</a></p>
