Left fly-out menu

HTML

<nav>
    <ul>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://news.bbc.com">BBC</a></li>
        <li><a href="http://en.wikipedia.org">Wikipedia</a></li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://news.bbc.com">BBC</a></li>
        <li><a href="http://en.wikipedia.org">Wikipedia</a></li>
    </ul>
</nav>

<div id="main">
    <a id="nav-menu" href="javasript:void(0);">Menu</a>
    <img src="http://placekitten.com/940/450"/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla dapibus mauris ut libero volutpat quis hendrerit erat adipiscing. Suspendisse potenti. Nunc in odio quis est dictum cursus. Praesent et laoreet enim. In eu pharetra dui. Duis auctor ultrices erat, quis mattis nulla dignissim ac. Pellentesque pharetra pretium mattis. Praesent nulla sapien, tincidunt sit amet sodales nec, tempus eget orci. Nulla facilisi. Nullam accumsan scelerisque mi. Donec porta tellus a orci tincidunt eu malesuada orci congue. Nam gravida nisi nec ante tempus eget porttitor odio convallis. Mauris imperdiet condimentum nunc a ullamcorper. Curabitur ac placerat lectus. Quisque eget erat eu tortor hendrerit pharetra laoreet in nunc. Donec ac ultricies velit.

    Duis commodo pulvinar ipsum in ullamcorper. Nunc vulputate iaculis elementum. Donec eu purus felis, ut consequat est. Phasellus semper tincidunt sapien, eu iaculis lorem feugiat et. Quisque consectetur quam in magna fermentum suscipit. Phasellus fringilla leo ipsum, nec facilisis metus. Vivamus est dui, aliquet nec laoreet at, vestibulum a nibh. Mauris cursus nisl ut mi tincidunt nec lacinia nibh cursus. Phasellus semper ipsum ut metus eleifend sodales. Donec auctor sodales mi. Pellentesque non turpis ante, sed laoreet elit. Curabitur viverra, odio vel molestie sagittis, ipsum justo scelerisque risus, sit amet auctor tortor diam at sem. Vestibulum eget augue vel erat interdum consequat. Nulla id nulla semper odio malesuada...

CSS

#main {
    background: white;
    padding: 10px;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

#main img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1em;
}

nav {
    overflow: hidden; /* Clearing floats */
    padding: 10px;
    margin: 10px;
    border: 1px solid #aaa;
}

nav li {
    display: block;
    float: left;
    list-style-type: none;
    padding: 10px;
    border: 1px solid lightblue;
    background: #e0ffff;
}

.show-nav body {
    overflow-x: hidden;
}

.show-nav #main {
    position: relative;
    left: 270px;
    -webkit-box-shadow: -10px 0px 5px -5px rgba(0, 0, 0, 0.35);
    box-shadow: -10px 0px 5px -5px rgba(0, 0, 0, 0.35);
}

@media (max-width: 1024px) {

    #main {
        position: absolute;
        z-index: 1;
    }

    nav {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

}

JavaScript

$(document).ready(function(){

        var nav_open = false;
        var html = $('html');

        $('#nav-menu').on('click', function(){

            if (nav_open) {
                html.removeClass('show-nav');
                nav_open = false;
            } else {
                html.addClass('show-nav');
                nav_open = true;
            }



        });

    });