moveheight

body部分

 

<div id="box">
    <a href="#" id="menu">click me</a>
    <div id="nav">
        <span id="closeId">close</span>
    </div>
</div>

 

css 部分

 

*{
    margin:0px;
    padding:0px;
}
#box{
    width:400px;
    height:400px;
    border:1px solid #669900;
    position:relative;
    margin-left:150px;
    margin-top:50px;
}
#menu{
    display:block;
    width:100px;
    height:30px;
    line-height:30px;
    font-size:16px;
    text-align:center;
    text-decoration:none;
    background-color:#990033;
    color:#fff;
}
#nav{
    width:150px;
    background-color:#CC9966;
    color:#fff;
    position:absolute;
    left:0px;
    top:40px;
    display:none;
}
#nav span{
    display:block;
    float:right;
    margin-top:10px;
    margin-right:10px;
    text-align:center;
    width:50px;
    height:25px;
    line-height:25px;
    font-size:12px;
    background-color:#3399CC;
    color:#fff;
    cursor:pointer;
}

 

javascript 部分

 

window.onload=initAll;
function initAll(){
    var menu=document.getElementById("menu");
    var nav=document.getElementById("nav");
    var closeId=document.getElementById("closeId");
    menu.onclick=function(){
        if(nav.style.display=="none"){
            nav.style.display="block";
            moveElement("nav",200,5);
        }else{
            nav.style.display="none";
            nav.style.height="0px";
        }
    }
    closeId.onclick=function(){
        nav.style.height="0px";
        nav.style.display="none";
    }
}
function moveElement(elementId,theHeight,interval){
    var elem=document.getElementById(elementId);
    if(elem.movement){
        clearTimeout(elem.movement);
    }
    if(!elem.style.height){
        elem.style.height="0px";
    }
    var hpos=parseInt(elem.style.height);
    if(hpos==theHeight){
        return true;
    }
    if(hpos<theHeight){
        var dist=Math.ceil((theHeight-hpos)/10);
        hpos=hpos+dist;
    }
    if(hpos>theHeight){
        var dist=Math.ceil((hpos-theHeight)/10);
        hpos=hpos-dist;
    }
    elem.style.height=hpos+"px";
    var repeat="moveElement('"+elementId+"',"+theHeight+","+interval+")";
    elem.movement=setTimeout(repeat,interval);
}