A Simple Mobile Menu

I have created a simple mobile menu using html, javascript(jquery) and css. I have used similar mobile menu for couple of websites.

Below is how I created the menu. You can also edit and play with the code here https://jsfiddle.net/mannemvamsi/j9m571ve/

1. HTML for the menu(Navigation)

<div class="mobile-menu-wrapper">
    <div class="mobile-menu-control">
        <div class="bar"></div>
        <div class="bar"></div>
        <div class="bar"></div>
    </div>
<div class="mobile-menu">
    <ul>
        <li ><a href="#"><div class="header item-height" ><strong>The Main 1</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
        <li ><a href="#"><div class="header" ><strong>The Main 2</strong></div></a>
            <ul>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
                <li><a href="#"><div class="item-height">Sub Item</div></a></li>
            </ul>
        </li>
    </ul>
</div>
</div>

2. Add CSS to the html document( basically adding css only to above navigation part)

.mobile-menu-wrapper{
    position:fixed;
    left:-220px;
    width:260px;
    cursor:pointer;
}

div.mobile-menu {
    width:210px;
   
    float:left;
    background-color:#222;
}
.mobile-menu ul {
    list-style:none;
    margin:0;
    padding:0px;
   
}
.mobile-menu ul ul li {
    padding-left:8px;
   
}
.mobile-menu li {
    margin:0;
    padding:0;
}
.mobile-menu li, .mobile-menu li a {
    color:#fff;
    font-family:calibri, sans-serif;
    text-decoration:none;
}
.mobile-menu li li:hover {
    background-color:#111;
}
.mobile-menu .item-height{
    padding:10px 2px;
}

.mobile-menu-control {
    float:right;
    //border:1px solid green;
    cursor:pointer;
    background-color:#222;
    padding:5px;
}
.mobile-menu-control .bar {
    width:25px;
    margin:4px 0;
    border:2px solid #fdbd12;
}
.mobile-menu .header {
    color:#fdbd12;
    padding-left:4px;
    width:100%;
}

3. Use Jquery for actions

$(function() {
    var wrapper = $(".mobile-menu-wrapper");
    var mobileMenu = $(".mobile-menu");
    var mobileMenuWidth = mobileMenu.width();
    $(".mobile-menu-control").bind("click",function() {
       
        if(mobileMenu.hasClass("opened-menu")) {
           
           $(".mobile-menu-wrapper").animate({
               left:-(220)
              
           });
            mobileMenu.removeClass('opened-menu');
        }
        else
        {
           $(".mobile-menu-wrapper").animate({
               left:0
           });
            mobileMenu.addClass('opened-menu');
        }
    });
})

Fiddle is available for the same here : https://jsfiddle.net/mannemvamsi/j9m571ve/