Slide out mobile menu

by Kishore Polsani

HTML

<div id="menu">
    <ul>
        <li><a href="#">Menu Item 1</a>

            <ul id="submenu">
                <li><a href="#">Submenu Item 1</a>

                </li>
                <li><a href="#">Submenu Item 2</a>

                </li>
            </ul>
        </li>
        <li><a href="#">Menu Item 2</a>

        </li>
        <li><a href="#">Menu Item 3</a>

        </li>
    </ul>
</div>
<div id="right">
    <button type="button" id="button">Menu</button>
</div>

CSS

#button {
    cursor:pointer;
}
#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);
}
#menu {
    float:left;
    width: 150px;
}
#menu li {
    background-color:#444;
    border-bottom: 1px solid #888;
}

JavaScript

$('#menu li:has("ul")').children('ul').hide();
$('#button').toggle(
function () {
    $('#right').animate({
        left: 150
    });
},
function () {
    $('#right').animate({
        left: 0
    });
});
$('#menu li:has("ul")').click(function(){
    $(this).children('ul').slideToggle();
});