请问在网页中像QQ中的分类栏(按下去可以上下切换)是如果实现的?

网上很多这种菜单的<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title></title> 
<style type="text/css"> 
.titleStyle{ 
background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt;cursor:hand; 
} 
.contentStyle{ 
background-color:#eeffee;color:blue;font-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=0;runtimes=0; 
document.write('<span id=itemsLayer style="position:absolute;overflow:hidden;border:1px solid #008800;left:'+layerLeft+';top:'+layerTop+';width:'+layerWidth+';">'); function addItem(itemTitle,itemContent){ 
itemHTML='<div id=item'+itemNo+' itemIndex='+itemNo+' style="position:relative;left:0;top:'+(-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-1;onItemIndex=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+1;i<=toItemIndex;i++) 
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)-contentHeight/stepNo;'); 
} function moveDown(){ 
for(i=onItemIndex;i>toItemIndex;i--) 
eval('document.all.item'+i+'.style.top=parseInt(document.all.item'+i+'.style.top)+contentHeight/stepNo;'); 
} 
changeItem(0); 
//--> 
</script> 
</body> 
</html>

解决方案 »

  1.   

    呵呵，偶最近也写了个类似OUTLOOK BAR的东西在用 ^_^
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <!-- saved from url=(0050)http://vip.5d.cn/flood/myjs/htm/menu/qq/qqmenu.htm -->
    <!-- saved from url=(0054)http://java2000.wol.com.cn/java/js12/menutree/menu.htm --><HTML><HEAD>
    <META http-equiv=Content-Type content="text/html; charset=gb2312">
    <SCRIPT language=JAVASCRIPT>
    OB_Top=0; //菜单距离顶部的象素值；
    OB_Left=0; //菜单距离左侧的象素值；
    OB_Margin=10;//top and bottom margins between icons and borders
    OB_Width=96;//菜单宽度
    OB_Height=400;//菜单高度
    OB_SlideSpeed=1.5; //菜单运动速度
    OB_BackgroundColor="BACKGROUND";
    //背景色
    OB_ItemsSpacing=25; //2个图标间的距离
    OB_BorderWidth=3; //border宽度
    OB_BorderStyle="ridge"; //border风格
    OB_BorderColor="#dddddd"; //border颜色
    OB_IconsWidth=32; //图标宽度
    OB_IconsHeight=32; //图标高度
    OB_ButtonFontFamily="arial";
    //按钮上字体的字型
    OB_ButtonFontSize=9; //按钮上字体大小 
    OB_ButtonFontColor="black"; //按钮上字体颜色    
    OB_ButtonHeight=25; //按钮的高度
    OB_LabelFontFamily="arial"; //LOGO下字体的字型
    OB_LabelFontSize=9; //LOGO下面的字体大小
    OB_LabelFontColor="white"; //LOGO下的字体颜色
    OB_LabelMargin=3; //margin between labels and icons
    OB_UpArrow="arrowup.gif"; //向上滚动的logo箭头
    OB_DownArrow="arrowdown.gif";
    //向下滚动的logo箭头
    OB_ArrowWidth=15; //箭头的宽度
    OB_ArrowHeight=15; //箭头的高度
    OB_ArrowSlideSpeed=10; //项目列表滚动的速度；
    </SCRIPT><SCRIPT language=JAVASCRIPT>
    if (document.all){
    document.write('<script src="folders.js"><\/script>')
    document.write('<script src="outbar.js"><\/script>')
    }
    </SCRIPT>
    <!--实际应用时由于按下连接打开页面，所以需要你去掉下面的一段js代码，现在用于产生警告框。这一段代码是在folders.js文件中调用的，打开folders.js最前面可以看到注释-->
    <SCRIPT language=JAVASCRIPT>
    function Run(app)
    {
    alert("Application : "+app);
    }
    </SCRIPT><META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD>
    <BODY></BODY></HTML>