FREE Web Menu Generator (DHTML Menu Generator)

Top quality and tech-edge features:

Search Engine Friendly. This web menu creator generates purely static HTML menu content with JavaScript control:
- No dynamic content is maintained.
- No item texts or item links are manipulated on the fly.
- No Flash is used to obscure the search engines.
The web menu links are fully indexed by the search engines. Your webpages will be boosted into the search result pages.
Set three effects or choose no effect when a menu is opened. The web menus are completely customizable. Set the font, font properties and colors either to the whole menu (and its sub-menus) or to each menu item individually.
For each menu item you may set the link that is to be followed and the JavaScript command that is to be executed when the item is clicked. You may also avoid setting these properties to the items.
Supported browsers: Internet Explorer, Firefox, Netscape, Mozilla, Google Chrome, Safari, Opera.
Installation: Copy & paste 1 piece of code in 1 step.

Detailed instructions:

First of all, you will need to click on the 'Test the menu in a new window' button in order to observe the progress of your work on your menu project. A new window will open and the menu code will be generated and displayed as a working menu in the new testing window. Test your menu whenever you need to check how your work is going and how is your menu behaving. Be sure to test all the links of the items in your menu before grabbing the code and installing it to your webpages.
Menu editor interface.
The menu editor interface is hierarchical. The main menu (which always exists) is a box, in which there are properties for the menu that you may set and below them there is a list of items that you may populate. Each item may have a sub-menu that is associated with it. This sub-menu is to be opened when the mouse is hovered over that item. When you add a sub-menu to an item a new sub-menu editor interface will appear in that item. You may always collapse sub-menu editor interface boxes or expand them.
Menu type.
There are two menu types supported: horizontal and vertical. You may choose from both using the 'Type' drop-down box. Each sub-menu may have different type attribute. The default values are 'Horizontal' for the main menu and 'Vertical' for the sub-menus.
Menu effect.
There are three menu effects that you may specify. Unfolding, fading and scrolling. Each menu (sub-menu) may have different effect applied to it or 'No effect' setting. If not specified, each sub-menu will inherit the effect of its parent menu.
Menu width.
You may set your menu to have the minimum width needed to display its items. In this case choose 'Min width' (the default value for sub-menus). On the other hand, if you need to force the menu spread from left-most to right-most borders of the webpage viewable area or to occupy the full width of its container HTML element (for example if the menu is placed inside a table cell or <DIV> tag) then select '100%' for the menu width (default value for the main menu).
Menu item widths.
When you are working on a horizontal menu and you set its width to '100%', this property will appear. You have two options: 'As needed' and 'Uniform'. When the horizontal menu is 100% in width its items may occupy equal widths or individual widths - as needed by their content text. To force the items of the horizontal menu spread in uniform widths (for aesthetic purpose) set 'Uniform' for the 'Item widths' drop-down box. If you need the items spread as their content widths presume, select 'As needed'. For vertical menus this option is not appropriate and will disappear when you set the menu type to 'Vertical'.
Menu colors.
For each menu and sub-menu in your project you may select the fore and back colors. They will be further inherited to the child sub-menus, but may be explicitly set for each sub-menu if desired. Use the 'Fore color' and 'Back color' drop-down boxes and select 'Default' to inherit the colors from the parent menu, or select 'Custom' to choose the colors using the embedded color picker. A button 'Pick' will appear to let you choose the desired color.
You may also override the menu colors for each item and select specific color for certain menu items. Use the same method - select 'Custom' for the colors of the menu item and then use the 'Pick' button to open the color picker and pick the needed color.
Menu shadow.
The menu can either have or not have a shadow. Use the 'Shadow' drop-down box to select. The shadow attribute is also inherited to the sub-menus, but may be overridden for any of the sub-menus. You may even select the color of the shadow. Gray shadow is chosen by default.
Menu font and font properties.
You may choose the menu font, font size, bold and italic attributes. Use the corresponding drop-down boxes. These properties are also inherited to the sub-menus (using the 'Default' value), but may be overridden for any given sub-menu.
Working with items.
Adding new items is straightforward. For each menu (sub-menu) there are two buttons of the menu (sub-menu) interface: 'Add item at top' and 'Add item at bottom'. These buttons are found in the lower-left corner of the menu editor interface box. Their caption talks about their purpose. The added items will appear in the menu (sub-menu) interface as rows and you may delete an item by clicking on the 'Delete' button found in the item's row.
Setting the item properties and behavior.
In an item's row there are item text field, font colors drop-down boxes, buttons with arrows meaning 'Move item up' and 'Move item down', item link field, item JavaScript command field and 'Add sub-menu' button.
- Item text field.
  Click on the item text field and an edit box will appear. Use the edit box to enter the item text using plain text or HTML code. Using HTML code you may set special appearance of the given item, add images to the item or override its color and font attributes. On each keyboard click the item will be refreshed and you will simultaneously see the result of your editing. When done, press 'Esc' key or click on the item text or the [X] button to close the edit box.
