Karl Strike Menu hider

by sambeckhamdesign

HTML

<div class="q">
    <ul>
        <li>One</li>
        <li>two</li>
    </ul>
    <a href="#" class="close">Close</a>
</div>

CSS

.q {
    margin:0 auto;
    display:block;
    width:100px;
    margin-top:0;
    background-color:#f0f;
    position:relative;
    height:50px;
    -webkit-animation:.3s all;
}

a.close{
    display:block;
    width:30px;
    height:20px;
    position:absolute;
    left:50%;
    bottom:-20px;
    margin-left:-15px;
    background-colour:salmon;
}

JavaScript

$(".close").click(function () {
    $(".q").animate({'margin-top': '-50px'}, 500);
    $(this).addClass("open");
    
  });