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