Four Easy Steps to Creating Menus




Step One: Copy the Necessary Files

The following files are required to run EZmenu:

ezloader.js
ezmenuie.js
ezmenuns.js

These files can be found in the "code/" subdirectory in this download. We recommend you also create a subdirectory to hold these files.





Step Two: Design menu panels with the Menu Maker

What is a Menu Panel?

A menu system is made up of individual menu panels linked together. A menu panel may be horizontal or vertical as illustrated below.

Using the Menu Maker to generate Menu Panels

2.1   The Menu Maker allows you to generate the menu panels without knowledge of javascript. You will find at the beginning of the Menu Maker a form for you to specify the properties of the menu panels. Modify the properties as desired.

2.2   Next, click the "Generate Header" button. This will add a Panel Header to the "Panel Entries" Box. This line contains all the formatting information that you have entered above, and will govern the appearance of all the panels that are defined below it unless it is superseded by another Panel Header.

2.3   Next you can define your menu panels after the header. For the above example, there are three panels (i.e. the main bar panel, the links panel and the search engine panel). See the table below for the panel entries for this example.

2.4   Finally, click on the "Generate Code" button. This will translate your Panel entries into Javascript code in the "Menu Javascript Code" box in the Menu Maker. Copy and paste the javascript code in a text editor and save it as "ezdata.js" (or any name *.js).

Menu Maker Panel Entries For Above Example

Panel Entries
Type:Bar,.....

Panel=Main
Web-Nova^http://web-nova.com
Some Links^^Links
Contact Us^mailto:support@web-nova.com

Type:Vertical,.....

Panel=Links
!<b>Links</b>
CNET Central^http://cnet.com
Search Engines^^Search

Panel=Search
Yahoo^http://yahoo.com
Google^http://google.com

Notes

1.   The keyword "Panel=" signifies the start of a new panel (Important: There is no space before or after the"="). This is followed by the name of the panel. You may give a panel any name you like.

2.   What follows are the individual menu items. The format is :

"Item Name^^Child_Panel_Name"
or
"Item Name^http://url.com^Child_Panel_Name"
or
"Item Name^http://url.com,Frame_Or_Window_Name^Child_Panel_Name"
or
"Item Name^javascript:yourownfunction()^Child_Panel_Name"

If you specify the Frame_Or_Window_Name, the link will open in that frame or window. The prefix javascript: allows you to call your own javascript function when the menu item is clicked.

3.   To specify an item as a title item, prefix the item name with a "!" (as in !<b>Links</b>).





Step Three: Cut and Paste Script on Webpage

Now that you have generated the menu panels, the next step is to tell your web page to load them.

You will need to copy and paste the following script to your web page between the <BODY> and </BODY> tags (You may also need to configure lines 1 and 2, see below):

<BODY>

<script language="JavaScript" src="ezdata.js"></script>
<script language="JavaScript"> ez_codePath = "code/" </script>
<script language="JavaScript">
document.write("<SCR" + "IPT SRC='" + ez_codePath + "ezloader.js'><\/SCR" + "IPT>"); </script>
<script language="JavaScript">menusGo()</script>

....Your Own HTML Code....

</BODY>

Path and Filename Configuration (Important!)

The first line of the above script assumes that the menu contents (generated by the Menu Maker) are specified in the file "ezdata.js" which is stored in the same directory as the web page. If it is named differently or stored in a different directory, you can specify the name and path accordingly, e.g. src="http://yoursite.com/directory/yourfile.js".

The second line ez_codePath="code/" tells the webpage that the EZMenu source files (i.e. ezloader.js, ezmenuie.js and ezmenuns.js) are stored in the subdirectory "code/" relative to the webpage. You may need to change it to reflect your own path e.g ez_codePath="http://yoursite.com/dir/" , if the files are stored in a different directory.





Step Four: Select Panels to Display Premanently on Webpage

Now that you have told your webpage to load the menu panels, the final step is to tell it which panels to display first on page load.

You do this by using the built-in command showPermPanel, ie:

<script> showPermPanel('Panel Name', x-coordinate, y-coordinate) </script>

Panel Name = Name of the panel to be displayed (This is the name as entered in the Menu Maker). Remember to enclose the name within single quotes.

x-coordinate, y-coordinate = The location of the point on the webpage where the upper left corner of the panel will be placed.

<BODY>

<script language="JavaScript" src="ezdata.js"></script>
<script language="JavaScript"> ez_codePath = "code/" </script>
<script language="JavaScript">
document.write("<SCR" + "IPT SRC='" + ez_codePath + "ezloader.js'><\/SCR" + "IPT>"); </script>
<script language="JavaScript">menusGo()</script>

<script> showPermPanel('Main', 10, 80) </script>

....Your Own HTML Code....

</BODY>

Instead of using showPermPanel to display permanent panels, you may also use the command showPermPanelCentered. Panels displayed using this command will be centered around the x and y coordinates specified.

The format is :

<script> showPermPanelCentered('Panel Name', x-coordinate, y-coordinate) </script>

The difference between showPermPanel and showPermPanelCentered is that the former will display the upper left corner of the panel at the specified co-ordinates, while the latter will position the center point of the panel at the same co-ordinates.

That's all to it!