Menu G5 Examples: When a menu is long

If you have a long menu that would exceed the browser border, you have two options to make it more accessible:

to make it scroll
to split the menu items into multiple columns or rows

The menu demo on the left side shows these two options.

To make a menu scroll, you can add the "scroll:" phrase to its menu pad style (addStylePad), in our sample, we use "scroll:y-only;".

When a sub-menu is display, Menu G5 aligns it to its parent menu item, then if the sub-menu exceeds the browser border, Menu G5 would move or flip it into view. If the sub-menu is just too long to fit into the browser window, Menu G5 would scroll it when the menu item under the browser border (or the menu item next to this menu item) is mouseovered.

You can stop the scrolling by moving the mouse cursor.

An alternative to scrolling a long menu is to split it into multiple columns or rows. To do so, you can add the "col:" or "row:" phrase into the menu pad style, in our sample, we use "col:4;".

For a drop-down menu (menu-form:pad or default), the "row" will be checked first, which defines how many items to be filled in a column. If "row" is not set, the "col" will be checked to calculate the rows needed for a column. The width of items will be aligned within columns, and separators would only stretch to the width of their own columns.

For a menu bar (menu-form:bar), the "col" will be checked first, which defines how many items to be filled in a row. If "col" is not set, the "row" will then be checked to calculate columns needed for a row. The height of items will be aligned within rows, and separators will only stretch to the height of their own rows.

[Back to index page]

# # #