哪位提供一个这样的菜单例子

说白了就是类似QQ风格的菜单,明天发给你发消息给我,告诉我你的mail.

解决方案 »

  1.   

    yaray(雅睿,生活在别处):
    给我一分：
    [email protected]
      

  2.   

    yaray(雅睿,生活在别处)你好!我的email:[email protected]
    如果好用我会很快结帖的!谢谢
      

  3.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body bgcolor="#FFFFFF" >
    <style>
    <!--
    .skin0 {
    position:absolute;
    text-align:left;
    width:200px;
    border:2px solid black;
    background-color:menu;
    font-family:Verdana;
    line-height:20px;
    cursor:default;
    visibility:hidden;
    }
    .skin1 {
    cursor:default;
    font:menutext;
    position:absolute;
    text-align:left;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10pt;
    width:120px;
    background-color:menu;
    border:1 solid buttonface;
    visibility:hidden;
    border:2 outset buttonhighlight;
    }
    .menuitems {
    padding-left:15px;
    padding-right:10px;
    }
    -->
    </style><SCRIPT LANGUAGE="JavaScript1.2">
    <!-- Web Site:  http://www.painting-effects.co.uk --><!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com --><!-- Begin
    var menuskin = "skin1"; // skin0, or skin1
    var display_url = 0; // Show URLs in status bar?
    function showmenuie5() {
    var rightedge = document.body.clientWidth-event.clientX;
    var bottomedge = document.body.clientHeight-event.clientY;
    if (rightedge < ie5menu.offsetWidth)
    ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
    else
    ie5menu.style.left = document.body.scrollLeft + event.clientX;
    if (bottomedge < ie5menu.offsetHeight)
    ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
    else
    ie5menu.style.top = document.body.scrollTop + event.clientY;
    ie5menu.style.visibility = "visible";
    return false;
    }
    function hidemenuie5() {
    ie5menu.style.visibility = "hidden";
    }
    function highlightie5() {
    if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = "highlight";
    event.srcElement.style.color = "white";
    if (display_url)
    window.status = event.srcElement.url;
       }
    }
    function lowlightie5() {
    if (event.srcElement.className == "menuitems") {
    event.srcElement.style.backgroundColor = "";
    event.srcElement.style.color = "black";
    window.status = "";
       }
    }
    function jumptoie5() {
    if (event.srcElement.className == "menuitems") {
    if (event.srcElement.getAttribute("target") != null)
    window.open(event.srcElement.url, event.srcElement.getAttribute("target"));
    else
    window.location = event.srcElement.url;
       }
    }
    //  End -->
    </script>
    <div id="ie5menu" class="skin0" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();">
    <div class="menuitems" url="javascript:history.back();">返回</div>
    <div class="menuitems" url="http://javacool.3322.net">回首页</div>
    <hr>
    <div class="menuitems" url="http://www.163.com">网易</div>
    <div class="menuitems" url="http://www.sohu.com">搜狐</div>
    <hr>
    <div class="menuitems" url="http://www.sina.com.cn">新浪</div>
    <div class="menuitems" url="http://www.yahoo.com.cn">雅虎</div>
    </div>
    <script language="JavaScript1.2">
    if (document.all && window.print) {
    ie5menu.className = menuskin;
    document.oncontextmenu = showmenuie5;
    document.body.onclick = hidemenuie5;
    }
    </script>
    </body>
    </html>
      

  4.   

    <HTML><HEAD>
    <TITLE>类似QQ的菜单</TITLE>
    </HEAD><BODY bgcolor="#CCCCCC" leftmargin="0" topmargin="0" MARGINWIDTH="0" MARGINHEIGHT="0">
    <table width="100%" height="100%" border=1 cellpadding="0" cellspacing="0">
      <tr>
        <td>
    <table width="100%" height="100%" border=1 cellpadding="0" cellspacing="0">
      <tr>
        <td>
      <table width="100%" height="100%" border="0" cellpadding="1" cellspacing="2" bgcolor="#888888" align="center">      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu1');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>数据库</b></font>
            </td>
          </tr>
          <tbody id='Menu1' style='display:block'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a1').click();" style="{cursor:hand}">
                    <a id="a1" href="ProcessDB/DB/createDB.jsp" target="mainFrame" class="a"> 建立数据库 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a2').click();" style="{cursor:hand}">
                    <a id="a2" href="ProcessDB/DB/deleteDB.jsp" target="mainFrame" class="a"> 删除数据库 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu4');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>表</b></font>
            </td>
          </tr>
          <tbody id='Menu4' style='display:none'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a3').click();" style="{cursor:hand}">
                    <a id="a3" href="ProcessDB/Table/createTable.jsp" target="mainFrame" class="a"> 建立表 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a4').click();" style="{cursor:hand}">
                    <a id="a4" href="ProcessDB/Table/modifyTable.jsp" target="mainFrame" class="a"> 修改表 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a5').click();" style="{cursor:hand}">
                    <a id="a5" href="ProcessDB/Table/deleteTable.jsp" target="mainFrame" class="a"> 删除表 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu8');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>字段</b></font>
            </td>
          </tr>
          <tbody id='Menu8' style='display:none'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a6').click();" style="{cursor:hand}">
                    <a id="a6" href="ProcessDB/Column/createColumn.jsp" target="mainFrame" class="a"> 建立字段 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a7').click();" style="{cursor:hand}">
                    <a id="a7" href="ProcessDB/Column/modifyColumn.jsp" target="mainFrame" class="a"> 修改字段 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a8').click();" style="{cursor:hand}">
                    <a id="a8" href="ProcessDB/Column/deleteColumn.jsp" target="mainFrame" class="a"> 删除字段 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu12');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>父菜单</b></font>
            </td>
          </tr>
          <tbody id='Menu12' style='display:none'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a9').click();" style="{cursor:hand}">
                    <a id="a9" href="ProcessDB/Menu/createParMenu.jsp" target="mainFrame" class="a"> 建立父菜单 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a10').click();" style="{cursor:hand}">
                    <a id="a10" href="ProcessDB/Menu/modifyParMenu_list.jsp" target="mainFrame" class="a"> 修改父菜单 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a11').click();" style="{cursor:hand}">
                    <a id="a11" href="ProcessDB/Menu/deleteParMenu.jsp" target="mainFrame" class="a"> 删除父菜单 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>
    <!-- 待续 -->
      

  5.   

    <!-- 续前 -->      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu16');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>子菜单</b></font>
            </td>
          </tr>
          <tbody id='Menu16' style='display:none'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a12').click();" style="{cursor:hand}">
                    <a id="a12" href="ProcessDB/Menu/createSubMenu.jsp" target="mainFrame" class="a"> 建立子菜单 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a13').click();" style="{cursor:hand}">
                    <a id="a13" href="ProcessDB/Menu/modifySubMenu_list.jsp" target="mainFrame" class="a"> 修改子菜单 </a>
                  </td>
                </tr>            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a14').click();" style="{cursor:hand}">
                    <a id="a14" href="ProcessDB/Menu/deleteSubMenu.jsp" target="mainFrame" class="a"> 删除子菜单 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>      <tr height="20" bgcolor="#FF9933">
            <td align="center" onclick="JavaScript:switchstatus('Menu20');" style="{cursor:hand}">
              <font size="" color="#FFFFFF"><b>测试</b></font>
            </td>
          </tr>
          <tbody id='Menu20' style='display:none'>
          <tr>
            <td valign="top" cellpadding="0" cellspacing="0">          <table width="100%" height="100%" MARGINHEIGHT="0" MARGINWIDTH="0" border="0" background="include/images/background3.gif">            <tr height="20" bgcolor="#FFddbb">
                  <td align="center" onclick="changeBGcolor(this);document.getElementById('a15').click();" style="{cursor:hand}">
                    <a id="a15" href="Test.jsp" target="mainFrame" class="a"> 测试新类 </a>
                  </td>
                </tr>            <tr>
                  <td>&nbsp;</td><!-- 作用: 填充剩余空行 -->
                </tr>
              </table>        </td>
          </tr>
          </tbody>  </table>
        </td>
      </tr>
    </table>
        </td>
      </tr>
    </table>
    </BODY>
    </HTML>
    <script language="JavaScript">
    <!--
      // 菜单开关
      function switchstatus(obj){
        // 定义父级菜单ID数组(由JSP赋值)
        var menuid = new Array('Menu1','Menu4','Menu8','Menu12','Menu16','Menu20');
        for(var i=0;i<menuid.length;i++){
          document.getElementById(menuid[i]).style.display="none"; // 将所有菜单项设置为不显示
        }
        document.getElementById(obj).style.display="block"; // 显示指定项菜单
      }  // 恢复子菜单默认底色
      function initBGColor(td){
        var trs = td.parentElement.parentElement.children;
        for(var i=0;i<trs.length-1;i++){
          trs[i].className="trDefBgColor";;
        }
      }  // 改变子菜单底色
      function changeBGcolor(td){
        initBGColor(td); // 恢复子菜单默认底色
        td.parentElement.className="trCurBgColor";
      }  /* 以下仅 为了更好的查看使用效果 而进行的设置,实际使用时应注释掉 */
      var width = 150;  // 窗口宽度
      var height = 600; // 窗口高度
      window.resizeTo(width,height); // 改变窗口大小  var leftPos = (screen.availWidth-width)/2; // 窗口居中    ( X )
      var topPos = (screen.availHeight - height)/2; // 窗口居中 ( Y )
      window.moveTo(leftPos,topPos); // 移动窗口到指定位置
      /* 以上仅 为了更好的查看使用效果 而进行的设置,实际使用时应注释掉 */
    //-->
    </script><style>
    <!--
     .trCurBgColor{ background-color: #FFEEDD }
     .trDefBgColor{ background-color: #FFddbb }
     .a{text-decoration:none;}
     .a:link{color: #0000FF;}
     .a:visited{color: #FF7845;}
     .a:hover{color: #339933;}
    //-->
    </style>
      

  6.   

    我回去试试!
    以前看到一个用xml实现的，不知道谁有代码？