这种qq菜单怎么做？欢迎提供源码。效果请看：http://www.widelong.com/bbs/menu.asp

使用嵌套的 div，设置overflow:hidden，然后就是通过div的top属性移动div，主要就是这样了

解决方案 »

  1.   

    和这个差不多，转贴一下吧
    <html>
    <head>
    <title>QQ菜单</title>
    <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);
    }
    function moveme(obj)
    {
    idnumber = parseInt(obj.id.substr(4));
    objtop = headHeight * (idnumber - 1);
    objbuttom = bodyHeight + headHeight * (idnumber - 2);
    currenttop = parseInt(obj.style.top);
    if (currenttop >= objbuttom)
    {
    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--;
    }
    }
    }
    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>
    </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>
    </head>
    <body bgcolor='#FFFFFF' text='#000000'>
    <div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:390px; z-index:1; overflow: hidden; background: #99CCFF;'> <div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:302px; z-index:2; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:302; width:120px; height:302px; z-index:3; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:324; width:120px; height:302px; z-index:4; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item4body' style='position:absolute; left:0; top:346; width:120px; height:302px; z-index:5; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div><div id='item5body' style='position:absolute; left:0; top:368; width:120px; height:302px; z-index:6; overflow: hidden'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item5head' height='20' class='headtd1' onclick='showme(item5body,this)' align='center'>菜单5</td></tr><tr><td class='bodytd' align='center'>test</td></tr></table></div></div></body></html>
      

  2.   

    <SCRIPT language=JavaScript>
    <!--
    function MM_timelineGoto(tmLnName, fNew, numGotos) { //v2.0
      //Copyright 1997 Macromedia, Inc. All rights reserved.
      var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,lastKeyFr,propNum,theObj;
      if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
      tmLn = document.MM_Time[tmLnName];
      if (numGotos != null)
        if (tmLn.gotoCount == null) tmLn.gotoCount = 1;
        else if (tmLn.gotoCount++ >= numGotos) {tmLn.gotoCount=0; return}
      jmpFwd = (fNew > tmLn.curFrame);
      for (i = 0; i < tmLn.length; i++) {
        sprite = (jmpFwd)? tmLn[i] : tmLn[(tmLn.length-1)-i]; //count bkwds if jumping back
        if (sprite.charAt(0) == "s") {
          numKeyFr = sprite.keyFrames.length;
          firstKeyFr = sprite.keyFrames[0];
          lastKeyFr = sprite.keyFrames[numKeyFr - 1];
          if ((jmpFwd && fNew<firstKeyFr) || (!jmpFwd && lastKeyFr<fNew)) continue; //skip if untouchd
          for (keyFrm=1; keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]; keyFrm++);
          for (j=0; j<sprite.values.length; j++) {
            props = sprite.values[j];
            if (numKeyFr == props.length) propNum = keyFrm-1 //keyframes only
            else propNum = Math.min(Math.max(0,fNew-firstKeyFr),props.length-1); //or keep in legal range
            if (sprite.obj != null) {
              if (props.prop2 == null) sprite.obj[props.prop] = props[propNum];
              else        sprite.obj[props.prop2][props.prop] = props[propNum];
          } }
        } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      }
      tmLn.curFrame = fNew;
      if (tmLn.ID == 0) eval('MM_timelinePlay(tmLnName)');
    }
    function MM_timelineStop(tmLnName) { //v1.2
      //Copyright 1997 Macromedia, Inc. All rights reserved.
      if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
      if (tmLnName == null)  //stop all
        for (var i=0; i<document.MM_Time.length; i++) document.MM_Time[i].ID = null;
      else document.MM_Time[tmLnName].ID = null; //stop one
    }
    function MM_timelinePlay(tmLnName, myID) { //v1.2
      //Copyright 1997 Macromedia, Inc. All rights reserved.
      var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
      if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
      tmLn = document.MM_Time[tmLnName];
      if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
      if (myID == tmLn.ID) { //if Im newest
        setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
        fNew = ++tmLn.curFrame;
        for (i=0; i<tmLn.length; i++) {
          sprite = tmLn[i];
          if (sprite.charAt(0) == 's') {
            if (sprite.obj) {
              numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
              if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
                keyFrm=1;
                for (j=0; j<sprite.values.length; j++) {
                  props = sprite.values[j]; 
                  if (numKeyFr != props.length) {
                    if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                    else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
                  } else {
                    while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                    if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                      if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                      else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
            } } } } }
          } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
          if (fNew > tmLn.lastFrame) tmLn.ID = 0;
      } }
    }
    function MM_initTimelines() {
        //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
        var ns = navigator.appName == "Netscape";
        document.MM_Time = new Array(1);
        document.MM_Time[0] = new Array(4);
        document.MM_Time["Timeline1"] = document.MM_Time[0];
        document.MM_Time[0].MM_Name = "Timeline1";
        document.MM_Time[0].fps = 30;
        document.MM_Time[0][0] = new String("sprite");
        document.MM_Time[0][0].slot = 1;
        if (ns)
            document.MM_Time[0][0].obj = document["Layer1"];
        else
            document.MM_Time[0][0].obj = document.all ? document.all["Layer1"] : null;
        document.MM_Time[0][0].keyFrames = new Array(1, 11, 21);
        document.MM_Time[0][0].values = new Array(2);
        document.MM_Time[0][0].values[0] = new Array(5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5,5);
        document.MM_Time[0][0].values[0].prop = "left";
        document.MM_Time[0][0].values[1] = new Array(-244,-240,-210,-180,-150,-120,-100,-80,-60,-40,-20,0,-20,-40,-60,-80,-100,-120,-150,-180,-210,-240,-244);
        document.MM_Time[0][0].values[1].prop = "top";
        if (!ns) {
            document.MM_Time[0][0].values[0].prop2 = "style";
            document.MM_Time[0][0].values[1].prop2 = "style";
        }
        document.MM_Time[0][1] = new String("behavior");
        document.MM_Time[0][1].frame = 23;
        document.MM_Time[0][1].value = "MM_timelineGoto('Timeline1','1')";
        document.MM_Time[0][2] = new String("behavior");
        document.MM_Time[0][2].frame = 12;
        document.MM_Time[0][2].value = "MM_timelineStop('Timeline1')";
        document.MM_Time[0][3] = new String("behavior");
        document.MM_Time[0][3].frame = 23;
        document.MM_Time[0][3].value = "MM_timelineStop('Timeline1')";
        document.MM_Time[0].lastFrame = 24;
        for (i=0; i<document.MM_Time.length; i++) {
            document.MM_Time[i].ID = null;
            document.MM_Time[i].curFrame = 0;
            document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
        }
    }
    //-->
    </SCRIPT>
      

  3.   

    这个更好！！！！！！！！！
    <html>
    <head>
    <title>QQ菜单</title>
    <meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
    <script language='JavaScript'>
    var headHeight = 22;var bodyHeight = 202;var objcount = 4;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);
    }
    function moveme(obj)
    {
    idnumber = parseInt(obj.id.substr(4));
    objtop = headHeight * (idnumber - 1);
    objbuttom = bodyHeight + headHeight * (idnumber - 2);
    currenttop = parseInt(obj.style.top);
    if (currenttop >= objbuttom)
    {
    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--;
    }
    }
    }
    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}
    td{font-size:9pt}
    body{font-size:9pt}
    a {  font-size: 9pt; color: #0066CC; text-decoration: none}
    a:hover {  font-size: 9pt; color: #990000}
    </style>
    </head>
      

  4.   

    <body bgcolor='#FFFFFF' text='#000000'><div id='mainboard' style='position:absolute; left:2px; top:2px; width:120px; height:268px; z-index:1; overflow: hidden; background: #33CCFF;'><div id='item1body' style='position:absolute; left:0; top:0; width:120px; height:202px; z-index:2; overflow: hidden;'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item1head' height='20' class='headtd2' onclick='showme(item1body,this)' align='center'>菜单1</td></tr><tr>
            <td class='bodytd' align='center'>
              <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="/">子菜单子菜单</a></td>
                </tr>
              </table>
            </td></tr></table></div><div id='item2body' style='position:absolute; left:0; top:202; width:120px; height:202px; z-index:3; overflow: hidden;'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item2head' height='20' class='headtd1' onclick='showme(item2body,this)' align='center'>菜单2</td></tr><tr><td class='bodytd' align='center'>
              <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="/">子菜单子菜单</a></td>
                </tr>
              </table>
            </td></tr></table></div><div id='item3body' style='position:absolute; left:0; top:224; width:120px; height:202px; z-index:4; overflow: hidden;'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item3head' height='20' class='headtd1' onclick='showme(item3body,this)' align='center'>菜单3</td></tr><tr>
            <td class='bodytd' align='center'>
    <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="/">子菜单子菜单</a></td>
                </tr>
              </table>
    </td>
          </tr></table></div><div id='item4body' style='position:absolute; left:0; top:246; width:120px; height:202px; z-index:5; overflow: hidden;'><table width='100%' border='0' height='100%' cellpadding='2' cellspacing='0'><tr><td id='item4head' height='20' class='headtd1' onclick='showme(item4body,this)' align='center'>菜单4</td></tr><tr>
            <td class='bodytd' align='center'>
    <table width="99%" border="0" cellspacing="1" cellpadding="1" height="100%">
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="http://0755i.com" target="_blank">子菜单子菜单</a></td>
                </tr>
                <tr> 
                  <td bgcolor="#D9ECFF" align="center"><a href="/">子菜单子菜单</a></td>
                </tr>
              </table>
    </td>
          </tr></table></div></div></body></html>