Slide out CSS menu

I've developed a simple CSS transition solution for a slide out menu with a single toggle, and would love some feedback on if anything could be simplified or improved.

Markup

    
        Slide out menu
        
        
    
    
        
            Toggle
        
        
            This is a side menu
        

        
        
            (function() {
                var body = $('body');
                $('.menu-toggle').bind('click', function() {
                    body.toggleClass('menu-open');
                    return false;
                });
            })();
        
    

Styles

body {
    padding-right:50px;
}

.menu {
    overflow-x:hidden;
    position:relative;
    left:0;
}

.menu-open {
    margin-left:241px;
}

.menu-open .menu-side {
    left:0;
}

.menu-side,
.menu {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

.menu-side {
    position:fixed;
    left:-231px;
    top:0;
    width:210px;
    border-right:1px solid #000;
    height:100%;
    background-color:#333;
    color:#fff;
    padding:10px;
}

HTML:

-
In addition to your existing viewport meta tag, I suggest adding the width value:

Also moving the tag before you load your stylesheets and the title code help your performance. MDN on using the viewport meta tag.

-
A header element typically contains headings and other introductory content. The Toggle-link should be part of your navigation as well, because that's what it is. HTML5 Doctor is a great ressource, if you want to know more about this.

CSS:

• Generally one should avoid using all in transitions. Using the actual properties you're going to animate is more performant

It would be a help to have a jsfiddle demo of this to test around.

StackExchange Code Review Q#40201, answer score: 5