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

3. Stay where you're put!

In the previous section we got a DIV (or layer) to pop up when the mouse was put over a link. We now need to make sure it appears where we want it to.

Put mouse here

Test Menu

Test this page in Netscape 4.x. You;ll see the pop-up appears right under the link now.

What's changed to make this happen? In the DIV called "myLabel1" (the link that makes the pop-up appear) there's another transparent GIF file called "img". We can use this in Netscape 4.x to tell where the link is on the page (its page co-ordinates) and make the popup appear just under it.

The revised code is below (the functions "getImagePageLeft" and "getImagePageTop" are in the .js file for the menus):

//-->
</script>

<table>
	<tr>
		<td>
			<div id="myLabel"><img src="images/shim.gif" width="5" height="10" border="0" name="img"><a href="#" onMouseover="return !showMenuTest(event);"  onMouseOut = "return !hideMenuTest(event);" class="History"><b>Put mouse here</b> <img src="images/close_menu.gif" border="0"><img src="images/open_menu.gif" border="0"></a></div>
			<div id="myMenu" 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">Test Menu</a>
					</td>
				</tr>
			</table>
			</div>
		</td>
	</tr>
</table>

In the next section we'll look at stringing three of these together to make a proper menu system.

<< Part II: Getting Started

Part IV: Multiple Menus >>


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