Slide Menu in from right

HTML

<div id="container">
    <div id="menu">
        <ul>
            <li>Menu Item 1</li>
            <li>Menu Item 2</li>
            <li>Menu Item 3</li>
        </ul>
    </div>
</div>
<button id="btnMenu">Menu</button>

CSS

#container
{
    position:relative;
    border:1px solid navy;
    height:100px;
    width:100px;
    overflow:hidden;
    margin-bottom:2em;
}

#menu
{
    position:absolute;
    right:-100%;
    top:0;
    height:100px;
    width:100px;
    background-color:#f00;
}

#menu > ul
{
    list-style-type:none;
    padding:0 5px 0 5px;
}

#menu > ul > li
{
    cursor: pointer;
    margin: 5px 0;
}

#menu > ul > li:hover
{
    background-color:#ff0;
}

#toolazytousedevelopertools
{
    font-family: arial;
    font-size:0.8em;
    margin-top:1em;
    border:1px solid #000;
    padding:0.25em;
}

JavaScript

var $menu = $("#menu");
var $console = $("#toolazytousedevelopertools");

$("#btnMenu").on("click", function(){
    var slideArgs = { right: '0' };    
    $menu.animate(slideArgs, 1000);    
});

$("#menu ul").on("click", "li", function(){
    $console.append($(this).text() + " clicked. Thank you.<br>");
    var slideArgs = {right: '-100%'};
    $menu.animate(slideArgs, 1000);
});