Designer Menu Maker
Create CSS Dropdown or Flyout Menus with complex Submenus.

This optional method is provided for users who want to bulk-edit their menus. The data may be created in a data base or can be extracted from a previously made menu. Only two fields are required ( "caption" , "hyperlink" ) for each button, but the more exact method includes three fields. The first field would be the submenu indent from the left ( "0","caption","hyperlink" ). Data added here will populate the menu fields in section #2, and the code will be created from the fields in section #2.

Use the arrows next to the fields to insert new lines, delete existing lines, or to indent submenu items.
Add your caption and link for each menu item.

Add:

Caption

Hyperlink

• Select and modify a premade style or start your own.
• Change font styles and text alignment.
• Change Button dimensions to suit your labels and page format.
• Change background, text, and border colors.
• Choose a menu configuration.

Designer Instructions

The HTML created with this tool will be the same for all the various menu configurations. The arrangement of the menu relies entirely on the stylesheet, which you can manually edit to create more detailed effects.

A divider can be added to separate menu sets within a single menu, as shown in our sample data. Insert an extra line at the main level (not indented as a submenu). Place only a hyphen in the caption cell, and add a title in the link cell or leave it empty.

Horizontal menus should be configured to fit in a reasonable page width, without wrapping. The captions used in the menus should also be reasonably short enough to fit into compact button sizes. If there are too many buttons in a horizontal menu, you can force a wrap by adding a divider to the menu, consisting of only a single hyphen in the caption cell and nothing in the link cell. Keep in mind that menus must be situated so that flyout submenus are not offscreen to the right or left.

This tool creates menus that will adapt to various screen widths, including mobile screens. All menu styles shrink to the same format for narrow mobile devices. On narrow screens, the menus will display full width and will drop open when tapped.

When selected, this tool can encode and store both your CSV data and your style data within your output code for future revisions. When you need to update your menu, just paste it back into the top of the tool. If you wish, you can remove the encoded block and save to a file on your computer and use the remainder of the code in your listings.