Slide out mobile menu

by Mr_Vasu

HTML

<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
            <li><a href="#">Menu Item 4</a></li>
            <li><a href="#">Menu Item 5</a></li>
            <li><a href="#">Menu Item 6</a></li>
            <li><a href="#">Menu Item 7</a></li>
            <li><a href="#">Menu Item 8</a></li>
            <li><a href="#">Menu Item 9</a></li>
            <li><a href="#">Menu Item 10</a></li>
            <li><a href="#">Menu Item 11</a></li>
            <li><a href="#">Menu Item 12</a></li>
        </ul>
    </div>
    <div id="right">
        <div id="menubar">
            <div id="button">
                Menu
            </div>
        </div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis laoreet libero, ac tristique quam sodales ac. Nam consequat consectetur dignissim. Nulla tincidunt gravida odio, et ornare tellus blandit in. Sed eget erat porttitor sem egestas tincidunt hendrerit id tellus. Fusce pharetra ipsum id purus luctus interdum. Vestibulum semper est varius dui sodales id porttitor diam ultrices. Ut eros arcu, rutrum non ornare vitae, varius id turpis. Maecenas scelerisque libero augue. Nam turpis lacus, pulvinar eu rutrum quis, ullamcorper eget turpis.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing...

CSS

* {
    padding: 0px;
    margin: 0px;
}

#menubar {
    width:100%;
    background-color:#444;
    color: #fff;
    padding: 10px;
}

#button {
    cursor:pointer;
}

#menu, #right {
    display:inline;
}

#menu li a {
    padding: 10px;
    display: block;
    color: white;
    text-decoration: none;
}

#right {
    width:100%;
    background-color: #fff;
    z-index: 5;
    position: fixed;
    left: 0px;
    height: 100%;
    -webkit-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
        moz-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
          o-box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
            box-shadow:  -5px 0px 4px 0px rgba(0, 0, 0, 0.2);
}

#right p {
    padding: 10px;
}

#menu {
    float:left;
    width: 350px;
    height: 100%;
}

#menu li {
    background-color:#444;
    border-bottom: 1px solid #888;
}

JavaScript

$('#button').toggle( 
    function() {
        $('#right').animate({ left: 250 }, 'slow', function() {
            $('#button').html('Close');
        });
    }, 
    function() {
        $('#right').animate({ left: 0 }, 'slow', function() {
            $('#button').html('Menu');
        });
    }
);