100分求解关于菜单的问题

Question

**************menu.js******************if (document.all)    {n=0;ie=1;fShow="visible";fHide="hidden";}
if (document.layers) {n=1;ie=0;fShow="show";   fHide="hide";}window.onerror=new Function("return true")
////////////////////////////////////////////////////////////////////////////
// Function Menu()                                                        //
////////////////////////////////////////////////////////////////////////////
rightX = 0;
function Menu()
{
this.bgColor     = "#ccccff";
if (ie) this.menuFont = "bold xx-small Verdana";
if (n)  this.menuFont = "bold x-small Verdana";
// this.fontColor   = "white"; this.addItem    = addItem;
this.addSubItem = addSubItem;
this.showMenu   = showMenu;
this.mainPaneBorder = 0;
this.subMenuPaneBorder = 0; this.subMenuPaneWidth = 150; lastMenu = null;

rightY = 0;
leftY = 0;
leftX = 0; HTMLstr = "";
HTMLstr += "<!-- MENU PANE DECLARATION BEGINS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr += "<div id='MainTable' style='position:relative'>\n";
// if (n)  HTMLstr += "<layer name='MainTable'>\n";
HTMLstr += "<table  bgcolor='"+this.bgColor+"' border='"+this.mainPaneBorder+"'>\n";
HTMLstr += "<tr>";
if (n) HTMLstr += "<td>&nbsp;";
HTMLstr += "<!-- MAIN MENU STARTS -->\n";
HTMLstr += "<!-- MAIN_MENU -->\n";
HTMLstr += "<!-- MAIN MENU ENDS -->\n";
if (n) HTMLstr += "</td>";
HTMLstr += "</tr>\n";
HTMLstr += "</table>\n";
HTMLstr += "\n";
HTMLstr += "<!-- SUB MENU STARTS -->\n";
HTMLstr += "<!-- SUB_MENU -->\n";
HTMLstr += "<!-- SUB MENU ENDS -->\n";
HTMLstr += "\n";
if (ie) HTMLstr+= "</div>\n";
// if (n)  HTMLstr+= "</layer>\n";
HTMLstr += "<!-- MENU PANE DECALARATION ENDS -->\n";
}function addItem(idItem, text, hint, location, altLocation)
{
var Lookup = "<!-- ITEM "+idItem+" -->";
if (HTMLstr.indexOf(Lookup) != -1)
{
alert(idParent + " already exist");
return;
}
var MENUitem = "";
MENUitem += "\n<!-- ITEM "+idItem+" -->\n";
if (n)
{
MENUitem += "<ilayer name="+idItem+">";
MENUitem += "<a href='.' class=clsMenuItemNS onmouseover=\"displaySubMenu('"+idItem+"')\" onclick=\"return false;\">";
MENUitem += "|&nbsp;";
MENUitem += text;
MENUitem += "</a>";
MENUitem += "</ilayer>";
}
if (ie)
{
MENUitem += "<td>\n";
MENUitem += "<div id='"+idItem+"' style='position:relative; font: "+this.menuFont+";'>\n";
MENUitem += "<a ";
MENUitem += "class=clsMenuItemIE ";
// MENUitem += "style='text-decoration: none; font: "+this.menuFont+"; color: "+this.fontColor+"; cursor: hand;' ";
if (hint != null)
MENUitem += "title='"+hint+"' ";
if (location != null)
{
MENUitem += "href='"+location+"' ";
MENUitem += "onmouseover=\"hideAll()\" ";
}
else
{
if (altLocation != null)
MENUitem += "href='"+altLocation+"' ";
else
MENUitem += "href='.' ";
MENUitem += "onmouseover=\"displaySubMenu('"+idItem+"')\" ";
MENUitem += "onclick=\"return false;\" "
}
MENUitem += ">";
MENUitem += "|&nbsp;\n";
MENUitem += text;
MENUitem += "</a>\n";
MENUitem += "</div>\n";
MENUitem += "</td>\n";
}
MENUitem += "<!-- END OF ITEM "+idItem+" -->\n\n";
MENUitem += "<!-- MAIN_MENU -->\n"; HTMLstr = HTMLstr.replace("<!-- MAIN_MENU -->\n", MENUitem);
}function addSubItem(idParent, text, hint, location)
{
var MENUitem = "";
Lookup = "<!-- ITEM "+idParent+" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
alert(idParent + " not found");
return;
}
Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->";
if (HTMLstr.indexOf(Lookup) == -1)
{
if (n)
{
MENUitem += "\n";
MENUitem += "<layer id='"+idParent+"submenu' visibility=hide bgcolor='"+this.bgColor+"'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</layer>\n";
MENUitem += "\n";
}
if (ie)
{
MENUitem += "\n";
MENUitem += "<div id='"+idParent+"submenu' style='position:absolute; visibility: hidden; width: "+this.subMenuPaneWidth+"; font: "+this.menuFont+"; top: -300;'>\n";
MENUitem += "<table border='"+this.subMenuPaneBorder+"' bgcolor='"+this.bgColor+"' width="+this.subMenuPaneWidth+">\n";
MENUitem += "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
MENUitem += "</table>\n";
MENUitem += "</div>\n";
MENUitem += "\n";
}
MENUitem += "<!-- SUB_MENU -->\n";
HTMLstr = HTMLstr.replace("<!-- SUB_MENU -->\n", MENUitem);
} Lookup = "<!-- NEXT ITEM OF SUB MENU "+ idParent +" -->\n";
if (n)  MENUitem = "<tr><td><a class=clsMenuItemNS title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
if (ie) MENUitem = "<tr><td><a class=clsMenuItemIE title='"+hint+"' href='"+location+"'>"+text+"</a><br></td></tr>\n";
MENUitem += Lookup;
HTMLstr = HTMLstr.replace(Lookup, MENUitem);}function showMenu()
{
document.writeln(HTMLstr);
}////////////////////////////////////////////////////////////////////////////
// Private declaration
function displaySubMenu(idMainMenu)
{
var menu;
var submenu;
if (n)
{
submenu = document.layers[idMainMenu+"submenu"];
if (lastMenu != null && lastMenu != submenu) hideAll();
submenu.left = document.layers[idMainMenu].pageX;
submenu.top  = document.layers[idMainMenu].pageY + 25;
submenu.visibility = fShow; leftX  = document.layers[idMainMenu+"submenu"].left;
rightX = leftX + document.layers[idMainMenu+"submenu"].clip.width;
leftY  = document.layers[idMainMenu+"submenu"].top+
document.layers[idMainMenu+"submenu"].clip.height;
rightY = leftY;
} else if (ie) {
menu = eval(idMainMenu);
submenu = eval(idMainMenu+"submenu.style");
submenu.left = calculateSumOffset(menu, 'offsetLeft');
// submenu.top  = calculateSumOffset(menu, 'offsetTop') + 30;
submenu.top  = menu.style.top+23;
submenu.visibility = fShow;
if (lastMenu != null && lastMenu != submenu) hideAll(); leftX  = document.all[idMainMenu+"submenu"].style.posLeft;
rightX = leftX + document.all[idMainMenu+"submenu"].offsetWidth; leftY  = document.all[idMainMenu+"submenu"].style.posTop+
document.all[idMainMenu+"submenu"].offsetHeight;
rightY = leftY;
}
lastMenu = submenu;
}function hideAll()
{
if (lastMenu != null) {lastMenu.visibility = fHide;lastMenu.left = 0;}
}function calculateSumOffset(idItem, offsetName)
{
var totalOffset = 0;
var item = eval('idItem');
do
{
totalOffset += eval('item.'+offsetName);
item = eval('item.offsetParent');
} while (item != null);
return totalOffset;
}function updateIt(e)
{
if (ie)
{
var x = window.event.clientX;
var y = window.event.clientY; if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
if (n)
{
var x = e.pageX;
var y = e.pageY; if (x > rightX || x < leftX) hideAll();
else if (y > rightY) hideAll();
}
}if (document.all)
{
document.body.onclick=hideAll;
document.body.onscroll=hideAll;
document.body.onmousemove=updateIt;
}
if (document.layers)
{
document.onmousedown=hideAll;
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove=updateIt;
}

Answer 1

**********************menucontext.js********************************
function showToolbar()
{
// AddItem(id, text, hint, location, alternativeLocation);
// AddSubItem(idParent, text, hint, location); 
//主菜单定义
menu = new Menu();
menu.addItem("multimedia", "多媒体", "多媒体软件", null, null);
menu.addItem("image", "图像处理", "图像处理软件", null, null);
//多媒体子菜单定义
menu.addSubItem("multimedia", "Macromedia公司", "Macromedia公司", "http://www.macromedia.com");
menu.addSubItem("multimedia", "5D多媒体", "5D多媒体", "http://www.5dmedia.com");//图像处理子菜单定义
menu.addSubItem("image", "Adobe公司", "Adobe公司", "http://www.adobe.com");
menu.addSubItem("image", "Corel公司", "Corel公司", "http://www.corel.com");
menu.addSubItem("image", "Metacreation公司", "Metacreation公司", "http://www.metacreations.com");
//结束菜单定义
menu.showMenu();
}

Answer 2

*********************123.htm************************
<HTML>
<HEAD>
<script language="JavaScript" src="images/menucontext.js"></script>
 <script language="JavaScript" src="images/menu.js"></script>
<style>
<!--
all.clsMenuItemNS{font-size =10pt; color: black; text-decoration: none;}
.clsMenuItemIE{text-decoration: none; font-size=10pt; color: black; cursor: hand;}
A:hover {color: red;}
-->
</style> 
<TITLE>top</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<table width="100%" border="0" leftmargin=0 topmargin= 0>
  <tr> 
    <td> <div align="center"> 
      <TABLE width="732" height="352">
        <TR>
  <td >
 <script language="JavaScript"> 
 showToolbar();
 </script> 

  </td>
  </tr>
  <tr>
          <TD width="724" height="346" COLSPAN=2> <div align="center"> 
              <table width="703" border="0" height="428">
               
               
                
                <tr> 
                  <td height="1" colspan="5"> &nbsp; 
                    <p>&nbsp;</p>
                    &nbsp;</td>
                </tr>
                
              </table>
            </div></TD>
        </TR>
      </table>
      <div align="center"> </div></td>
  </tr>
</table>
</BODY>
</HTML>

Answer 3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Content-Language" content="zh-cn">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document"><title>logistics</title>
 <SCRIPT language=javascript src="top.js" type=text/javascript>
</SCRIPT><style fprolloverstyle>A:hover {font-weight: bold}
</style><Style Type="text/css">
<!--
.dark {
COLOR: #000000; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; FONT-SIZE: 12px; TEXT-DECORATION: none
}
 a{text-decoration:none;}
 -->
 </Style>
 </head>
<body onload="javascript:form1.username.focus();form1.username.value='';form1.password.value='';"   leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" ";" ";" bgcolor="#F0FAFF" vlink="#000000" alink="#000000" link="#000000" background="images/WHITE.JPG"><div id="SubMenuLayer2" style="POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 1" onmouseover       ="MouseOn('SubMenuLayer2');" onmouseout="MouseOut('SubMenuLayer2');">                      
<table width="80" border="1" cellspacing="0" cellpadding="0" bordercolorlight="#006ab5" bordercolordark="#bae3ff" style="FLOAT: left; LEFT: 78px; POSITION: absolute; TOP: 20px" height="32" bgcolor="#ffffff">                        
  <tr bgcolor="#ffffff">                         
    <td height="23" align="middle" size="2" class="dark" background="images/BACK194.JPG">                                          
      <table>
<tr>  
<td width="85"  onmouseover="MouseOn('SubMenuLayer2');" onmouseout="MouseOut('SubMenuLayer2');" align="middle" bordercolor="#008000" style="BORDER-BOTTOM: #008080 1px solid; BORDER-LEFT: #008080 1px solid; BORDER-RIGHT: #008080 1px solid; BORDER-TOP: #008080 1px solid" 
          bordercolorlight="#006ab5" background="images/bg12.gif" id="t9" valign="baseline">                        
 <p align="center"><b><font face="宋体" size="2">业务受理</font></b>  </p> </td> 
 </tr>                            
      </table>              
       <A class=dark href="trans_operation_in.jsp?op&record_id" >运输业务</a>                        
    </td>                        
  </tr>                        
  <tr bgcolor="#e0f3ff">                         
    <td height="23" align="middle" size="2" class="dark" background="images/BACK194.JPG">                         
      <A class=dark href="warehousing_in.jsp?op&amp;record_id" >仓储业务</a>                       
    </td>                        
  </tr>                  
</table>                        
</div>
</body>

Answer 4

/////toop.js/////
function MM_findObj(n, d) { //v3.0
  var p,i,x;  
  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; 
    n=n.substring(0,p);
    }
  if(!(x=d[n])&&d.all) 
     x=d.all[n]; 
 for (i=0;!x&&i<d.forms.length;i++)
     x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) 
   x=MM_findObj(n,d.layers[i].document);
  return x;
}
function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) 
          if ((obj=MM_findObj(args[i]))!=null) 
              { v=args[i+2];
                 //alert(MM_findObj(obj));
                 if (obj.style) 
                    { obj=obj.style; 
                      v=(v=='show')?'visible':(v='hide')?'hidden':v; 
                    }
    obj.visibility=v; 
//tt.style.visibility = v; 
}
}
function hideElement(elmID,elmLayer)
{
for (i = 0; i < document.all.tags(elmID).length; i++)
{
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;
     objLeft   = obj.offsetLeft;
objTop    = obj.offsetTop;
objParent = obj.offsetParent;
               //alert(elmLayer.tagName.toUpperCase());
while (objParent.tagName.toUpperCase() != "BODY")
{
objLeft  += objParent.offsetLeft;
objTop   += objParent.offsetTop;
objParent = objParent.offsetParent;
}
      x=elmLayer.style.pixelLeft;
    y= elmLayer.style.pixelTop;
if (x > (objLeft + obj.offsetWidth) || objLeft > (x + elmLayer.style.pixelWidth))
                     { 
                        //if (elmID=="SELECT")
                       elmLayer.style.visibility = "hidden";
                              
                          }
else if (objTop > (y+elmLayer.style.pixelHeight)||y>(objTop+obj.offsetHeight))
                     elmLayer.style.visibility = "hidden";
else {
obj.style.visibility = "hidden";
//obj.style.display = "none";
//warehouse_id.style.visibility = "hidden"; 
//tt.style.visibility = "hidden";
 }
}

}
function showElement(elmID)
{
for (i = 0; i < document.all.tags(elmID).length; i++)
{
obj = document.all.tags(elmID)[i];
if (! obj || ! obj.offsetParent)
continue;
obj.style.visibility = "";
//tt.style.visibility = "";  
}
}
function MouseOn(elmID)                        
{                        
obj=MM_findObj(elmID);                        
hideElement('SELECT',obj);                  
hideElement("OBJECT",obj);                        
hideElement("IFRAME",obj);                      
MM_showHideLayers(elmID,'','show')
//warehouse_id.style.visibility = "hidden";  
//tt.style.visibility = "hidden";                        
}                        
function MouseOut(elmID)                        
{                        
MM_showHideLayers(elmID,'','hidden'); 
    
showElement('SELECT');                     
showElement("OBJECT");                        
showElement("IFRAME"); 
//warehouse_id.style.visibility = "visible"; 
//tt.style.visibility = "visible";                   
}    

Answer 5

你按我这个配置一下就知道了问题出在那里我估计是layer定义那里期待大家的解决！！！！

Answer 6

我在menu.js 修改函数function displaySubMenu(idMainMenu） 中的
submenu.left = calculateSumOffset(menu, 'offsetLeft') - 130; //-130
使子菜单能跟上主菜单了但是还是当鼠标移上主菜单后，主菜单的字就消失了，而且子菜单也不隐藏这是啥问题啊，小弟对层的概念真是不了解高手能不能给解决一下啊！！！！