怎么改成3级菜单

eling27 · 发表于 2009-4-27 13:42:52

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script language="JavaScript" type="text/JavaScript">
var MenuText = new Array(6);
    var MenuEven = new Array(6);
    MenuText[1] = ["部门管理","人员管理","角色管理"];
    MenuText[2] = ["新闻管理","每月简报","消费警示"];
    MenuText[3] = ["编码维护","工作流程"];
 	MenuText[4] = ["交换日志","数据抽取","系统备份"];

MenuEven[1] = ["url11","url12","url13"];
    MenuEven[2] = ["url21","url22"];
    MenuEven[3] = ["url31","url32","url33"];
  	MenuEven[4] = ["url41","url42","url43"];

var  oPopup = window.createPopup();

function ButtonClick(node,t)
{

var left = getLeftIE(node,true)-20;  
    var top = getTopIE(node,true)+22;

var width = 90;
    var height = MenuText[t].length*24;

oPopup.document.body.innerHTML = "";
    var oPopBody = oPopup.document.body;
    oPopup.show(left,top, width, height, document.body);      
        oPopup.document.open;

oPopup.document.write("<body leftmargin=0 topmargin=0 scroll=no style='border : 0 px;' onmouseover=clearTimeout(parent.popt); onmouseout=parent.popt=setTimeout('parent.oPopup.hide()',10);>");

oPopup.document.write("<table width=100%  height=100% style='border-collapse : collapse;'>");
    for(var i=0;i<MenuText[t].length;i++)
        {
        oPopup.document.write("<tr><td background='images/h.gif'  bgcolor=#b4d9fe  style='border-top : #000 1px solid;border: #000 1px solid;mouse : hand; font-size : 12px; color:#000;text-align:center;vertical-align : center;CURSOR: hand' onmouseover=this.background='images/h1.gif'; onmouseout=this.background='images/h.gif'; height='15' onclick='parent.parent.mianFrame.location.href=\""+MenuEven[t][i]+"\"';>"+MenuText[t][i]+"</td></tr>");
        }
        oPopup.document.write("</table></td></tr></table>");
        oPopup.document.write("</body>")
}

</SCRIPT>
<body>
<table width="353" border="0" cellspacing="0" cellpadding="0" class="headerleft">
      <tr>
        <td width="63" onMouseOver="ButtonClick(this,1)"><a href="#" class="top2">用户权限</a></td>
        <td width="38">&nbsp;</td>
        <td width="63" onMouseOver="ButtonClick(this,2)"><a href="#" class="top2">信息发布</a></td>
        <td width="31">&nbsp;</td>
        <td width="62" onMouseOver="ButtonClick(this,3)"><a href="#" class="top2">参数配置</a></td>
        <td width="30" onMouseOver="ButtonClick(this,3)">&nbsp;</td>
        <td width="66" onMouseOver="ButtonClick(this,4)"><a href="#" class="top2">数据交换</a></td>
      </tr>
    </table>
</body>
</html>

提示：您可以先修改部分代码再运行

这个是我一直在用的opopup菜单，现在要用3级的，我不会改。网上找了很久，只找到http://share.zcool.com.cn/thread-54126-1-1.html这个，但是不对的，用了frameset，好像只能用opopup下拉菜单

eling27 · 发表于 2009-4-27 14:46:20

等着高手来

ywmadonis · 发表于 2009-4-27 14:57:24

什么三级的？

eling27 · 发表于 2009-4-27 16:36:16

最多出来一个横向的下级菜单
我用的是frameset,一般的3级菜单多用不了

<frameset rows="72,*,25" cols="*" framespacing="0" frameborder="NO" border="0">
  <frame src="top.html" name="topFrame" scrolling="NO" noresize>
  <frame src="mainhtml" name="mianFrame"  noresize>
  <frame src="foot.html" name="footFrame" scrolling="NO" noresize>
</frameset>

eling27 · 发表于 2009-4-28 09:44:08

高手人影呢？偶是真的不晓得怎么办了，拜托拜托大侠们了

eling27 · 发表于 2009-4-28 09:47:51

而且这个代码，FF下是不行的，我也不指望了，只求IE下有3级菜单出来

eling27 · 发表于 2009-4-28 16:11:37

。。。伤心的。。。

xuexianli · 发表于 2009-4-28 16:47:33

我这块有一个例子你看看吧，对你应该有所帮助。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
function menu(){
var li=document.getElementById("menu").document.getElementsByTagName("li");
for (var i=0;i<li.length;i++){
li[i].onmouseover=function(){
this.className='show';
}
li[i].onmouseout=function(){
this.className="";
}
}
}
window.onload=menu;
</script>
<title>菜单的制作</title>
<style type="text/css">
*{list-style:none;
  padding:0;
  margin:0;
  font-size:12px;}

