DHTML Lab: Hierarchical Menu Generator
Please be patient. This may take some time on slower systems.
Using the Tool
1. global menu parameters
2. arrays defining menu content
3. the external menu-creating script
4. in-page links to activate menus
A sample group of Global Parameters look like this:
menuWidth = 120; childOverlap = 50; childOffset = 5; perCentOver = null; secondsVisible = .5; fntCol = "blue"; fntSiz = "10"; fntBold = false; fntItal = false; fntFam = "sans-serif"; backCol = "#DDDDDD"; overCol = "#FFCCCC"; overFnt = "purple"; borWid = 2; borCol = "black"; borSty = "solid"; itemPad = 3; imgSrc = "tri.gif"; imgSiz = 10; separator = 1; separatorCol = "red"; isFrames = true; navFrLoc = "left"; mainFrName = "main"; clickStart = false; clickKill = false; keepHilite = false; NSfontOver = false;
- the text to be displayed (string)
- the URL to link to when the item is clicked (string)
- the existence of a related child menu (boolean)
arMenu1_2 = new Array( "Contents","http://www.webreference.com/index2.html",0, "Services","http://www.webreference.com/index2.html",0, "Experts","http://www.webreference.com/experts/",1, "About","http://www.webreference.com/about.html",0 );The top-level menu in a menu-tree hierarchy has nine additional elements that define tree-specific values for the global parameters. If they contain a null or empty ("") string value, the global parameters are used for this tree. If a valid value is entered, it overides the global setting. Using this set of array elements you may specify tree-specific:
- menu width
- absolute left position
- absolute top position
- font color
- mouseover font color
- background color
- mouseover background color
- menu border color
- item separator color
arMenu1 = new Array( 150, "","", "#E2AAB5","", "","", "","", "Display Text for Item 1","Link URL for Item 1",0, "Display Text for Item 2","Link URL for Item 1",1, "Display Text for Item 3","Link URL for Item 1",0 );
to set the tree-specific elements.
to set the remaining elements.
2. Creating the Script
The top-right of the screen contains the buttons to help you navigate the tool.
The center-right area is where you enter your preferences. The work area will be updated when you change the form values, so remember to click outside the input boxes to finalize changes.
In the bottom-right, the four parts of the script can be displayed at any time, so you can monitor your progress. The tool will automatically copy all four to your clipboard when you click the Copy to Clipboard button.
It is best to set the parameters in order. That is, in the order in which the navigation buttons have been laid out.
2. Create your own menus.
A default item, which you can change later, will be incorporated into every menu.
3. Assign the tree-specific parameters for each menu.
You may create/delete/insert menus while assigning the parameters. You may also return and change the global parameters at any time.
4. Create the menu Items.
Once you have created all the necessary menus and have the look you want, move on to the Menu Item Array Elements.
Note: It is not possible, in this version of the tool, to delete an item. You may, however, change it at any time. Make sure you make only the items you need.When you create an item that has a related child menu, the Create/Edit Child Menu button will appear. Click it to create the child menu that will appear when the user mouses over the item. You are now working with the child menu. The Edit Parent Menu button will return you to the parent menu for additional item editing. You must navigate the menus in this way when creating.
You have created a top-level menu with four items, the first and third of which have child menus. Go to item three, click Create/Edit Child Menu to create and add items to the child associated with item three. Suppose this child menu has child menus of its own. You would create and edit them in the same way. Your "current" menu is now three levels deep. You must move back to the parent before working with another child. In other words, you must step-up the hierarchy and back down to work with a menu in the same level.
When you have completed menu creation, close the configuration window, by clicking the Exit button.
If you feel comfortable with the array structure, you may continue to manually edit them. If your menus are to appear on more than one page, it is best to create an external file containing only the arrays, and load it immediately before hierMenus.js.
REMINDER: If you are using a frameset, remember that this script must be placed in your navigation frame!
this link to display menu
Select Current Menu Tree|
Choose a menu to create or edit an already-existing menu using the form elements below. View the menus in the work area.
Note: You must SET/EDIT a menu before using Delete or Insert.
|CURRENT MENU Stats:|
Menu currently being built:|
Item currently being built:
Creating arrays for
Array currently being built:
Select from the drop-down elements or enter your own value.
Note: NS4 will render all borders as solid, regardless of the value of this parameter.
Hint: Non-solid border styles render better with light-colored borders.
Note: In NS4, both the border and the separator line will use this color.
Note: In NS4, the separator line color will be rendered the same as the border color.
This group of parameters defines the font of the text displayed in the menu items.Font Family (fntFam): Other:
Note: Your users might not have the same fonts installed on their system, in which case a different font will be substituted. It is best to use one of the families in the SELECT element or a common cross-platform font (ex. Times).
Note: NS4 will ignore this parameter, and change the item background color only. You may set this option for Navigator in the NS-specific section.
This group of parameters defines menu item styling and mouseover behavior.Padding (itemPad): Other:
Following OS standards, any menu item that has a child menu associated with it displays a right-aligned arrow or triangle image, alerting the user to the child menu's existence. Our standard has been a black triangle with a transparent background (tri.gif). If you wish to change the image used, enter a valid filename in the text box below.
This group of parameters defines the position of any related child menu.Child Offset (childOffset): Other:
This group of parameters defines the menu display and hide behavior.
The decimal value either selected or entered above represents the number of seconds that a top-level menu will remain visible after the user has moused out of the menu tree. All child menus are hidden instantly. Only the top-level menu remains visible.
The script converts this value to milliseconds to be used by the timer statements.
This parameter relates to your Navigator users only.NS font (NSfontOver): Yes No
This group of parameters should only be set if you are using the menus in a frameset. Remember, the script must be included in your "navigation" frame. The menus will appear in the "main" frame.Frame Use (isFrames): No Yes
This group of parameters is stored in the array that defines the top-level menu in a tree, and overrides the global parameters for this tree only. Click the relevant CHECKBOX to allow entry of new values.
Items can be set or edited by selecting an item number and clicking SET ITEM. Remember, you may not delete an item in this version of the tool.Menu Item: Other:
The text box below displays the script component currently being created. You may view any other component by clicking the buttons to the right. All components will be copied to your clipboard when you click the COPY to Clipboard button below.
Produced by Peter Belesis and Copyright Â© 1998 internet.com Corp.
All Rights Reserved. Legal Notices.
Created: Sept 07, 1998
Revised: Aug 02, 1999