Menu Parameter and Style Examples

For the following examples the menu items are populated as shown below:

menu items for this example


Getting Started - Applying Default Parameters and Styles

Upon creating the menu items, the menu will not look like anything but a nested unordered list:

menu with no params or styles set

Setting Default Parameters

The default settings in the Edit Menu Parameters console are show below:

default menu parameters

Clicking Save will result in the menus appearing as show below:

menu with parameters setup, but no styles

Flipping the orientation to Horizontal (variable width) will change the menu to appear as below:

men with no styles

Setting Default Styles

As you can see, although the menu no longer has the default list item "dots" and it can be either horizontal or vertical, it still does not look like anything other than default links. To add some fonts and colors, you need to go to the Edit Menu Styles console. The default settings for menu styles are shown below:

default menu colors

Using both default menu parameters and menu styles you will start to see something that resembles an actual website menu as shown in the figures below:

menu with default colors

menu showing sub item on hover with default positioning

Note the gap between the "About Us" link and the sub menu starting with "Mission". This is generally undesirable because if the mouse moves to slowly between "About Us" and "Mission" the sub menu will disappear. To correct this problem, set the Offset from Top to 0 as shown below:

fix default sub menu positioning

As you can see below, this causes the sub items to flow out nicely as shown below. Note that if you had a horizontal menu, you might leave the Offset from Top at 20px and set the Offset from Left to 0.

vertical menu with hover over sub item showing sub level 2 items

Menu Positioning

Note how the menu is not positioned all the way to the top left corner of the top div. If you want it to reference from that corner, just set Top and Left to 0. You can place your menu anywhere relative to that corner by using different numbers. You can also make your menu horizontal and have it fill the top div as shown below:

set horizontal menu of fixed width of 100% at position 0-0

The result will appear as shown below:

horizontal menu with fixed width of 100%


Horizontal and Vertical Top-Level And Sub Levels

If you do not care about filling the entire top div, but would rather that the menu items butt up against each other, set it to a Horizontal (variable width) menu as shown below:

horizontal menu with variable width

This will make the menu appear as shown below:

variable width horizontal menu

You can also set your sub menu orientation to horizontal as well:

set sub menu 1 to horizontal

The menu below has horizontal sub level 1 items, but sub level 2 items are still vertical:

menu with horizontal sub level 1 menu

Setting sub level 2 to horizontal orientation will make both (all) sub levels horizontal:

set sub level 2 to horizontal

menu with horizontal sub menus 1 and 2

And you can also use horizontal sub menus with a vertical top-level menu:

set vertical menu with horizontal sub menus

vertical menu with horizontal sub menus


Down State and Hover/No-Hover Effects

Menu item (button) down will inherit the hover styles when hovered over by default. This is how traditional menus work.

styles set to hover on down

This will result in the normal state looking like any other menu item, and the hover state looking like any other menu item that is in hover state. The figures below show the menu on the index "Home" page and compares it to the "About Us" page with behaves exactly the same.

hover on down set to off default hover on down hoven not down

But you can also turn off the hover affects all together to give a inert looking down state.. Just uncheck the Hover on Down checkboxes as shown below:

set hover on down to off

The result will look like the figure below where hovering over "Home" does to induce the hover colors as with other menu items not in the down state:

down state with no hover effects

You can also set your down colors to be different than either the normal state or the hover state. Below is an example of setting the text color to gray to give an inert effect:

set colors for down state as hover

The result is shown below giving the "Home" button a disabled look:

menu with down state colors different than normal


Turning off Collapsing and Expanding Menus

Under certain circumstances such as mobile where there is no mouse hover it may be desirable to display all sub menu items as expanded. To do this uncheck the box Collapse and Expand as shown below:

set to no collapse or expand

The result look like below where all sub level 1 and sub level 2 items are visible all of the time without hovering the mouse over any menu item:

menu with no collapse or expand

But this could easily be too unwieldy. Another approach is to keep the tree branch that has any item in it as down expanded while collapsing all other branches. To do this, make sure Collapse and Expand is checked and check Latch Expanded Subs on Item Down as shown below:

set to latch expanded sub levels on item down in tree

The result is shown below for any of the pages "News", "Gallery", "Media", "Audio", "Video" or "Slideshow" with default down colors:

menu with expanded sub menus on item down anywhere in tree branch

Setting down colors as above to give the "inert" look, the "Video" pages menu will show as below:

menu with expanded subs on down and with down colors different than mouse out


Menu Item Borders

You can also apply borders to each menu item. The settings for this are shown below:

set top item border

The figure below show the menu with the settings above. Note that borders between the items are actually double up making them twice as think as the outside borders.

menu with top item borders

If this is undesirable, there is a checkbox that you can check to eliminate adjacent borders. It is shown below:

set to omit adjacent item borders

Clicking the checkbox Omit Adjacent Borders corrects the border doubling issue as shown below:

menu with top item borders omitting adjacent borders

You can also set borders for sub items as shown below:

set sub item borders

Again, the result yields double-thick borders between menu items:

menu with sub item borders

Simply use the Omit Adjacent Borders check boxes for the sub levels as shown below to correct the problem:

set sub item borders to omit adjacent borders

The result is all border between sub level items are same thickness and exterior borders:

menu with sub item borders omitting adjacent borders


Proportional Item Width and Spacing

Quite often, it is desirable to have menu items that grow or shrink to fit based on the text in the item. To do this, check the checkbox Proportional as shown below:

set menu item width to proportional

As you can see, the "Contact Us" menu item is now given more width than the other shorter-text items:

menu with proportional item widths

You can add space between menu items, even for a variable-width horizontal menu. Just enter the spacing for Item Spacing as shown below:

set top level item spacing

This works for either horizontal menus or vertical menus:

menu with top-level item spacing

vertical menu with top-level item spacing



You can apply gradients to your menu items for up to 4 colors, or to transparent. These gradients can be either linear in any direction, or radial. You can also have the gradient repeat. The example below shows how to make a linear gradient that goes from a color to transparency. Note that the color entered for 1 and 2 are the same color. What is different is that the opacity is 100% for color 1 and 0% for color 2.

set background from color to transparent

The result is shown below. Note that the blue on the hover items is actually a bleed thru of a solid color that was left for the hover state.

menu with gradient from color to transparent