300分求IE5中能遮盖住Object和Select对象的js菜单！！

Question

http://www.51js.com/viewthread.php?tid=5852&highlight=%B2%CB%B5%A5

Answer 1

fason(Forbes Pu)，第二个地址里用的是iframe，第一个地址里有两个菜单类，xmenu我还没看完，但是dhtml用的是popup，也要ie5.5

Answer 2

iframe的确在ie4里就支持了，但是里面有些属性是ie5.5以上才支持。。
<iframe src='' style=\"position:absolute; visibility:inherit; top:0px; left:0px; width:89px; height: "+(i-0.4)*25+"px ; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';\"></iframe>比如上面的filter属性是在ie5.5里加上去的。。但我去掉filter这一段，我的菜单还是无法显示。。msdn帮助上的iframe也是ie5.5才支持。。能否告诉我是不是position或visibility,z-index等属性哪个是ie5能支持，哪些是不支持的？

Answer 3

盖不住就不能隐藏起来吗？这是我自己写的菜单：
Menu = function(title){
    this.count=0;
    this.title=title;
    this.items=new Array();
    this.timeout=null;
}
Menu.timeout=null;
Menu._M=null;
Menu.is_ie = ( (navigator.userAgent.toLowerCase().indexOf("msie") != -1) &&
   (navigator.userAgent.toLowerCase().indexOf("opera") == -1) );
           
Menu.getAbsolutePos = function(el) {
var r = { x: el.offsetLeft, y: el.offsetTop };
if (el.offsetParent) {
var tmp = Menu.getAbsolutePos(el.offsetParent);
r.x += tmp.x;
r.y += tmp.y;
}
return r;
};Menu.getElement = function(ev) {
if (Menu.is_ie) {
return window.event.srcElement;
} else {
return ev.currentTarget;
}
};Menu.getTargetElement = function(ev) {
if (Menu.is_ie) {
return window.event.srcElement;
} else {
return ev.target;
}
};Menu.stopEvent = function(ev) {
if (Menu.is_ie) {
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
ev.preventDefault();
ev.stopPropagation();
}
};Menu.addEvent = function(el, evname, func) {
if (Menu.is_ie) {
el.attachEvent("on" + evname, func);
} else {
el.addEventListener(evname, func, true);
}
};Menu.removeEvent = function(el, evname, func) {
if (Menu.is_ie) {
el.detachEvent("on" + evname, func);
} else {
el.removeEventListener(evname, func, true);
}
};
Menu._onTableMouseOver = function(ev){
    if(Menu.timeout)clearTimeout(Menu.timeout);
}
Menu.hide = function(){
    if(Menu._M)Menu._M.hide();
}
Menu.prototype.create = function (_par) {
var parent = null;
if (! _par) {
parent = document.getElementsByTagName("body")[0];
} else {
parent = _par;
} var table = document.createElement("table");
this.table = table;
table.cellSpacing = 1;
table.cellPadding = 0;
    
var div = document.createElement("div");
this.element = div;
div.className = "popup-menu";
    div.style.position = "absolute";
    div.style.display = "none";
div.appendChild(table);
div.menu = this;
Menu.addEvent(div, "mouseover", Menu._onTableMouseOver); var cell = null;
var row = null;
    if(this.title){
     var thead = document.createElement("thead");
    table.appendChild(thead);
     row = document.createElement("tr");
    thead.appendChild(row);
     row.className = "headrow";
    cell = document.createElement("td");
     row.appendChild(cell);
    cell.appendChild(document.createTextNode(this.title));
    }
    
var tbody = document.createElement("tbody");
table.appendChild(tbody);
    var hyperlink=null;
    for(var i=0;i<this.count;i++){
     row = document.createElement("tr");
     row.className = "menurow";
tbody.appendChild(row);
cell = document.createElement("td");
        cell.item=this.items[i];
row.appendChild(cell);
        hyperlink=document.createElement("a");
        hyperlink.className="link";
        hyperlink.appendChild(document.createTextNode(cell.item.text));
        hyperlink.href=cell.item.href;
        if(cell.item.title)hyperlink.title=cell.item.title;
        if(cell.item.target)hyperlink.target=cell.item.target;
cell.appendChild(hyperlink);
    }
parent.appendChild(this.element);
}Menu.prototype.destroy = function () {
var el = this.element.parentNode;
el.removeChild(this.element);
delete el;
};
Menu.prototype.add = function(text,href,target,title){
    this.items[this.count++]=new MenuItem(text,href,target,title);
}
Menu.prototype.show = function () {
    if(Menu._M)Menu._M.hide;
this.element.style.display = "block";
this.hideShowCovered();
    Menu._M=this;
};Menu.prototype.hide = function () {
this.element.style.display = "none";
};Menu.prototype.showAt = function (x, y) {
var s = this.element.style;
s.left = x + "px";
s.top = y + "px";
this.show();
};Menu.prototype.showAtElement = function (el) {
var p = Menu.getAbsolutePos(el);
this.showAt(p.x + el.offsetWidth, p.y+5);
};
Menu.prototype.hideShowCovered = function () {
var tags = new Array ('applet', 'iframe', 'select');
var el = this.element; var p = Menu.getAbsolutePos(el);
var EX1 = p.x;
var EX2 = el.offsetWidth + EX1;
var EY1 = p.y;
var EY2 = el.offsetHeight + EY1; for (var k = 0; k < tags.length; k++) {
var ar = document.getElementsByTagName(tags[k]);
var cc = null; for (var i = 0; i < ar.length; i++) {
cc = ar[i]; p = Menu.getAbsolutePos(cc);
var CX1 = p.x;
var CX2 = cc.offsetWidth + CX1;
var CY1 = p.y;
var CY2 = cc.offsetHeight + CY1; if ((CX1 > EX2) || (CX2 < EX1) || (CY1 > EY2) || (CY2 < EY1)) {
cc.style.visibility = "visible";
} else {
cc.style.visibility = "hidden";
}
}
}
};MenuItem = function(text,href,target,title){
    this.text=text;
    this.href=href;
    this.target=target;
    this.title=title;
}
MenuItem.prototype.element = function(){
    var hyperlink=document.createElement("a");
    hyperlink.className="link";
    hyperlink.appendChild(document.createTextNode(this.text));
    hyperlink.href=this.href;
    if(this.title)hyperlink.title=this.title;
    if(this.target)hyperlink.target=this.target;
    return hyperlink;
}

