QQ菜单

<meta http-equiv="Content-Type" content="text/html;   charset=gb2312" /><script   language='JavaScript'>  
    var   headHeight   =   22;  //菜单标题栏高度
    var   bodyHeight   =   302; //菜单高度（包括标题栏和内容体）
    var   objcount   =   5;
    var   step   =   10;
    var   moving   =   false;
 
 /*******************
 *
 * 点击以后改变样式，
 * 且移动
 ********************/
    function   showme(obj1,obj2)  
    {  
   
        if(moving)return;  
        moving=true;  
        for(i=0;i<document.all.tags('td').length;i++)  
            if(document.all.tags('td')[i].className.indexOf('headtd')   ==   0)  
               document.all.tags('td')[i].className   =   'headtd1';  
        obj2.className   =   'headtd2';  
        moveme(obj1);  
    }
 
    /****************
 *  移动判断
 *  param:当前对象
 ****************/
    function   moveme(obj)  
    {  
       idnumber   =   parseInt(obj.id.substr(4));  //取菜单ID后的序号
       objtop   =   headHeight*(idnumber-1);
   
    //菜单底部的值,按从上到下的顺序,每个菜单底部的值递增 22(标题栏高度)
       objbuttom   =   bodyHeight   +   headHeight * (idnumber-2); 

       //第一个菜单的值为0,如果第一个菜单展开的话,第二个菜单的值为302,第一个菜单的标题栏是不变的
       currenttop   =   parseInt(obj.style.top);  
   
    /*
    如果菜单1闭合的话,currenttop=0;objbuttom=280;objtop=0;
    */

       if(currenttop   >=   objbuttom)   //如果 div 的 上限Y值>
       {  
          countid   =   1;  
          for(i=0;i<document.all.tags('div').length;i++)  
          if(document.all.tags('div')[i].id   ==   'item'+countid+'body')  
          {  
   
              obj   =   document.all.tags('div')[i];  
              objtop   =   headHeight   *   (countid   -   1);  

              if   (countid   ==   idnumber)  
              {  
                   moveup(obj,objtop,false);  
                   break;  
              }  
              else
     {
                   moveup(obj,objtop,true);
     }
              countid++;  
          }  
       }  
       else if((currenttop   <=   objtop)   &&   (idnumber   <   objcount))   //从最下面的菜单开始移动
       {  
 
              idnumber++;  
              countid   =   objcount;  
              for(i=document.all.tags('div').length-1;i>=0;i--)
     {
                 if(document.all.tags('div')[i].id   ==   'item'+countid+'body')  
                 {  
                      obj   =   document.all.tags('div')[i];  
                      objbuttom   =   bodyHeight   +   headHeight   *   (countid   -   2);  
                      if   (countid   ==   idnumber)  
                      {  
                            movedown(obj,objbuttom,false);  
                            break;  
                      }  
                      else
       {
                            movedown(obj,objbuttom,true);
       }
                      countid--;  
                 }  
       }
       }
    /*不管最后怎么样,都要把moving值赋回初值,否则会出问题.
    当moving=true是且moveup or movedown都没有运行时出现
    moving值无法成为初始状态的false值,按理论上讲,如果程序逻辑完善的话是不会出现类似的情况的
    但是,程序无法保证十全十美的情况下就会出现你讲的情况了
    */
    if (moving)moving=false;
 
    }
 
 //向上移动
    function   moveup(obj,objtop,ismove)  
    {  
      currenttop   =   parseInt(obj.style.top);  
      if   (currenttop   >   objtop)  
      {  
          obj.style.top   =   currenttop   -   step;  
          setTimeout('moveup('+obj.id+','+objtop+','+ismove+')',1)  
          return;  
      }  
      moving   =   ismove;  
    }
 
 //向下移动
    function   movedown(obj,objbuttom,ismove)  
    {  
       currenttop   =   parseInt(obj.style.top);  
       if(currenttop   <   objbuttom)  
       {  
          obj.style.top   =   currenttop   +   step;  
          setTimeout('movedown('+obj.id+','+objbuttom+','+ismove+')',1)  
          return;  
       }  
       moving   =   ismove;  
    }
 
  </script><style type="text/css">

 

  
  .headtd1{
      background:   #00A4E1;
   border:   2px   outset;
   border-color:   #00BBFF   #0077FF   #0077FF   #00BBFF;
   cursor:   hand;
   font-size:   9pt;
   }
   .headtd2   {   background:   #20C1FF;
   border:   2px   outset;
   border-color:   #60D3FF   #0077FF   #0077FF   #60D3FF;
   cursor:   hand;
   font-size:   9pt;
   }
   .bodytd   {   background:   #99CCFF;
   border:   2px   outset;
   border-color:   #B0D8FF   #0077FF   #0077FF   #B0D8FF;
   font-size:   9pt;
   }  
  </style>
<div id="mainboard" style="Z-INDEX: 1; BACKGROUND: #99ccff; LEFT: 2px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; TOP: 2px; HEIGHT: 390px">
<div id="item1body" style="Z-INDEX: 2; LEFT: 0px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; TOP: 0px; HEIGHT: 302px">
<table height="100%" cellspacing="0" cellpadding="2" width="100%" border="0">
    <tbody>
        <tr>
            <td class="headtd2" id="item1head" οnclick="showme(item1body,this)" align="center" height="20">菜单1</td>
        </tr>
        <tr>
            <td class="bodytd" align="center">test </td>
        </tr>
    </tbody>
</table>
</div>
<div id="item2body" style="Z-INDEX: 3; LEFT: 0px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; HEIGHT: 302px">
<table height="100%" cellspacing="0" cellpadding="2" width="100%" border="0">
    <tbody>
        <tr>
            <td class="headtd1" id="item2head" οnclick="showme(item2body,this)" align="center" height="20">菜单2 </td>
        </tr>
        <tr>
            <td class="bodytd" align="center">test </td>
        </tr>
    </tbody>
</table>
</div>
<div id="item3body" style="Z-INDEX: 4; LEFT: 0px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; HEIGHT: 302px">
<table height="100%" cellspacing="0" cellpadding="2" width="100%" border="0">
    <tbody>
        <tr>
            <td class="headtd1" id="item3head" οnclick="showme(item3body,this)" align="center" height="20">菜单3 </td>
        </tr>
        <tr>
            <td class="bodytd" align="center">test </td>
        </tr>
    </tbody>
</table>
</div>
<div id="item4body" style="Z-INDEX: 5; LEFT: 0px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; HEIGHT: 302px">
<table height="100%" cellspacing="0" cellpadding="2" width="100%" border="0">
    <tbody>
        <tr>
            <td class="headtd1" id="item4head" οnclick="showme(item4body,this)" align="center" height="20">菜单4 </td>
        </tr>
        <tr>
            <td class="bodytd" align="center">test </td>
        </tr>
    </tbody>
</table>
</div>
<div id="item5body" style="Z-INDEX: 6; LEFT: 0px; OVERFLOW: hidden; WIDTH: 120px; POSITION: absolute; HEIGHT: 302px">
<table height="100%" cellspacing="0" cellpadding="2" width="100%" border="0">
    <tbody>
        <tr>
            <td class="headtd1" id="item5head" οnclick="showme(item5body,this)" align="center" height="20">菜单5 </td>
        </tr>
        <tr>
            <td class="bodytd" align="center">test </td>
        </tr>
    </tbody>
</table>
</div>
</div>