Use the Web menu edit interface, then click the 'Test the menu...' button.
You will find detailed instructions on how to use the free HTML web menu generator below the 'Menu code' box.
Web menu edit interface:
Top quality and tech-edge features:
Search Engine Friendly. This web menu creator generates purely static HTML menu
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.
No external scripts or files from other domains are loaded. The menu code is inside your web pages.
The web menu links are fully indexed by the search engines. Your webpages will be boosted into the search result pages.
This generator does NOT place any HIDDEN links like many other generators do. Hidden links WILL cause your
site to be penalized by search engines or completely withdrawn from search result pages for a long period of time.
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
is clicked. You may also avoid setting these properties to the items.
Supported browsers: Internet Explorer,
Mozilla, Google Chrome,
Installation: Copy & paste 1 piece of code in 1 step.
First of all, you will need to click on the 'Test the menuin 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.
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.
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.
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'.
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.
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
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
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.
'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
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.
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 menuin 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" ); ?>
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 :-)