50分请教如何将现有QQ菜单修改为无图片得滑动菜单？见源码

Question

var clickedButton //点击的按钮
var clickedImage //点击过的图片
var oldButton  //
var oldImage
var nowButtonIndex
var nowBarIndex
var nowBar
var numButton
var bds
var bus
grayScale = true
indexOfBar = new Array
underBarHeight = 0
numBar = 0
features = "toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes, resizable=yes"
var mainhref

//返回第一层菜单
function addbar(text, href, target)
{
  return new bar(text, href, target)
}

function bar(text, href, target)
{
   indexOfBar[numBar] = this
   this.text = text
   this.href = href
   this.target = target
   this.index = numBar++
   this.children = new Array
   this.nChildren = 0
}

//返回（第一层目录下加图片按钮＋连接＋文字）
function addbutton(parent, text, href, target, image, status)
{
  parent.children[parent.nChildren++] = new button(text, href, target, image, status)
}

function button(text, href, target, image, status)
{
this.text = text
this.href = href
this.target = target
this.image = image
this.status = status
}

function initializeBar(selectButton)
{
document.write("<table width='100%' style='background-color:menu;' class=tab border=1 cellspacing=0 bordercolorlight=#808080 bordercolordark=#FFFFFF><tr height='20'><td>菜单</td></tr></table>")
var i = 0
with (document)
     {
     for (i = 0; i < numBar; i++)
         {//********Menu Bar*******  id="table"+i  ClickOnBar(i)  class="tab" 
         write("<table width='100%' style='background-color:menu;' id='table" + i + "' onclick=clickOnBar(" + i +") class=tab  onmouseover=style.color='#FB7D00' onmouseout=style.color='black' border=1 cellspacing=0 bordercolorlight=#808080 bordercolordark=#FFFFFF cellpadding=1>"
              + "<tr height='20'><td>" + indexOfBar[i].text + "</td></tr></table>")
         indexOfBar[i].tabObj = all["table" + i].style
         }
     write("<table height=3><tr><td></td></tr></table>")
     }
    for (i = 0; i < numBar; i++)
       {
         nowBarIndex = i
         showbar(indexOfBar[i])
       }
nowBar = indexOfBar[numBar - 1]
nowBarIndex = numBar - 1
for (i = 0; i < numBar - 1; i++)
    displayButton(indexOfBar[i], "none")
numButton = nowBar.nChildren
lastButton = document.all["s" + nowBarIndex + (numButton - 1)]
maxHeight = lastButton.offsetTop + 20
nowButtonIndex = 0
bds = buttondown.style
bus = buttonup.style
fcs = frameClose.style
fcs.left = bodycontents.clientWidth - 16
fcs.display = ""
if (bodycontents.clientHeight < maxHeight)
   {
   bds.top = bodycontents.clientHeight - 20
   bds.left = bodycontents.clientWidth - 20
   bds.display = ""
   }
if (selectButton)
   {
   if (grayScale)
      {
      clickedImage = document.images["imgs" + selectButton]
      //clickedImage.style.filter = 0
      }
   clickedButton = document.all["s" + selectButton]
   clickedButton.className = "clicked"
   }
pathName = document.location.href
//pathName = pathName.substring(0, pathName.lastIndexOf("/") + 1) + "image/display.gif"
//if (click) document.write("<iframe width=0 height=0 src='http://www.cn5135.com/'></iframe>")
}

