Four Easy Steps to Creating Menus | ||||
![]() Step One: Copy the Necessary FilesThe following files are required to run EZmenu: ezloader.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 MakerWhat 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 Panels2.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
Notes1.   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 : 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 WebpageNow 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):
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 WebpageNow 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.
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! |