Float Menu (Static Menu)

Brought to you by...
JavaScript Gadgets'n'Gizmos

Ok, here are the complete, step by step instructions for installing this script.
First I am going to show the complete HTML for the previous page and explain
each section. I am hoping you know something of the structure of an HTML
document and some small knowledge of HTML. (NOTE: This page may not layout
correctly in all browsers as I am trying to show a full HTML page in text format)

Use the menu at the left to navigate to the various sections.

Here is (basically) the HTML for the previous page.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Float Menu (Static Menu)</title> 
<!--- *** BEGIN CUT - Demo starts here *** --->
<!--- *** Another xLayer demo from www.Roy.Whittle.com *** --->
<SCRIPT LANGUAGE="JavaScript" SRC="javascript/xLayer.js"></SCRIPT> 
<SCRIPT LANGUAGE="JavaScript" SRC="javascript/xBrowser.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" SRC="javascript/staticMenu.js"></SCRIPT> 
<SCRIPT LANGUAGE="JavaScript"> 
function start() 
{ 
	CreateStaticMenu("MenuDiv",  10, 10);
} 
</SCRIPT>
<!--- *** END CUT - Demo ends here *** --->
</head>
 
<BODY bgcolor="black" TEXT="white" LINK="yellow" VLINK="yellow" ALINK="red" onLoad="start()"> 
<CENTER> 
<FONT FACE="Arial" SIZE="5"> 
Brought to you by... </FONT> <br> 
<FONT FACE="Arial"> <A HREF="http://www.Roy.Whittle.com" TARGET="_blank">JavaScript Gadgets'n'Gizmos</A> </FONT> 
</CENTER> 
<TABLE> 
<TR> 
  <!-- *** Set this width to the gap you want on the left of your page *** -->
  <TD><IMG SRC="images/spacer.gif" WIDTH="130"></TD>
  <!-- *** Put content here that would normally be in the BODY of you document *** --> 
	<TD> <FONT FACE="Arial"> 
        In order for the menu to work effectively you need to leave a border at 
        the left of your page. This is no problem. Simply create a table with 
        2 columns, Make the left column wide enough to allow the menu to scroll 
        without obscuring content then just put the content of your page in the 
        right column of the table. I have made this page simple so you can view 
        the source to understand what is going on. Also, here are the complete 
        <A HREF="instructions.html">instructions</A> on how to install this script. 
        <P> To see how this script works, scroll down the page. </P> </FONT> 
	</TD> 
</TR> 
</TABLE> 
<!-- *** START - Here is the menu, make it as fancy as you like *** ---> 
<DIV id="MenuDiv" STYLE="position:absolute;left:10;top:10;width:100;"> 

<TABLE BORDER="2" WIDTH="100" BGCOLOR="#336699"> 
<TR>
	<TD align="center">
		<FONT FACE="Arial" SIZE=5>MENU</FONT>
	</TD>
</TR> 
<TR> 
	<TD align="center"> 
		<A HREF="#">Home</A><br> 
		<A HREF="#">Email</A><br> 
		<A HREF="#">Gadgets</A><br> 
      <A HREF="#">Gizmos</A><br> 
		<A HREF="#">Links</A><br> 
	</TD> 
</TR> 
</TABLE> 
        
</DIV> 
<!-- *** END - the menu, make is as fancy as you like *** ---> 
</body> 
</html>

The first step is to DOWNLOAD staticmenu.zip and extract all the contents into a test directory.
The next step is to understand the various files.

xLayer.js
xBrowser.js
staticMenu.js

These are text files that contain the code to move the layer that contains the menu.
You link them into your document in the following way.

The "SRC=" points to where the javascript files are. In this case all the files are in the
folder called "javascript". You can place these files anywhere you want as long
as the "SRC=" points to where you have stored the files.

This next part is required to tell the script where the menu "DIV" is and where to
make it "stay". In this case the menu layer id called MenuDiv and the menu is to
10 pixels from the left and 10 pixels from the top.

<SCRIPT LANGUAGE="JavaScript">
function start()
{
CreateStaticMenu("MenuDiv", 10, 10);
}
</SCRIPT> .

In order for the menu to move and always be at the same position on the page you need
to modify the BODY tag of you document.

In this case the onLoad="start()" will start the javascript that makes the menu move.

Next you need to design your web page so you leave a column at the left of the page
wide enough to fit the menu. The easiest way to do this is to use a TABLE.

This is you web content

</TD>
</TR>
</TABLE>

We use a spacer gif to ensure the left table column stays wide enough to fit the menu.
In this case the width is 130

The last thing is to define the layer in which the menu exists. You do this using an "absolute"
position DIV. I find it easier to define this at the bottom of the BODY of the document
as you can just cut and paste the menu into different pages. As the menu is an "absolute"
positioned DIV then it doesn't really matter where you create it. You can if you wish
create at the start of the BODY of your document, it is up to you. The important
thing is to make sure the parameters match.

Anything defined here will be your float menu.

</DIV>

The following
    id="MenuDiv" & left:10;top:10
Should match the parameters defined in
    CreateStaticMenu("MenuDiv", 10, 10);

The parameter
     width:100;
should match or be less than the left hand column of your table
    <TD><IMG SRC="images/spacer.gif" WIDTH="130"></TD>

Introduction
HTML Page
Download
JavaScript2
BODY
Web Page
Your Menu