Skip to main content link. Accesskey S

Menu

The menu sits as the top component of the left nav on applicable pages. it can contain sections and optional icons for menu entries.

Sprites: Directionality:

Menu with Sections

Classes

  • lotusMenu - class assigned to the wrapping div for the component
  • lotusBottomCorner - this class is an inner class for more styling options.
  • lotusInner - this class is an inner class for more styling options.
  • lotusMenuSection - this class is used when you want to separate your menu into sections (a divider appears after the section).
  • lotusMenuSubsection - this class is used for creating subsections in a menu (controls vertical and horizontal spacing).
  • lotusIcons - this is assigned to the ul tag of the menu if it uses icons
  • lotusSelected - the class used to indicate that a menu item is selected.
  • lotusChunk - this is a class used to chunk data in the menu (vertical spacing).

Basic Implementation

The menu is created with 3 divs to allow for more styling options.

lotusChunk is used on divs to create vertical space when needed.

Variations

Put the lotusIcons class on the ul tag of the menu if you want the menu items to have icons.

Use the lotusSection and lotusSubsection classes if you want a more complex menu.

Examples

Sample HTML

Sample HTML - Menu with Sections

CSS (menu.css)

Theme CSS (menuTheme.css)

We have removed the background images for faster loading, but the structure still remains to future-proof it and allow customers additional retheming options.

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.