You are in: home > javascript > drop down menu tutorial >

There is a newer drop-down menu tutorial at:
http://www.aspandjavascript.co.uk/javascript/drop_down_menu_tutorial_version_2/

click here to go to the new drop down menu tutorial

Unfortunately, support can no longer be offered for this tutorial

Cross Browser Drop-down Menus

5. Hiding the menus

Test the following in Netscape 4.x:

Menu1

Test Menu One

Menu2

Test Menu Two

Menu3

Test Menu Three

The revised code is below:

numMenus = 3;
document.onmouseover = hideAllMenusTest;

//-->
</script>
<table>
	<tr>
		<td>
			<div id="myLabel1"><img src="images/shim.gif" width="5" height="10" border="0" name="myImg1"><a href="#" onMouseover="menuOverTest(); return !showMenuTest('1', event, 'myLabel1');" class="History" onMouseOut="menuOutTest();"><b>Menu1</b> <img src="images/close_menu.gif" border="0"><img src="images/open_menu.gif" border="0"></a></div>
			<div id="myMenu1" style="width: 150px; height: 52px; position:absolute; z-index:20; visibility:hidden" onmouseover="event.cancelBubble = true;">
			<table border="1" cellspacing="0" cellpadding="0" width="200">
				<tr>
					<td bgcolor="#8b0000" width="100%" height="15">
						<img src="images/shim.gif" width="5" height="2" border="0"><a href="#" class="MenuItem" onMouseOut="menuOutTest();" onMouseOver="menuOverTest();">Test Menu One</a>
					</td>
				</tr>
			</table>
			</div>
		</td>
		<td>
			<div id="myLabel2"><img src="images/shim.gif" width="5" height="10" border="0" name="myImg2"><a href="#" onMouseover="menuOverTest(); return !showMenuTest('2', event, 'myLabel2');"  class="History" onMouseOut="menuOutTest();"><b>Menu2</b> <img src="images/close_menu.gif" border="0"><img src="images/open_menu.gif" border="0"></a></div>
			<div id="myMenu2" style="width: 150px; height: 52px; position:absolute; z-index:20; visibility:hidden" onmouseover="event.cancelBubble = true;">
			<table border="1" cellspacing="0" cellpadding="0" width="200">
				<tr>
					<td bgcolor="#8b0000" width="100%" height="15">
						<img src="images/shim.gif" width="5" height="2" border="0"><a href="#" class="MenuItem" onMouseOut="menuOutTest();" onMouseOver="menuOverTest();">Test Menu Two</a>
					</td>
				</tr>
			</table>
			</div>
		</td>
		<td>
			<div id="myLabel3"><img src="images/shim.gif" width="5" height="10" border="0" name="myImg3"><a href="#" onMouseover="menuOverTest(); return !showMenuTest('3', event, 'myLabel3');" class="History" onMouseOut="menuOutTest();"><b>Menu3</b> <img src="images/close_menu.gif" border="0"><img src="images/open_menu.gif" border="0"></a></div>
			<div id="myMenu3" style="width: 150px; height: 52px; position:absolute; z-index:20; visibility:hidden" onmouseover="event.cancelBubble = true;">
			<table border="1" cellspacing="0" cellpadding="0" width="200">
				<tr>
					<td bgcolor="#8b0000" width="100%" height="15">
						<img src="images/shim.gif" width="5" height="2" border="0"><a href="#" class="MenuItem" onMouseOut="menuOutTest();" onMouseOver="menuOverTest();">Test Menu Three</a>
					</td>
				</tr>
			</table>
			</div>
		</td>
	</tr>
</table>

We've added 2 more functions - menuOverTest and menuOutTest. menuOutTest is called every time the mouse leaves an element of the menus. It sets up a timer that closes all the menus after a small delay. menuOverTest is called when the mouse enters a menu element. This simply cancels the timer so the menus stay visible.

This extra code is only necessary for Netscape 4.x. All the other browsers I've tested the code on will respond to the document.onMouseover event.

<< Part IV: Multiple Menus

Part VI: Moving On >>


© James Austin 2002-05	Web site design by James Austin