<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>仿QQ导航菜单</title>
<style type="text/css">
.titleStyle{
background-color:#008800color:#ffffffborder-top:1px solid #FFFFFFfont-size:9ptcursor:hand
}
.contentStyle{
background-color:#eeffeecolor:bluefont-size:9pt
}
a{
color:blue
}
body{
font-size:9pt
}
</style>
</head>
<body>
<script language="JavaScript">
<!--
var layerTop=20 //菜单顶边距
var layerLeft=30 //菜单左边距
var layerWidth=140 //菜单总宽
var titleHeight=20 //标题栏高度
var contentHeight=200//内容区高度
var stepNo=10//移动步数，数值越大移动越慢
var itemNo=0runtimes=0
document.write('<span id=itemsLayer style="position:absoluteoverflow:hiddenborder:1px solid #008800left:'+layerLeft+'top:'+layerTop+'width:'+layerWidth+'">')
function addItem(itemTitle,itemContent){
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relativeleft:0top:'+(-contentHeight*itemNo)+'width:'+layerWidth+'"><table width=100% cellspacing="0" cellpadding="0">'+
'<tr><td height='+titleHeight+' onclick=changeItem('+itemNo+') class="titleStyle" align=center>'+itemTitle+'</td></tr>'+
'<tr><td height='+contentHeight+' class="contentStyle">'+itemContent+'</td></tr></table></div>'
document.write(itemHTML)
itemNo++
}
//添加菜单标题和内容，可任意多项，注意格式：
addItem('欢迎','<BR> 欢迎光临设计在线！')
addItem('网页陶吧','<center><a href="#">网页工具</a><BR><BR><a href="#">技术平台</a><BR><BR><a href="#">设计理念</a><BR><BR><a href="#">更多</a></center>')
addItem('美工教室','<center><a href="#">平面设计 </a><BR><BR><a href="#">三维空间</a><BR><BR><a href="#">设计基础</a><BR><BR><a href="#">更多..</a></center>')
addItem('Flash','<center><a href="#">基础教程</a><BR><BR><a href="#">技巧运用</a><BR><BR><a href="#">实例剖析</a><BR><BR><a href="#">更多..</a></center>')
addItem('多媒体','<center><a href="#">DIRECTOR</a><BR><BR><a href="#">Authorware</a><BR><BR><a href="#">更多..</a></center>')
addItem('精品赏析','<center><a href="#">设计精品</a></center>')
document.write('</span>')
document.all.itemsLayer.style.height=itemNo*titleHeight+contentHeight
toItemIndex=itemNo-1onItemIndex=itemNo-1
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+1i<=toItemIndexi++)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo')
}
function moveDown(){
for(i=onItemIndexi>toItemIndexi--)
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo')
}
changeItem(0)
//-->
</script>
</body>
</html>
如果对您有帮助，请记得采纳为满意答案，谢谢！祝您生活愉快！
欢迎分享，转载请注明来源：优选云
微信扫一扫
支付宝扫一扫