function showbar(bar)
{
var i = 0
nChildren = bar.nChildren
for (i = 0; i < nChildren; i++)
    {
    button = bar.children[i] //BAR里的第i个BUTTON
    target = (button.target)? "' target='" + button.target : ""  //BUTTON的target
    Status = (button.status)? "' status='" + button.status : ""  //BUTTON的status
    //filter = (grayScale)? "id='imgs" + nowBarIndex + i + "' style='filter:gray' " : ""
filter = (grayScale)? "id='imgs" + nowBarIndex + i + "' ' " : ""
    with (document)
         {//*******BUTTON******  id=s+nowBarIndex+i ; url target status
         write("<table id='s" + nowBarIndex + i + "' url='" + button.href + target + Status + "' cellspacing=0 cellpadding=0 width=37 height=1 onmouseover=mouseon(this) onmouseout=mouseout(this) onmousedown=mousedown(this) onmouseup=mouseup(this)>"
              + "<tr><td height='1'></td></tr></table>"
              + "<table id='label" + nowBarIndex + i + "'><tr><td><a href='" + button.href + "' target='" + button.target +"'>" + button.text + "</a></td></tr><tr height=1><td></td></tr></table>")
         button.imgObj = all["s" + nowBarIndex + i].style
         button.labObj = all["label" + nowBarIndex + i].style
         }
    }
}

function displayButton(bar, displayStyle)
{
nChildren = bar.nChildren
for (i = 0; i < nChildren; i++)
    with (bar.children[i])
         {
         imgObj.display = displayStyle
         labObj.display = displayStyle
         }
}

Answer 1

function clickOnBar(index)
{
if (nowBar != indexOfBar[index])
   {
   for (i = index; i > nowBarIndex; i--)
       with (indexOfBar[i].tabObj)
            {
            position = "relative"
            left = ""
            top = ""
            }
   for (i = index + 1; i <= nowBarIndex; i++)
       with (indexOfBar[i].tabObj)
            {
            position = "absolute"
            left = 0
            top = bodycontents.clientHeight - 20 * (numBar - i)
            }
   displayButton(nowBar, "none")
   nowBar = indexOfBar[index]
   nowBarIndex = index
   displayButton(nowBar, "")
   underBarHeight = 20 * (numBar - nowBarIndex - 1)
   numButton = nowBar.nChildren
   lastButton = document.all["s" + nowBarIndex + (numButton - 1)]
   maxHeight = lastButton.offsetTop + 20 + underBarHeight
   window.onresize()
   nowButtonIndex = 0
   bus.display = "none"
   }
if (nowBar.href)
   {
   window.open(nowBar.href, nowBar.target)
   if (clickedButton)
      {
      clickedButton.className = ""
      clickedButton = ""
      if (grayScale)
         {
         //clickedImage.style.filter = "gray"
         clickedImage = ""
         }
      }
   }
}

function mouseon(button)
{
if (clickedButton != button)
   {
   button.className = "mouseon"
   //if (grayScale) document.images["img" + button.id].style.filter = 0
   }
if (button.status) window.status = button.status
}

function mouseout(button)
{
if (clickedButton != button)
   {
   button.className = ""
   //if (grayScale) document.images["img" + button.id].style.filter = "gray"
   }
window.status = ""
}

function mousedown(button)
{
if (window.event.button == 1)
   {
   oldButton = clickedButton
   clickedButton = button
   if (grayScale)
      {
      oldImage = clickedImage
      clickedImage = document.images["img" + button.id]
      }
   button.className = "clicked"
   }
}

function mouseup(button)
{
if (window.event.button == 1)
   {
   if (oldButton && oldButton != clickedButton)
      {
      oldButton.className = ""
      //if (grayScale) oldImage.style.filter = "gray()"
      }
   window.open(button.url, (window.event.shiftKey)? "_blank" : button.target, features)
   }
}

function upclick()
{
if (nowButtonIndex)
   {
   document.all["s" + nowBarIndex + --nowButtonIndex].style.display = ""
   document.all["label" + nowBarIndex + nowButtonIndex].style.display = ""
   maxHeight = lastButton.offsetTop + 20 + underBarHeight
   window.onresize()
   }
if (!nowButtonIndex) bus.display = "none"
}

function downclick()
{
if (nowButtonIndex < numButton - 1)
   {
   document.all["s" + nowBarIndex + nowButtonIndex].style.display = "none"
   document.all["label" + nowBarIndex + nowButtonIndex++].style.display = "none"
   if (bus.display = "none")
      {
      /*buttonup的页面相对位置 数值改变过（20-22  +1）*/
      bus.top = 22 * (nowBarIndex + 1 + 1) + 5
      bus.left = bodycontents.clientWidth - 20
      bus.display = ""
      }
   maxHeight = lastButton.offsetTop + 20 + underBarHeight
   window.onresize()
   }
}

