Mobile menu in few lines

by Joe Saad

HTML

<a href="#" class="menu">=</a>

<ul class="nav-menu">
    <ul>
        <li><a href="#">List Item 1</a></li>
        <li><a href="#">List Item 2</a></li>
        <li><a href="#">List Item 3</a></li>
        <li><a href="#">List Item 4</a></li>
    </ul>
</ul>

CSS

.nav-menu {
    display: none;
    width: 0px;
    border:1px solid red;
    padding: 0;
    margin: 0;
    min-height: 100px;
    white-space: nowrap;
}

JavaScript

$('.menu').click(function(){
    if ($('.nav-menu').is(':visible')) {
        $('.nav-menu').animate({width: "0px"}, 500).hide("slow");
    }
    else {
        $('.nav-menu').animate({width: "200px"}).show();
    }
    
});