The menu sits as the top component of the left nav on applicable pages. it can contain sections and optional icons for menu entries.
Menu with Sections
- 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).
The menu is created with 3 divs to allow for more styling options.
lotusChunk is used on divs to create vertical space when needed.
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.
Sample HTML - Menu with Sections
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.