Answer 4

菜单示例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript" src="js/popup-menu.js"></script>
<script language="JavaScript">
function checkMenu(ev) {
  var el = Menu.is_ie ? Menu.getElement(ev) : Menu.getTargetElement(ev);
  for (; el != null; el = el.parentNode)
    // FIXME: allow end-user to click some link without closing the
    // calendar.  Good to see real-time stylesheet change :)
    if (el.tagName=='DIV'||el.tagName=='A') break;
  if (el == null) {
    // calls closeHandler which should hide the calendar.
    hideMenu();
    Menu.stopEvent(ev);
  }
}
function showMenu(ev){
    var el = Menu.getElement(ev);
    if(Menu.timeout)clearTimeout(Menu.timeout);
    //var el=document.getElementById(id);
  if (el.menu != null) {
    el.menu.hide();
  }
  el.menu.showAtElement(el);        // show the calendar below it
  // catch "mousedown" on document
  Menu.addEvent(document, "mouseover", checkMenu);
  //return false;
}
function hideMenu(ev){
    var el = Menu.getElement(ev);
    if(Menu.timeout)clearTimeout(Menu.timeout);
   // if (el==null || el.menu == null || el.menu!=Menu._M) {
        Menu.timeout=setTimeout("Menu.hide()",250);
    //}
}
function showMenuAt(m,id){
  var el=document.getElementById(id);
  el.menu=m;
  Menu.addEvent(el,"mouseover",showMenu);
  Menu.addEvent(el,"mouseout",hideMenu);
}
</script>
<style type="text/css">
div.popup-menu { position: relative; }
.popup-menu, .popup-menu table {
  font-size: 14px;
  color: #000;
  cursor: default;
  background-color: #759704;
}
.popup-menu thead .headrow { /* This holds the current "month, year" */
  font-weight: bold;      /* Pressing it will take you to the current date */
  text-align: center;
  padding: 2px;
  background: #89DA81;
  color: #232364;
}.popup-menu thead .hilite { /* How do the buttons in header appear when hover */
  background: #afa;
  color: #000;
  border: 1px solid #084;
  padding: 1px;
}.popup-menu tbody .menurow { /* Cells <TD> containing month days dates */
  color: #564;
  background:#E1E8C8;
}
A, A:ACTIVE, A:HOVER, A:LINK, A:VISITED {
    TEXT-DECORATION: none;
}
A {
    COLOR: #003399;
}
A:visited {
    COLOR: #003399;
}
A:hover {
    COLOR: #cc6600;
    TEXT-DECORATION: underline;
}
A:active {
    COLOR: #dd0000;
}
.popup-menu tbody .hilite { /* Hovered cells <TD> */
  background: #efd;
  padding: 1px 3px 1px 1px;
  border: 1px solid #bbb;
}.popup-menu tbody .active { /* Active (pressed) cells <TD> */
  background: #dec;
  padding: 2px 2px 0px 2px;
}.popup-menu tbody .selected { /* Cell showing today date */
  font-weight: bold;
  border: 1px solid #000;
  padding: 1px 3px 1px 1px;
  background: #f8fff8;
  color: #000;
}.popup-menu tbody .weekend { /* Cells showing weekend days */
  color: #a66;
}.popup-menu tbody .today { font-weight: bold; color: #0a0; }.calendar tbody .disabled { color: #999; }.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
  visibility: hidden;
}.popup-menu tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
  display: none;
}/* The footer part -- status bar and "Close" button */.popup-menu tfoot .footrow { /* The <TR> in footer (only one right now) */
  text-align: center;
  background: #565;
  color: #fff;
}.popup-menu tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  padding: 2px;
  background: #250;
  color: #efa;
}.popup-menu tfoot .hilite { /* Hover style for buttons in footer */
  background: #afa;
  border: 1px solid #084;
  color: #000;
  padding: 1px;
}.popup-menu tfoot .active { /* Active (pressed) style for buttons in footer */
  background: #7c7;
  padding: 2px 0px 0px 2px;
}/* Combo boxes (popup-menus that display months/years for direct selection) */</style>
<body>
<script language="JavaScript">
    var menu=new Menu();
    menu.add("text1","href2");
    menu.add("text2","href3","_blank","Only");
    menu.add("text3","href4");
    menu.add("text4","href5");
    menu.add("text5","href6");
    menu.create();
    var menu2=new Menu("Only Test2");
    menu2.add("text21","href22");
    menu2.add("text22","href32");
    menu2.add("text23","href42");
    menu2.add("text24","href52");
    menu2.add("text25","href62");
    menu2.create();</script>
<a href="#" id="a">show1</a><br>
defhuiaewhfuowoefhefheofhoew<a href="#" id="b">show12</a><br>
<script language="JavaScript">
    showMenuAt(menu,'a');
    showMenuAt(menu2,'b');
    
</script>
</body>
</html>

Answer 5

As of Microsoft&reg; Internet Explorer 5.5, the iframe object is windowless and supports the zIndex property. In earlier versions of Internet Explorer, the iframe object is windowed and, like all windowed controls, ignores the zIndex property. If you maintain Web pages that were designed for earlier versions of Internet Explorer that do not support the zIndex property, you might want to redesign the pages, especially if the pages contain iframe objects that are stacked on top of windowed controls, such as select objects. You can use the visibility attribute to hide windowed controls that you want an iframe object to overlap. You can also position windowed controls so that iframe objects do not overlap them.
z-index需要ie5.5支持，晕，没这个属性也无法完整显示菜单，圆满了我..

Answer 6

菜单层显示时，隐藏显示域下的select控件

Answer 7

可是我要隐藏的是长400px+，宽500px+的activex控件啊。。