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

1.  Provide button data (optional or skip to #2)

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 ( "label" , "link" ) for each button, but the more exact method includes three fields. The first field would be the submenu indent from the left ( "0","label","link" ). Data added here will populate the menu fields in section #2, and the code will be created from the fields in section #2.

Enter comma delimited (csv) text fields:

2.  Add Labels and Links

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: + CaptionHyperlink

3.  Customize Appearance

  • 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.
Bold Text
Font Size

left  center  right
Up Button Color
Up Text Color
Down Button Color
Down Text Color

Border Highlight
Border Shadow

For popup testing only:
Page color
Button size:
Button Width
Button Height
Menu Padding
[ Sample Button ]
dropdown column »
flyout column »
horizontal row
« dropdown column
« flyout column

4.  Get Code & Preview

eBay Auction (non-spamming)   Open links in new Window  
Encode for multiple copies
tight code
loose code
  style/script size:
menu code size:
Total code size:

Designer Instructions

The menu code relies on a CSS stylesheet, which you can manually edit to create more detailed effects. There is a placeholder in the stylesheet for a button background image.

A gap or spacer can be added to separate button sets within a single menu. Insert an extra line at the main level (not indented as a submenu). Place only a hyphen in the caption cell. Add a title to the link cell or leave it empty.

The menu is enclosed in a wrapper DIV called menuHolder, and some versions may have a float attribute so that your text content will wrap around to the side of your menu. To terminate the wrapping and push subsequent page content below the menu, add a break tag <br clear="both"> to the end of your wrapped content (which is how the in-page and popup previews are displayed on this page). Or you can remove the float attribute in the #menuHolder style.

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 menu option that contains 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.

courtesy of eBay user shipscript
copyright 2007-20012 ©

Free Andale counters.