Skip to main content link. Accesskey S

Action Menu

The action menu is a popup menu that is launched by clicking on another element. In our UI, action menus currently exist for the scope drop down, the more sorts control, and the more actions links and buttons.

Directionality:

Menu with Icons

Classes:

  • lotusActionMenu - this class is assigned to the ul tag
  • lotusPlain - this class is assigned as an additional class to the ul tag when you want a menu without icons.
  • lotusMenuSeparator - this class is assigned to any menu item (li tag) that you want to appear below a separator. (The li tag uses a top border style).

Basic Implementation

The popup menu is a positionable unordered list that contains a unique Id which is used to access it.

We have also created styles for the dojo menu that allow you to create an icon version of the menu.

Variations

To create a plain menu, with no icons, assign the lotusPlain class in addition to the lotusActionMenu class.

To create a separator above a menu item, assign the lotusMenuSeparator class to the li tag of that item.

Examples

Sample HTML

Sample HTML - Menu with Icons

CSS (actionMenu.css)

Theme CSS (actionMenuTheme.css)

This component began as a popup menu for an action link or button. It was originally positioned by mouse click, but now is positioned directly under the element that triggers it.

We also added styles to dojo.css to make the dojo menu look this way and devs can use the dojo menu in place of this simple html one.

Most recently, we have created a plain version of the menu, without icons. This has not been ported to dojo at this point in time.

Menu icons began as background images on menu items, but have been moved to foreground images, to cut down on the amount of CSS required.

6/2/09: Updated styles to handle high contrast. To see an example of a menu that indicates a selected item in high contrast mode, click on "more sorts" on the interactive page.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.