BETA

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 ( "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.

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: +   Caption Hyperlink


    3.  Customize Appearance

    Colors & Borders
    MAIN menu Colors & Borders:
    Background Text
     Static 
     Hover 

    Main menu borders
    px
    em

    Advanced:
    Static Background Image & Coverage


    Hover

    above background pair to color
    gradient lists and flip for hover.
    Static: angle & color list

    Hover: angle & color list
    SUB menu Colors & Borders:
    Background Text
     Static 
     Hover 

    Sub menu Borders
    px
    em

    Advanced:
    Static Background Image & Coverage


    Hover

    above background pair to color
    gradient lists and flip for hover.
    Static: angle & color list

    Hover: angle & color list
    Fonts [ Sample Button ]
    MAIN menu Fonts:
    em

    SUB menu Fonts:
    em

    Menu Size & Shape
    MAIN menu Button size:
    emx
    em
    em Ypad
    em Xpad
    SUB menu Button size:
    emx
    em
    em Ypad
    em Xpad
    %
    em

    4.  Get Code & Preview




    Stylesheet Options
      stylesheet size:
    html size:
    Total code size:
    0
    0
    0


    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.




    courtesy of eBay user shipscript
    copyright 2007-2016 © www.isdntek.com