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:absolute" 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="acGeneralMainMenuItem" border="1" rules="none"
cellspacing="0" bordercolor="blue">
<TR class="tableMenuRow">
<TD NOWRAP ONMOUSEOVER="showSubmenu('acGeneralSubmenu',this,' acGeneralMainMenuItem');"
ONMOUSEOUT="hideSubmenu('acGeneralSubmenu');">
General menu <br>
<TABLE id="acGeneralSubmenu"
border="1" rules="none" cellspacing="0" bordercolor="blue"
style="display:none; position:absolute;">
<TR class="tableMenuRow">
<TD NOWRAP id="generalMenuItem0" onclick=
"document.getElementsByTagName('form')[0].actionSelected.value='f158';document.getElementsB yTagName('form')[0].submit()"
ONMOUSEOVER="highlightMenuItem('generalMenuItem0') ;"
ONMOUSEOUT="lowlightMenuItem('generalMenuItem0');" >
General item 1
</TD>
</TR>
<TR class="tableMenuRow">
<TD NOWRAP id="generalMenuItem1"
onclick="document.getElementsByTagName('form')[0].actionSelected.value='f159';document.getElementsB yTagName('form')[0].submit()"
ONMOUSEOVER="highlightMenuItem('generalMenuItem1') ;"
ONMOUSEOUT="lowlightMenuItem('generalMenuItem1');" >
General item 2
</TD>
</TR>
<TR class="tableMenuRow">
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<p>
<input type="hidden" name="actionSelected" 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 lastSubmenuShown='';
// 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="acGeneralMainMenuItem" ...>
// <TR ...>
// <TD NOWRAP ONMOUSEOVER="showSubmenu('acGeneralSubmenu',this,' acGeneralMainMenuItem');"
// ONMOUSEOUT="hideSubMenu('acGeneralSubmenu')">
// General Actions<br>
// <TABLE id="acGeneralSubmenu" style="display:none;
position:absolute;"
// <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(submenuId,parent,mainMenuItemId)
{ // Hide last submenu
if (lastSubmenuShown!='') hideSubmenu(lastSubmenuShown);
// Initialize yOffset with the height of the main menu item minus 2
var yOffset=document.getElementById(mainMenuItemId).of fsetHeight-2;
var x = 0;
var y = yOffset;
do {
x += parent.offsetLeft;
y += parent.offsetTop;
} while ( parent = parent.offsetParent );
var e = document.getElementById( submenuId );
e.style.left = x + 'px';
e.style.top = y + 'px';
e.style.display = '';
var xMax = document.body.scrollLeft + document.body.clientWidth;
if ( x + e.clientWidth > xMax ) {
e.style.left = ( xMax > e.clientWidth ?
( xMax - e.clientWidth ) : 0 ) + 'px';
}
if ( y + e.clientHeight > document.body.scrollTop +
document.body.clientHeight ) {
y -= e.clientHeight + ( yOffset ? yOffset : 0 );
e.style.top = ( y > e.clientHeight ? y : 0 ) + 'px';
}
lastSubmenuShown=submenuId;
return false;
}
// Define a function to hide the submenu
// Parameters:
// submenuId: the id of the submenu to be hidden
function hideSubmenu(submenuId)
{ document.getElementById(submenuId).style.display = 'none';
return false;
}
// Define a variable to hold the id of the last menu item highlighted
var lastHighlightedMenu='';
// Define a function to highlight a menu item
function highlightMenuItem(menuItemId)
{ if (lastHighlightedMenu!='') lowlightMenuItem(lastHighlightedMenu);
document.getElementById(menuItemId).setAttribute(' bgcolor','#aaaaff','false');
lastHighlightedMenu=menuItemId;
}
// Define a function to lowlight a menu item
function lowlightMenuItem(menuItemId)
{ document.getElementById(menuItemId).setAttribute(' bgcolor','white','false')
}
//-->
</script>
</body>
</HTML>