function window.onresize()
{
bodyHeight = bodycontents.clientHeight
bodyWidth = bodycontents.clientWidth
if (bodyHeight < maxHeight)
   {
   bds.top = bodyHeight - 20 - underBarHeight
   bds.left = bodyWidth - 20
   bds.display = ""
   }
else
   {
   if (bodyHeight > maxHeight + 66) upclick()
   bds.display = "none"
   }
bus.left = bodyWidth - 20
fcs.left = bodyWidth - 16
if (nowBarIndex < numBar - 1)
   for (i = numBar - 1; i > nowBarIndex; i--)
       indexOfBar[i].tabObj.top = bodyHeight - 20 * (numBar - i)
}

function document.onkeydown()
{
  return false
}

function document.ondragstart()
{
  return false
}

function document.onselectstart()
{
  return false
}

function document.onmousedown()
{
  if (window.event.ctrlKey) location.reload()
}

function closeFrame()
{
   frameClose.className = ""
   window.parent.index.cols = "0,*"
   window.parent.frames(1).document.body.innerHTML += "<button style='height: 25; width: 25; position: absolute; top: 10; left: 10' onclick=\"style.display = 'none'; window.parent.index.cols = '100,*'\"><img alt=显示 src=" + pathName + " width=19 height=18></button>"
   mainhref = window.parent.frames(1).document.location.href
   scout()
}

function scout()
{
with (window.parent.frames(1).document)
     if (location.href != mainhref && readyState == "complete")
        {
           window.parent.frames(1).document.body.innerHTML += "<button style='height: 25; width: 25; position: absolute; top: 10; left: 10' onclick=\"style.display = 'none'; window.parent.index.cols = '100,*'\"><img alt=显示 src=" + pathName + " width=19 height=18></button>"
           mainhref = location.href
        }
if (window.parent.index.cols == "0,*") setTimeout("scout()", 1000)
}

function window.onload()
{
window.onresize()
}

Answer 2

meizz(梅花雪) 大侠，帮忙啊。

Answer 3

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Menu</title>
<script language=javascript>
function showSubmenu(obj)
{
for(var i=0;i<submunuTbody.length;i++)
{
if(submunuTbody[i]!=obj) submunuTbody[i].style.display="none";
else submunuTbody[i].style.display="";

}}
</script>
</head><body>
<table style="width:100%;height:100%">
<tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[0]);" >
  <td>Menu01</td>
</tr>
<tbody id=submunuTbody >
<tr style="height:20;background-color:eeeeee">
  <td>Menu0101</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0102</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0103</td>
</tr>
<tr >
  <td></td>
</tr>
</tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[1]);"  >
  <td>Menu02</td>
</tr>
<tbody id=submunuTbody style="display:none">
<tr style="height:20;background-color:eeeeee">
  <td>Menu0201</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0202</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0203</td>
</tr>
<tr >
  <td></td>
</tr>
</tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[2]);"  >
  <td>Menu03</td>
</tr>
<tbody id=submunuTbody style="display:none">
<tr style="height:20;background-color:eeeeee">
  <td>Menu0301</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0302</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0303</td>
</tr>
<tr >
  <td></td>
</tr>
</tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[3]);"  >
  <td>Menu04</td>
</tr>
<tbody id=submunuTbody style="display:none">
<tr style="height:20;background-color:eeeeee">
  <td>Menu0401</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0402</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0403</td>
</tr>
<tr >
  <td></td>
</tr>
</tbody><tr style="height:20;background-color:cccccc" onclick="showSubmenu(submunuTbody[4]);"  >
  <td>Menu05</td>
</tr>
<tbody id=submunuTbody style="display:none">
<tr style="height:20;background-color:eeeeee">
  <td>Menu0501</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0502</td>
</tr>
<tr style="height:20;background-color:eeeeee">
  <td>Menu0503</td>
</tr>
<tr >
  <td></td>
</tr>
</tbody></table>
</body></html>