I'm using the code below to display a menu that opens when the mouse
goes over the main menu item (try it in your browser to understand the
behaviour).
It uses "position:absol ute" and a switch between "display='none' " and
"display='' ".
However the problem is that
- in Internet Explorer 6 the dropdown (<select>...) always hides the
menu
- in Mozilla the menu is hidden initially but after clicking on the
text "Select" it isn't hidden.
How does that come and how can I overcome it?
I want the menu to be above the other stuff when it comes up.
Regards,
Joachim
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head>
<title>Menu Example</title>
</head>
<body>
<form method="get" action="target. jsp" name="myForm">
<TABLE id="acGeneralMa inMenuItem" border="1" rules="none"
cellspacing="0" bordercolor="bl ue">
<TR class="tableMen uRow">
<TD NOWRAP ONMOUSEOVER="sh owSubmenu('acGe neralSubmenu',t his,'acGeneralM ainMenuItem');"
ONMOUSEOUT="hid eSubmenu('acGen eralSubmenu');" >
Genera l menu <br>
<TABLE id="acGeneralSu bmenu"
border="1" rules="none" cellspacing="0" bordercolor="bl ue"
style="display: none; position:absolu te;">
<TR class="tableMen uRow">
<TD NOWRAP id="generalMenu Item0" onclick=
"document.getEl ementsByTagName ('form')[0].actionSelected .value='f158';d ocument.getElem entsByTagName(' form')[0].submit()"
ONMOUSEOVER="hi ghlightMenuItem ('generalMenuIt em0');"
ONMOUSEOUT="low lightMenuItem(' generalMenuItem 0');">
Genera l item 1
</TD>
</TR>
<TR class="tableMen uRow">
<TD NOWRAP id="generalMenu Item1"
onclick="docume nt.getElementsB yTagName('form' )[0].actionSelected .value='f159';d ocument.getElem entsByTagName(' form')[0].submit()"
ONMOUSEOVER="hi ghlightMenuItem ('generalMenuIt em1');"
ONMOUSEOUT="low lightMenuItem(' generalMenuItem 1');">
Genera l item 2
</TD>
</TR>
<TR class="tableMen uRow">
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<p>
<input type="hidden" name="actionSel ected" value="">
Select
<SELECT name="f145">
<OPTION value="*" selected>*</OPTION>
<OPTION value="option1" >option1</OPTION>
<OPTION value="option2" >option2</OPTION>
<OPTION value="option3" >option3</OPTION>
<OPTION value="option4" >option4</OPTION>
<OPTION value="option5" >option5</OPTION>
<OPTION value="option6" >option6</OPTION>
<OPTION value="option7" >option7</OPTION>
<OPTION value="option8" >option8</OPTION>
<OPTION value="option9" >option9</OPTION>
</SELECT>
</form>
<script type="text/javascript">
<!--
// Define a global variable to hold the id of the submenu showed the
last time
var lastSubmenuShow n='';
// Define a function to show the submenu at an absolute position
relative to
// the main menu item's position within the parent element.
// The structure of the main menu item and the submenu is:
// <TABLE id="acGeneralMa inMenuItem" ...>
// <TR ...>
// <TD NOWRAP ONMOUSEOVER="sh owSubmenu('acGe neralSubmenu',t his,'acGeneralM ainMenuItem');"
// ONMOUSEOUT="hid eSubMenu('acGen eralSubmenu')">
// General Actions<br>
// <TABLE id="acGeneralSu bmenu" style="display: none;
position:absolu te;"
// <TR ...>
// <TD NOWRAP id="..."
// ONCLICK="script to execute action associated with
submenu item"
// ...
// >Action1</TD>
// ...
//
// Parameters:
// submenuId: the id of the submenu to be shown
// parent: the parent of the main menu item
// mainMenuItemId: the id of the main menu item
function showSubmenu(sub menuId,parent,m ainMenuItemId)
{ // Hide last submenu
if (lastSubmenuSho wn!='') hideSubmenu(las tSubmenuShown);
// Initialize yOffset with the height of the main menu item minus 2
var yOffset=documen t.getElementByI d(mainMenuItemI d).offsetHeight-2;
var x = 0;
var y = yOffset;
do {
x += parent.offsetLe ft;
y += parent.offsetTo p;
} while ( parent = parent.offsetPa rent );
var e = document.getEle mentById( submenuId );
e.style.left = x + 'px';
e.style.top = y + 'px';
e.style.display = '';
var xMax = document.body.s crollLeft + document.body.c lientWidth;
if ( x + e.clientWidth > xMax ) {
e.style.left = ( xMax > e.clientWidth ?
( xMax - e.clientWidth ) : 0 ) + 'px';
}
if ( y + e.clientHeight > document.body.s crollTop +
document.body.c lientHeight ) {
y -= e.clientHeight + ( yOffset ? yOffset : 0 );
e.style.top = ( y > e.clientHeight ? y : 0 ) + 'px';
}
lastSubmenuShow n=submenuId;
return false;
}
// Define a function to hide the submenu
// Parameters:
// submenuId: the id of the submenu to be hidden
function hideSubmenu(sub menuId)
{ document.getEle mentById(submen uId).style.disp lay = 'none';
return false;
}
// Define a variable to hold the id of the last menu item highlighted
var lastHighlighted Menu='';
// Define a function to highlight a menu item
function highlightMenuIt em(menuItemId)
{ if (lastHighlighte dMenu!='') lowlightMenuIte m(lastHighlight edMenu);
document.getEle mentById(menuIt emId).setAttrib ute('bgcolor',' #aaaaff','false ');
lastHighlighted Menu=menuItemId ;
}
// Define a function to lowlight a menu item
function lowlightMenuIte m(menuItemId)
{ document.getEle mentById(menuIt emId).setAttrib ute('bgcolor',' white','false')
}
//-->
</script>
</body>
</HTML>
