< 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 >