< html >
< head >
< title > 仿QQ导航菜单 </ title >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< style  type ="text/css" >
body {} {
    text-align : center ;
}
.titleStyle {} {
    width : 190px ;
    line-height : 26px ;
    background-color : #008800 ;
    color : #ffffff ;
    border-top : 1px solid #FFFFFF ;
    font-size : 12px ;
}
.contentStyle {} {
    width : 180px ;
    height : 340px ;
    background-color : #eeffee ;
    color : blue ;
    font-size : 12px ;
}
a {} {
    width : 178px ;
    height : 20px ;
    background : #F9CDB2 ;
    font : 12px/20px tahoma ;
    display : block ;
    color : blue ;
    text-decoration : none ;
    border-top : 1px solid #eeffee ;
}
a:hover  {} {
    width : 158px ;
    border-width : 1px 10px ;
    border-style : solid ;
    border-color : #e57939 ;
}
</ style >
< script  language ="javascript1.5"  type ="text/javascript" >
<!--
var  stepNo = 10 ;
var  runtimes = 0 ;
var  toItemIndex = 3 ;
var  onItemIndex = 3 ;

function  changeItem(clickItemIndex) {
    toItemIndex = clickItemIndex;
     if (toItemIndex - onItemIndex > 0 )
        moveUp();
     else  
        moveDown();
    runtimes ++ ;
     if (runtimes >= stepNo) {
        onItemIndex = toItemIndex;
        runtimes = 0 ;
    }
     else
        setTimeout( " changeItem(toItemIndex) " , 10 );
}

function  moveUp() {
     for (i = onItemIndex + 1 ;i <= toItemIndex;i ++ )
        document.getElementById(i).style.top = parseInt(document.getElementById(i).style.top) - 34 ;
}

function  moveDown() {
     for (i = onItemIndex;i > toItemIndex;i -- )
        document.getElementById(i).style.top = parseInt(document.getElementById(i).style.top) + 34 ;
}
// -->
</ script >
</ head >
< body  onload ="changeItem(0)" >
< div  id =itemsLayer  style =" overflow:hidden;position:absolute;border:1px solid #008800;left:50px;top:100px;width:180px;height:445px;" >
< div  id =0  style ="position:relative;left:0;top:0;width:179px;" >
         < div  onclick =changeItem(0)  class ="titleStyle" > 00 </ div >
         < div  class ="contentStyle" >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
         </ div >
</ div >
< div  id =1  style ="position:relative;left:0;top:-340px;width:179px;" >
         < div  onclick =changeItem(1)  class ="titleStyle" > 01 </ div >
         < div  class ="contentStyle" >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
         </ div >
</ div >
< div  id =2  style ="position:relative;left:0;top:-680px;width:179px;" >
         < div  onclick =changeItem(2)  class ="titleStyle" > 02 </ div >
         < div  class ="contentStyle" >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
         </ div >
</ div >
< div  id =3   style ="position:relative;left:0;top:-1020px;width:179px;" >
         < div  onclick =changeItem(3)  class ="titleStyle" > 03 </ div >
         < div  class ="contentStyle" >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
                     < a  href ="#" > 链接 </ a >
         </ div >
</ div >
</ div >

</ body >
</ html >