#menu ul li a:link{color:#666;
               text-decoration:none;
   font-weight:bold;}

#menu ul li a:hover{background:#CCC;
                  color:#fff;}

#menu{margin:20px 40px;}

#menu ul{width:160px;}

#menu ul li{position:relative;
         display:block!important;
display:inline;}

#menu ul li a{display:block;
            width:153px;
   height:22px;
   background:#EFEFEF;
   border-bottom:1px solid #CECFCE;
   border-right:1px solid #CECFCE;
   line-height:22px;
   padding-left:6px;}

/*=======================定位二级===========================*/

#menu ul li ul{position:absolute;
            top:0;
   left:160px;
   display:none;}

/*=======================滑过一级显示二级===========================*/

#menu ul li.show ul,#menu ul li:hover ul{display:block;}

/*=======================滑过一级隐藏三级===========================*/

#menu ul li.show ul li ul,#menu ul li:hover ul li ul{display:none;}

/*=======================滑过二级显示三级===========================*/

#menu ul li ul li.show ul,#menu ul li ul li:hover ul{display:block;}

#menu ul li.show a,#menu ul li:hover a{background:#ccc;
                                    color:#fff;}

</style>
</head>

<body>
<div id="menu">
  <ul>
<li><a href="#">广告艺术学院+</a>
   <ul>
      <li><a href="#">网络广告+</a>
   <ul>
      <li><a href="#">FLASH动画</a></li>
   <li><a href="#">网站美工</a></li>
   <li><a href="#">程序开发</a></li>
   </ul>
   </li>
   <li><a href="#">插画广告</a></li>
   <li><a href="#">视觉广告</a></li>
   </ul>
</li>
<li><a href="#">环境艺术学院+</a>
   <ul>
      <li><a href="#">家装系列</a></li>
   <li><a href="#">园林艺术</a></li>
   <li><a href="#">游离动画</a></li>
   </ul>
</li>
<li><a href="#">动画艺术学院+</a>
   <ul>
      <li><a href="#">影视包装</a></li>
   <li><a href="#">栏目包装+</a>
   <ul>
      <li><a href="#">视频剪辑</a></li>
   <li><a href="#">角色合成</a></li>
   </ul>
   </li>
   <li><a href="#">二维动画</a></li>
   </ul>
</li>
<li><a href="#">网络工程学院</a></li>
<li><a href="#">软件工程学院+</a>
   <ul>
      <li><a href="#">网站后台+</a>
      <ul>
      <li><a href="#">php脚本</a></li>
   <li><a href="#">ASP脚本</a></li>
   <li><a href="#">JSP脚本</a></li>
   </ul>
   </li>
   <li><a href="#">软件开发</a></li>
   <li><a href="#">Java编程</a></li>
   </ul>
</li>
  </ul>
</div>
</body>
</html>

eling27 · 发表于 2009-4-29 09:22:20

原帖由 [i]xuexianli 于 2009-4-28 16:47 发表
我这块有一个例子你看看吧，对你应该有所帮助。

function menu(){
var li=document.getElementById("menu").document.getElementsByTagName("li");
for (var i=0;i

谢谢xuexianli，这个我没用，这种菜单效果，我有很多类似的代码，但是我只想要OPOPUP的，你这个我改不到OPOPUP里面，而且他不能跨窗口

houjianghou · 发表于 2009-4-29 12:47:54

好像功能还不是很完善啊！！！1

eling27 · 发表于 2009-4-29 13:37:50

原帖由 [i]houjianghou 于 2009-4-29 12:47 发表
好像功能还不是很完善啊！！！1

厄，我要3级菜单

eling27 · 发表于 2009-4-29 14:58:10

找了个3级d popup菜单，右键弹出的，还是不会改 http://blog.csdn.net/adayfly/archive/2006/09/06/1185953.aspx

393465933 · 发表于 2009-4-29 15:54:12

..................

tony823 · 发表于 2009-4-29 16:13:08

你都先反思一下自己的设计思想是不对的！

eling27 · 发表于 2009-7-1 12:37:39

原帖由 [i]tony823 于 2009-4-29 16:13 发表
你都先反思一下自己的设计思想是不对的！

昏倒，和设计思想有啥关系？我只要实现这个功能

cloudgamer · 发表于 2009-7-1 14:05:27

这个浮动菜单支持多级，内有说明

帐号		自动登录	找回密码
密码			注册

怎么改成3级菜单

回复 1# eling27 [楼主] 的帖子