想做一个用数字按键来实现超链接选择的菜单？？？

是不是这样的?http://qisanyou.y365.com  看连接菜单.

解决方案 »

  1.   

    折腾了老半天，感觉可能思路不太对
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .menu {  font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; cursor: hand}
    .menuonmouse { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    .menuonmouseout { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    .menuonmouseover { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    </style>
    </head><body bgcolor="#CCCCCC" text="#000000" onkeydown=showmenu(event.keyCode)>
    <div id="Layer1" style="position:absolute; left:10px; top:10px; width:41px; height:24px; z-index:1"> 
      <table cellspacing="4">
        <tr> 
          <td nowrap id="menu1" class="menuonmouseout" onMouseOver="myover(this,menu01)" >菜单项一</td>
          <td nowrap id="menu2" class="menuonmouseout" onMouseOver="myover(this,menu02)" >菜单项二</td>
          <td nowrap id="menu3" class="menuonmouseout" onMouseOver="myover(this,menu03)" >菜单项三</td>
          <td nowrap id="menu4" class="menuonmouseout" onMouseOver="myover(this,menu04)" >菜单项四</td>
          <td nowrap id="menu5" class="menuonmouseout" onMouseOver="myover(this,menu05)" >菜单项五</td>
        </tr>
        <tr> 
          <td align="center" valign="top"> 
            <div id="menu01" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">
                <tr> 
                  <td nowrap id="menu011" class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)" onclick="location='http://51js.1000box.net'">菜单项一.一</td>
                </tr>
                <tr> 
                  <td id="menu012" class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">菜单项一.二</td>
                </tr>
                <tr> 
                  <td id="menu013" class="menuonmouseout" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">菜单项一.三</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu02" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">
                <tr> 
                  <td id="menu021" nowrap class="menuonmouseout" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">菜单项二.一</td>
                </tr>
                <tr> 
                  <td id="menu022" class="menuonmouseout" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">菜单项二.二</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu03" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">
                <tr> 
                  <td id="menu031" nowrap class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项三.一</td>
                </tr>
                <tr> 
                  <td id="menu032" class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项三.二</td>
                </tr>
                <tr> 
                  <td id="menu033" class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项三.三</td>
                </tr>
                <tr> 
                  <td id="menu034" class="menuonmouseout" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">菜单项三.四</td>
                </tr>
              </table>
            </div>
          </td>
          <td valign="top" align="center"> 
            <div id="menu04" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">
                <tr> 
                  <td id="menu041" nowrap class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项四.一</td>
                </tr>
                <tr> 
                  <td id="menu042" class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项四.二</td>
                </tr>
                <tr> 
                  <td id="menu043" class="menuonmouseout" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">菜单项四.三</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu05" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">
                <tr> 
                  <td id="menu051" nowrap class="menuonmouseout" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">菜单项五.一</td>
                </tr>
                <tr> 
                  <td id="menu052" class="menuonmouseout" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">菜单项五.二</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <p> </p>
    </body>
    </html>
    <script>
    var nH=0;
    var nV=0;
    function myover(obj,menu)
    {
    menu1.className = "menuonmouseout";
    menu2.className = "menuonmouseout";
    menu3.className = "menuonmouseout";
    menu4.className = "menuonmouseout";
    menu5.className = "menuonmouseout"; obj.className = "menuonmouseover"; menu01.style.visibility = "hidden";
    menu02.style.visibility = "hidden";
    menu03.style.visibility = "hidden";
    menu04.style.visibility = "hidden";
    menu05.style.visibility = "hidden"; menu.style.visibility = "visible";
    }
    function myout(obj,menu)
    {
    obj.className = "menuonmouseout";
    menu.style.visibility = "hidden"; if(obj.name==("menu0"+nH)) {alert(2);nH=0;nV=0;}
    }
    function showmenu(n){
    //根据数字显示横向菜单
    if(n>48 && n<58){
    if(n-48>5) return;
    nH=n-48;
    eval("myover(this,menu0"+nH+")");
    return;
    } //<-
    if(n==37 && nH>0 && nH-1>0) {

    if(nV>0) eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");//清除子菜单
    nH=nH-1;nV=0;
    eval("myover(menu" + nH + ",menu0"+nH+")");
    return;
    } //->
    if(n==39 && nH>0 && nH+1<6) {
    if(nV>0) eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");//清除子菜单
    nH=nH+1;nV=0;
    eval("myover(menu" + nH + ",menu0"+nH+")");
    return;
    } if(n==38 ||n==40){
    var nMove=0;
    if(n==38) {
    nMove=-1;
    }
    if(n==40) {
    nMove=1;
    }
    try{
    eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");
    }catch(eno){} if(nV+nMove<0) return; try{
    eval("myover(menu0" + nH + (nV+nMove) + ",menu0" + nH + ")");
    nV+=nMove; }catch(eno){
    eval("myover(menu0" + nH + nV + ",menu0" + nH + ")"); }
    }//end if(n=38||40)}
    </script>
    <p>a<p>a<p>a
    <div id=show></div>
    <input type=button value=show onclick= "show.innerHTML='nH=' + nH + ';nV=' + nV">
      

  2.   

    谢谢您了。
    不过有个小问题，就是如果我已经用鼠标指向了一个菜单后，它的下级菜单会跳出（没问题），但这时我再用上下键选择时，便会出现错误："menu000未定义"。不过辛苦您了。先给您18分吧：-）
    一会我自己再想想，或者您再帮我想想。
    ~_~
      

  3.   

    Try this one ...<html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    .menu {  font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; cursor: hand}
    .menuonmouse { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    .menuonmouseout { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #999999; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: inset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    .menuonmouseover { font-family: "Arial", "Helvetica", "sans-serif"; font-size: 10px; color: #FFFFFF; background-color: #006699; border-color: #CCCCCC #666666 #666666 #CCCCCC; cursor: hand ; border-style: outset; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
    </style>
    </head><body bgcolor="#CCCCCC" text="#000000" onkeydown=showmenu(event.keyCode)>
    <div id="Layer1" style="position:absolute; left:10px; top:10px; width:41px; height:24px; z-index:1"> 
      <table cellspacing="4">
        <tr> 
          <td nowrap id="menu1" class="menuonmouseout" onMouseOver="setHV(1,0);myover(this,menu01);" >菜单项一</td>
          <td nowrap id="menu2" class="menuonmouseout" onMouseOver="setHV(2,0);myover(this,menu02);" >菜单项二</td>
          <td nowrap id="menu3" class="menuonmouseout" onMouseOver="setHV(3,0);myover(this,menu03);" >菜单项三</td>
          <td nowrap id="menu4" class="menuonmouseout" onMouseOver="setHV(4,0);myover(this,menu04);" >菜单项四</td>
          <td nowrap id="menu5" class="menuonmouseout" onMouseOver="setHV(5,0);myover(this,menu05);" >菜单项五</td>
        </tr>
        <tr> 
          <td align="center" valign="top"> 
            <div id="menu01" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu01)" onMouseOut="myout(this,menu01)">
                <tr> 
                  <td nowrap id="menu011" class="menuonmouseout" onMouseOver="setHV(1,1);myover(this,menu01);" onMouseOut="myout(this,menu01)" onclick="location='http://51js.1000box.net'">菜单项一.一</td>
                </tr>
                <tr> 
                  <td id="menu012" class="menuonmouseout" onMouseOver="setHV(1,2);myover(this,menu01);" onMouseOut="myout(this,menu01)">菜单项一.二</td>
                </tr>
                <tr> 
                  <td id="menu013" class="menuonmouseout" onMouseOver="setHV(1,3);myover(this,menu01);" onMouseOut="myout(this,menu01)">菜单项一.三</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu02" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu02)" onMouseOut="myout(this,menu02)">
                <tr> 
                  <td id="menu021" nowrap class="menuonmouseout" onMouseOver="setHV(2,1);myover(this,menu02);" onMouseOut="myout(this,menu02)">菜单项二.一</td>
                </tr>
                <tr> 
                  <td id="menu022" class="menuonmouseout" onMouseOver="setHV(2,2);myover(this,menu02);" onMouseOut="myout(this,menu02)">菜单项二.二</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu03" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu03)" onMouseOut="myout(this,menu03)">
                <tr> 
                  <td id="menu031" nowrap class="menuonmouseout" onMouseOver="setHV(3,1);myover(this,menu03);" onMouseOut="myout(this,menu03)">菜单项三.一</td>
                </tr>
                <tr> 
                  <td id="menu032" class="menuonmouseout" onMouseOver="setHV(3,2);myover(this,menu03);" onMouseOut="myout(this,menu03)">菜单项三.二</td>
                </tr>
                <tr> 
                  <td id="menu033" class="menuonmouseout" onMouseOver="setHV(3,3);myover(this,menu03);" onMouseOut="myout(this,menu03)">菜单项三.三</td>
                </tr>
                <tr> 
                  <td id="menu034" class="menuonmouseout" onMouseOver="setHV(3,4);myover(this,menu03);" onMouseOut="myout(this,menu03)">菜单项三.四</td>
                </tr>
              </table>
            </div>
          </td>
          <td valign="top" align="center"> 
            <div id="menu04" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu04)" onMouseOut="myout(this,menu04)">
      

  4.   

    续上....            <tr> 
                  <td id="menu041" nowrap class="menuonmouseout" onMouseOver="setHV(4,1);myover(this,menu04);" onMouseOut="myout(this,menu04)">菜单项四.一</td>
                </tr>
                <tr> 
                  <td id="menu042" class="menuonmouseout" onMouseOver="setHV(4,2);myover(this,menu04);" onMouseOut="myout(this,menu04)">菜单项四.二</td>
                </tr>
                <tr> 
                  <td id="menu043" class="menuonmouseout" onMouseOver="setHV(4,3);myover(this,menu04);" onMouseOut="myout(this,menu04)">菜单项四.三</td>
                </tr>
              </table>
            </div>
          </td>
          <td align="center" valign="top"> 
            <div id="menu05" style=" visibility: hidden"> 
              <table width="75%" border="0" class="menu" onMouseOver="myover(this,menu05)" onMouseOut="myout(this,menu05)">
                <tr> 
                  <td id="menu051" nowrap class="menuonmouseout" onMouseOver="setHV(5,1);myover(this,menu05);" onMouseOut="myout(this,menu05)">菜单项五.一</td>
                </tr>
                <tr> 
                  <td id="menu052" class="menuonmouseout" onMouseOver="setHV(5,2);myover(this,menu05);" onMouseOut="myout(this,menu05)">菜单项五.二</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <p> </p>
    </body>
    </html>
    <script>
    var nH=0;
    var nV=0;
    function setHV(h,v){
    if((nH!=h || nV!=v) && nH>0 && nV>0) eval("menu0"+nH+nV+".onmouseout()");
    nH=h;
    nV=v;
    }
    function myover(obj,menu)
    {
    menu1.className = "menuonmouseout";
    menu2.className = "menuonmouseout";
    menu3.className = "menuonmouseout";
    menu4.className = "menuonmouseout";
    menu5.className = "menuonmouseout"; obj.className = "menuonmouseover"; menu01.style.visibility = "hidden";
    menu02.style.visibility = "hidden";
    menu03.style.visibility = "hidden";
    menu04.style.visibility = "hidden";
    menu05.style.visibility = "hidden"; menu.style.visibility = "visible";}
    function myout(obj,menu)
    {
    obj.className = "menuonmouseout";
    menu.style.visibility = "hidden";
    }
    function showmenu(n){
    //根据数字显示横向菜单
    if(n>48 && n<58){
    if(n-48>5) return;
    nH=n-48;
    if(nH>0 && nV>0) eval("menu0" + nH + nV + ".onmouseover()");
    eval("menu"+nH+".onmouseover()");
    return;
    } //<-
    if(n==37 && nH>0 && nH-1>0) {

    if(nV>0) eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");//清除子菜单
    nH=nH-1;nV=0;
    eval("myover(menu" + nH + ",menu0"+nH+")");
    return;
    } //->
    if(n==39 && nH>0 && nH+1<6) {
    if(nV>0) eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");//清除子菜单
    nH=nH+1;nV=0;
    eval("myover(menu" + nH + ",menu0"+nH+")");
    return;
    } if(n==38 ||n==40){
    var nMove=0;
    if(n==38) {
    nMove=-1;
    }
    if(n==40) {
    nMove=1;
    }
    try{
    eval("myout(menu0" + nH + nV + ",menu0" + nH + ")");
    }catch(eno){} if(nV+nMove<0) return; try{
    eval("myover(menu0" + nH + (nV+nMove) + ",menu0" + nH + ")");
    nV+=nMove; }catch(eno){
    eval("myover(menu0" + nH + nV + ",menu0" + nH + ")"); }
    }//end if(n=38||40)}
    </script>
    <p>a<p>a<p>a
    <div id=show></div>