Facebook Mobile Menu

by codefuze

HTML

<div id="menu">
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</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>
    </div>

CSS

#menubar {
    width:100%;
    background-color:#444;
    color: #fff;
}
#menu, #right {
    display:inline;
}
#right {
    width:500px;
    background-color: #fff;
    z-index: 5;
    position: fixed;
    left: 0px;
    height: 100%;
}
#menu {
    float:left;
    width: 100px;
    height: 100%;
}
#menu li {
    background-color:#fff;
    border-bottom: 1px solid #000;
}

JavaScript

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