				DHTML Pop Up Menus
				Version 1.1

				Script by Will Martin
				selanit@atuan.com
				13 April 2002

CHANGELOG:

Version 1.1:
	-- Added workaround for Mozilla/NS 6.x browsers.
	-- Updated documentation to explain workaround.

Version 1.0
	-- Initial release.


	This archive should contain these files:

		popup-menus-readme.txt
		popup-menus.js
		popup-menus.css
		popup-demo.html


				Introduction:

This script is intended to be used to provide pop up menus for web pages. 

Example: Sue mouses over a link.  In response, a menu of three choices appears to the 
right of the link.  She selects one and is on her way to another page.

Example 2: Rachel mouses over the same link, and get the same menu of three choices.
However, she decides not to click any of them, and continue studying the page she is 
currently at.  Half a second after she moves her mouse away from the menu, it vanishes.

To see the script in action for yourself, please open popup-menus.html, which 
is a demonstration file.


				Installation:

1) Copy popup-menus.js and popup-menus.css to a convenient directory, either the same 
one you keep your HTML files in, or in a sub-directory specifically for scripts.  Or 
whatever.  

2) In the file you inted to use the script in, add these lines to your <head>:

	<link rel="stylesheet" type="text/css" href="context-menus.css">
	<script type="text/javascript" language="javascript1.2" src="context-menus.js">
	</script>

These lines link to the stylesheet and the JavaScript code for the menus.  You can edit 
the stylesheet to give your menus a distincive look.  In fact, you need to edit the 
stylesheet because it controls the positions of the menus.  You could, of course, 
specify their positions with inline styles, but its easier to maintain a single CSS file 
than change every single page you use the script in every time you make a change.  The 
CSS file is commented.

You probably won't need to look at the JavaScript -- I wrote it so that the script does 
not need to be modified to work on any page.  If you WANT to look at it, feel free; 
you'll find that I have put in extensive comments about each function.  Also, keep in 
mind that if you have put the CSS and JS files in a different directory, you need to 
specify the proper path, or it won't work right.

3) Still in your <head>, add this short script:

	<script type="text/javascript" language="javascript1.2">
	<!-- Hide script from older browsers

	MenuList = new Array();
	MenuList[0] = "Banana";
	MenuList[1] = "Apple";
	MenuList[2] = "Orange";

	// Stop hiding script-->
	</script>

Remember that the array subscript needs to start at 0.  Also, the array name "MenuList" is 
case-sensitive; you must capitalize the M and the L, or else you'll get annoying error 
messages. Your menu names can be anything, and you can have as many as you like.

I have done it this way so that you'll be able to have different menus on different pages 
without altering the main script; this makes it much easier to maintain a site, since you 
don't need to have multiple copies of the menu script to make everything run.

4) Create the menus that will pop up when you user clicks a link, like this:

	<div class="SubMenu" ID="Banana">
	<script> if(NS4){document.writeln(LayerOpen);} </script>
	<table bgcolor="#666999" onMouseOver="Extender();" onMouseOut="HideDelay();">
	<tr>
	    <td><a href="http://www.atuan.com/code/" class="MenuItem">Your Item 1</a></td>
	</tr>
	<tr>
	    <td><a href="http://www.atuan.com/code/" class="MenuItem">Your Item 2</a></td>
	</tr>
	</table>
	<script> if(NS4){document.writeln(LayerClose);} </script>
	</div>

The <div> encapsulates the Menu and gives it its position; the ID in the <div> tag should 
be one of the menu names you chose in the MenuList[] array in the script at the top.  

The <script> tags insert a <layer> tag with the same onMouseOver and onMouseOut events 
as you see in the <table> tag.  The <layer> tag is needed for mouse over/out recognition 
in Netscape 4.x.  However, it causes serious problems in Netscape 6.x and Mozilla if you 
leave the <layer> tag in place.  So, putting these little scripts in place will write 
in the appropriate <layer> tags for Netscape 4.x and no others browsers.

You'll need one <div> for each menu that you put in the list at the top of the 
HTML file.  Note the onMouseOver and onMouseOut events in the <table> tag. 
Those govern how long the menu stays there; they must be there.  As discussed above, these 
events are duplicated by the <script> tags that insert <layer> tags for NS 4.x compatability.  
Internet Explorer 4.x (and up) and Mozilla/NS6 recognize the events in the table tag, so 
it works out.

The menu must consist of a <table> encapsulated in a <layer> and a <div>.  The table can 
be any form you want.  Basically, don't change the <layer> tag.  Do change the ID and the 
class on the <div> tag, but leave the onMouseOver and onMouseOut events in the 
<table> tag intact.  Other than that, you can do as you please.  Put images in the table, 
add links, bulleted lists -- go wild.

5)  Now that everything else is done, you need to construct the links that will activate 
the context menus you've made.  They should look like this:

<a href="http://www.whatever.com/" onMouseOver="Hide(); PopUp('Banana', 1);" onMouseOut="HideDelay();">Parent Link #2</a>

Hide() hides all currently visible menus; then PopUp() reveals the appropriate menu.  When you 
mouse out, HideDelay() is called, and will make the menu vanish again unless you mouse over 
it.  If you don't want to have an actual link for the parent link, you can set the 
href="javascript:null(void);" which does nothing if somebody clicks on it.

And that should do it.  If you've followed instructions carefully, you should be able to 
open your file in a browser and see it work.


				Compatibility:

To my knowledge, this script works well in:
	-- Netscape 4.01 - 6.x (all platforms);
	-- Mozilla 0.9.x and up (all platforms);
	-- Gecko-based browsers (eg Galeon);
	-- Internet Explorer 4.01 - 6 (Windows only);

Currently it does NOT work in Konqueror (Linux, KDE 2.2.2).  Konqueror may work after 
KDE 3 is released, as I hear its JavaScript support has improved tremendously.  I don't 
know if it works in Opera or not.

Anyway, it should work well for approximately 99% of the visitors to your site.  There's 
little to be done about people who use version 3 or lower of IE or NS, other than to 
encourage them to upgrade.  


Hope you enjoy the script.  Please send comments and bug reports to public@atuan.com.  No 
spam, please.  It's always nice to get adoring fan letters, hint hint.

Will Martin

PS -- I also have a context-menu script which pops up the menu at the current mouse position 
when the user clicks.  Visit me at:

http://www.atuan.com/code/