求可任意拖动的，不驻留在任务栏，纯JAVASCRIPT的模拟QQ菜单代码！不甚感激！

不是要用HTML文件实现吧？？！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<html><head>
<meta http-equiv="Content-type" content="text/html; charset=gb2312">
<title></title>
<style>
td,p,li,select,input {font-size:12px}
.f12{font-size:12px}
.l15{line-height:150%}A:hover {color: ff0000;}
</style><script language="JavaScript">
ns4=(document.layers)?true:falsemtitle=new Array()
mtitle[0]="梦飞船"
mtitle[1]="郑秀文"
mtitle[2]="Madonna"
mtitle[3]="Mel C"
mtext=new Array()mtext[0]=new Array()
mtext[0][0]="不值得"mtext[1]=new Array()
mtext[1][0]="值得"
mtext[1][1]="快乐不快乐"mtext[2]=new Array()
mtext[2][0]="Take a Bow"
mtext[2][1]="Rain"
mtext[2][2]="You'll See"mtext[3]=new Array()
mtext[3][0]="I Turn to You"
mtext[3][1]="Northern Star"
openD=new Array()
for (i=0;i<mtitle.length;i++){
openD[i]=true
}function hideD(n){
var i=0;j=0;
openD[n]=false

if (ns4){
for (j=1;j<=mtext[n].length;j++){
eval("document.layerOuter.document.d"+n+j+".visibility='hide'")
}
for (i=n+1;i<mtitle.length;i++){
if (openD[i-1]){
eval("document.layerOuter.document.d"+i+"0.top=document.layerOuter.document.d"+parseInt(i-1)+parseInt(mtext[i-1].length)+".top+document.layerOuter.document.d"+parseInt(i-1)+parseInt(mtext[i-1].length)+".clip.height")
}else{
eval("document.layerOuter.document.d"+i+"0.top=document.layerOuter.document.d"+parseInt(i-1)+"0.top+document.layerOuter.document.d"+parseInt(i-1)+"0.clip.height")
}
if (openD[i]){
for (j=1;j<=mtext[i].length;j++){
eval("document.layerOuter.document.d"+i+j+".top=document.layerOuter.document.d"+i+parseInt(j-1)+".top+document.layerOuter.document.d"+i+parseInt(j-1)+".clip.height")
}
}
}
}else{
for (j=1;j<=mtext[n].length;j++){
eval("document.all.d"+n+j+".style.display='none'")
}
}
}function showD(n){
var i=0;j=0;
openD[n]=true

if (ns4){
for (j=1;j<=mtext[n].length;j++){
eval("document.layerOuter.document.d"+n+j+".visibility='show'")
eval("document.layerOuter.document.d"+n+j+".top=document.layerOuter.document.d"+n+parseInt(j-1)+".top+document.layerOuter.document.d"+n+parseInt(j-1)+".clip.height")
}
for (i=n+1;i<mtitle.length;i++){
if (openD[i-1]){
eval("document.layerOuter.document.d"+i+"0.top=document.layerOuter.document.d"+parseInt(i-1)+parseInt(mtext[i-1].length)+".top+document.layerOuter.document.d"+parseInt(i-1)+parseInt(mtext[i-1].length)+".clip.height")
}else{
eval("document.layerOuter.document.d"+i+"0.top=document.layerOuter.document.d"+parseInt(i-1)+"0.top+document.layerOuter.document.d"+parseInt(i-1)+"0.clip.height")
}
if (openD[i]){
for (j=1;j<=mtext[i].length;j++){
eval("document.layerOuter.document.d"+i+j+".top=document.layerOuter.document.d"+i+parseInt(j-1)+".top+document.layerOuter.document.d"+i+parseInt(j-1)+".clip.height")
}
}
}
}else{
for (j=1;j<=mtext[n].length;j++){
eval("document.all.d"+n+j+".style.display='block'")
}
}

}function refD(n){
if (openD[n]){
hideD(n)
}else{
showD(n)
}
}</script>
</head>
<body bgcolor=#ffffff topmargin=5 marginheight=5 leftmargin=5 marginwidth=5>
<center><br><br><br>
<table width=400 border=0 cellpadding=0 cellspacing=0>
<tr><td width=200 height=300 valign=top>
<script language="JavaScript">
if (ns4){
document.write("<ilayer name=layerOuter height=300>\n")
var i=0,j=0
for (i=0;i<mtext.length;i++){
document.write("\t<layer name=d"+i+"0>\n\t\t<table width=160 border=0 cellpadding=0 cellspacing=0>\n\t\t<tr><td height=29 bgcolor=#ff7700 align=center><a href='javascript:refD("+i+")'>"+mtitle[i]+"</a></td></tr>\n\t\t<tr><td height=1 bgcolor=#000000><img src=images/c.gif width=1 height=1></td></tr>\n\t\t</table>\n\t</layer>\n")
eval("document.layerOuter.document.d"+i+"0.visibility='hide'")
for (j=1;j<=mtext[i].length;j++){
document.write("\t\t<layer name=d"+i+j+">\n\t\t\t<table width=160 border=0 cellpadding=0 cellspacing=0>\n\t\t\t<tr><td height=19 bgcolor=#ffff00 align=center><a href=#>"+mtext[i][j-1]+"</a></td></tr>\n\t\t\t<tr><td height=1 bgcolor=#000000><img src=images/c.gif width=1 height=1></td></tr>\n\t\t\t</table></layer>\n")
//eval("document.layerOuter.document.d"+i+j+".visibility='hide'")
}
}
document.write("</ilayer>")
document.close()
for (i=0;i<mtext.length;i++){
hideD(i)
eval("document.layerOuter.document.d"+i+"0.visibility='show'")
}
}else{
document.write("<div id=layerOuter>\n")
var i=0,j=0
for (i=0;i<mtext.length;i++){
document.write("\t<div id=d"+i+"0 style='position:relative'>\n\t\t<table width=160 border=0 cellpadding=0 cellspacing=0>\n\t\t<tr><td height=29 bgcolor=#ff7700 align=center><a href='javascript:refD("+i+")'>"+mtitle[i]+"</a></td></tr>\n\t\t<tr><td height=1 bgcolor=#000000><img src=images/c.gif width=1 height=1></td></tr>\n\t\t</table>\n\t</div>")
for (j=1;j<=mtext[i].length;j++){
document.write("\t\t<div id=d"+i+j+" style='position:relative'>\n\t\t\t<table width=160 border=0 cellpadding=0 cellspacing=0>\n\t\t\t<tr><td height=19 bgcolor=#ffff00 align=center><a href=#>"+mtext[i][j-1]+"</a></td></tr>\n\t\t\t<tr><td height=1 bgcolor=#000000><img src=images/c.gif width=1 height=1></td></tr>\n\t\t\t</table></div>")
}
hideD(i)
}
document.write("</div>")
}
</script></td><td width=200></td></tr>
</table></center>
</body></html>
试一下这个，简单一些<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<style>
TD {
FONT-SIZE: 9pt
}
BODY   {
FONT-SIZE: 9pt;}
</style>
<script>
tb_change="tb1";
function xchange(obj)
{
eval(tb_change).height="20";
eval(tb_change+"_tr").style.display="none";
tb_change=obj;
eval(tb_change).height="100%";
eval(tb_change+"_tr").style.display="";
}
</script>
</HEAD>
<body topmargin="0" leftmargin="0">
<table border="0" cellspacing="0" cellpadding="0" height="100%"  bgcolor=#99ccff>
<tr>
<td height="100%" valign="top" id="tb1">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td onclick="xchange('tb1')" width="100" align="center" height="20">
<div style="border:1px solid #000000;background-color:6699ff;font-size:15px;"><b>菜单1</b></div>
</td>
</tr>
<tr id="tb1_tr" style="display:''">
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单1
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单2
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单3
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=MistyRose, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单4
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" valign="top" id="tb2">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td onclick="xchange('tb2')" width="100" align="center">
<div style="border:1px solid #000000;background-color:6699ff;font-size:15px;"><b>菜单2</b></div>
</td>
</tr>
<tr id="tb2_tr" style="display:'none'">
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单1
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单2
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单3
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=MistyRose, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单4
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="20" valign="top" id="tb3">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td onclick="xchange('tb3')" width="100" align="center">
<div style="border:1px solid #000000;background-color:6699ff;font-size:15px;"><b>菜单3</b></div>
</td>
</tr>
<tr id="tb3_tr" style="display:'none'">
<td>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#99ccff, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单1
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=yellowgreen, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单2
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=gold, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单3
</td>
</tr>
<tr>
<td onmouseover="this.style.filter='progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=MistyRose, EndColorStr=#FFFFFF)';" onmouseout="this.style.filter='';" height="18">
　子菜单4
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</HTML>
在浮动对话筐里实现,
效果你可以看:http://www.fm119.com:81/music.asp任意拖动很好实现....
这个QQ菜单是用HTC写的,用起来比较方便,稍微调整一下就可以了