- Item font colors.
  As we already explained in the Menu colors section above, you may override the menu font colors and set explicit colors for certain items. Use the drop-down boxes and choose 'Custom' then pick a color by clicking on the 'Pick' button that will appear below the drop-down box.
- Two buttons with arrows meaning 'Move item up' and 'Move item down'.
  Use these buttons to place the item in the correct position in the menu.
- Item link field.
  Click on this field and an edit box will open, in which you may edit the link of this item. Enter full URLs, please!, i.e. start the link with 'http://' and enter the domain of your link for example: 'http://popup-toolkit.com/webmaster-tools/'. You may set relative links too, but they won't work until you install your web menu in your webpages on your server. The relative links will not work in the testing window here. When you set a link for an item the mouse will appear as pointing hand when hovered over the item and when the item is clicked the given link will open. You may set the target of the link in the field 'Link target'. This field will appear when you click on the link field and when the link edit box opens. There are several pre-selected targets: '_self' - open the link in the same browser window; '_blank' - open the link in a new browser window, '_top' - open the link in the top frame of the frameset; 'user-specified' - you enter the target in a field that will appear next to the drop-down box.
- Item JavaScript command field.
  Click on this field and an edit box will open, in which you may edit the JavaScript command of this item. You may enter any JavaScript and it will be executed when the item is clicked.
- 'Add sub-menu' button.
  Click on this button to add a sub-menu to the given item. In the working menu, when the mouse is hovered over the item the sub-menu will open. When you add a sub-menu to a given menu item, a new editor interface box will appear in the items row. You may collapse or expand this sub-menu editor box using the
  and
  icons. You will hence notice that this editor box is analogous to the main menu editor box but in its caption is says 'Sub-menu index: ....', noting that this is a sub-menu. Thus the editor interface is well structured and clearly presented in the proper hierarchical manner the web menu is built. You may always delete a sub-menu of an item by clicking on the 'Delete sub-menu' button.
Code.
Finally, you will receive the generated code in the 'Menu code' box below the editor interface. You may regenerate the code by clicking on the 'Generate menu code' button. Also, the code will be automatically generated every time you click on the 'Test the menu in a new window' button. Then select and copy the code and paste it in the appropriate place in your webpages or in your web page template. If you are using server side script like PHP then you may save the menu code in a separate script file and include this file in the appropriate place(s). Thus you will achieve clean code structuring and will be able to easily replace the menu code with a new one.
PHP example: Create a file with the name 'web-menu.php' and save the menu code inside. Then place this one line of code in your PHP script files where you need your menu to appear:
```
        readfile ( "web-menu.php" );
        
```
If you need to place the web-menu in a non-PHP section (i.e. HTML section) of the PHP script then use the following line of code alternatively:
```
        <?php readfile ( "web-menu.php" ); ?>
        
```
Questions?
If you have further question or ideas about this free online web menu creator, ask me on my e-mail found at the bottom of this page.
Enjoy and happy web mastering :-)

	Color Picker