Collpasible Menu

Collapsible horizontal menu

by Rishi Gautam

HTML

<div id="button"></div>
<div id="turtle">
    <div id="shell"></div>
</div>

CSS

#button{
    background-color:blue;
    width:50px;
    height:50px;
    display:block;
    position:absolute;
}

#turtle{
    background-color:pink;
    margin-left:50px;
    width:250px;
    height:50px;
    position:absolute;
}

#shell{
    background-color:green;
    width:50px;
    height:100%;
}

JavaScript

$("#turtle").hide();
$("#button").click(function(){
    $("#turtle").animate({width: 'toggle'});
});