The Inventua SideMenu displays a vertical list of hyperlinks used for navigation within DotNetNuke, and can change the style of the displayed items when the user moves the mouse over a menu item. The display styles of the menu is entirely css-driven, and you can configure the "top" menu, so the menu control can be used as a sub-menu.

Configuration Options
Create a SideMenu instance and select the Options menu item from the module settings menu to display the Options page.  If you are using the SideMenu as a skin object, you can use the properties specified here and include <OBJECT> and <TOKEN> nodes in your skin.xml file as described in the DNN skinning documentation. For more information, refer to the "Using SideMenu as a skin object" topic below.

Source	Use the source page combo to select the base page to use for this instance of the SideMenu. You can select [Root Page] to display a hierachical view of all tabs, or you can select a child page to display only that page and it's children. You can suppress the display of a page by setting it's "Disabled" property in the DotNetNuke page manager. The SideMenu will only display tabs that the currently logged-on user has access rights to.  If you are using the SideMenu as a skin object, the property name for this option is "source".  Special values: [root page]: Top level root page for the current portal.  If used in a skin, use the value -1. [current page]:   Shows the child items of the current page only.  If used in a skin, use the value -2. [parent page]:   Shows the current page's parent and it's child tabs.  If used in a skin, use the value -3. [top ancestor]:   Shows the current page's "highest" ancestor page and its child tabs.  If used in a skin, use the value -4. [dual]:  If the current tab is a top-level tab (no parent), displays the menu the same as the [current tab] option.  If the current tab is not a top-level tab, draws the menu the same as the [top ancestor] option.  If used in a skin, use the value -5.  [dual] is intended for large sites (where showing the entire page tree is not practical), or for page designs that show the top level tabs either across the top of the page or in another menu instance.
Header css class	Use this option to set the Header css class name in your skin or portal css file. In the sample screenshot, the header is shown in bold. The default value is MenuHdr.  Menu headers are rendered when the page has child tabs.  If you are using the SideMenu as a skin object, the property name for this option is "MenuHeaderCssClass".
Header Highlight css class	Use this option to set the "highlighted" css class name in your skin or portal css file for header items. The header highlight css style is used to highlight the menu header under the mouse pointer. The default value is MenuHdr, which renders highlighed menu items the same as unhighlighted ones. If you are using the SideMenu as a skin object, the property name for this option is MenuHeaderHighlightCssClass".
Item css class	Use this option to set the menu item css class name in your skin or portal css file. The default value is MenuItem. Menu items are rendered when the page does not have child tabs. If you are using the SideMenu as a skin object, the property name for this option is "MenuItemCssClass".
Item Highlight css class	Use this option to set the "highlighted" css class name in your skin or portal css file. The highlight css style is used to highlight the menu item under the mouse pointer. The default value is MenuItemMouseOver. If you are using the SideMenu as a skin object, the property name for this option is "MenuHighlightCssClass".
Current Header css class	Use this option to set the "current" page's css class name in your skin or portal css file. The Header current page css class is used to highlight the currently displayed page, if the current page is being drawn as a menu header. The default value is blank (empty string). If you are using the SideMenu as a skin object, the property name for this option is "CurrentHeaderCssClass".
Current Item css class	Use this option to set the "current" page's css class name in your skin or portal css file. The Item current page css class is used to highlight the currently displayed page, if the current page is being drawn as a menu item. The default value is blank (empty string). If you are using the SideMenu as a skin object, the property name for this option is "CurrentItemCssClass".
Levels	Use this option to set number of child levels to display, or leave the setting as blank or zero to show all levels. If you are using the SideMenu as a skin object, the property name for this option is "Levels".
Disregard Hidden Flag	Show hidden tabs.  Normally, hidden tabs are not displayed. If you are using the SideMenu as a skin object, the property name for this option is "IgnoreHidden".
Disregard Disabled Flag	Normally the SideMenu uses disabled property for menu headings:  If the page is disabled, the menu header is drawn as static text (that is, clicking on the menu header has no effect).  If the page is not disabled, the menu header is drawn as a hyperlink. If you are using the SideMenu as a skin object, the property name for this option is "IgnoreDisabled".
Render seperator line between menu headers	Switch on/off drawing of the seperator line ("<HR>") after each group of menu items. If you are using the SideMenu as a skin object, the property name for this option is "DrawSeperator".
Render seperator line at the end of the menu	Switch on/off drawing of the seperator line ("<HR>") at the end of the menu. If you are using the SideMenu as a skin object, the property name for this option is "DrawTrailingHR".
Append page level to classname	Adds the relative page level to the class name.  Menu headers have the class names MenuHeader0, MenuHeader1 and so on, and the MenuItems have the classname MenuItem0, MenuItem1 and so on (the base class names are defined by the Header css class and Item css class).  Use this option with CSS stylesheets to render different child levels differently (for example, to display a menu with indented child/grandchild tabs). The level number that is added to the class name is relative to root page's levels for both items and headers. Example: Vegetables (class=MenuHdr0) Carrots (class=MenuItem1) Potatoes (class=MenuItem1) Fruit (class=MenuHdr0) Apples (class=MenuItem1) Citrus (class=MenuHdr1) Oranges (class=MenuItem2) Lemons (class=MenuItem2) Bread (class=MenuItem0) If you are using the SideMenu as a skin object, the property name for this option is "AppendLevelToClass".
Display page Name instead of Title	Displays the page's Name property rather than using the Title property. If you are using the SideMenu as a skin object, the property name for this option is "UseName".
Disable Javascript	Turns off ALL Javascript rendering - This option is for users who want to render a menu that does not require Javascript. No mouseover commands are executed, so the Highlight CSS class has no effect. If you are using the SideMenu as a skin object, the property name for this option is "DisableJavascript".
Show Icons	Displays the page's icon to the right of the menu item or header. If you are using the SideMenu as a skin object, the property name for this option is "ShowIcons".
Show Description	Renders the page's description beneath the page name (or title), if a description has been set for the page. The page is rendered with CLASS= cssclassDescription, where cssclass is the header or item css class used for the page.

ID Attributes
Each menu item (and header) is tagged with an ID attribute, in the form "invsidemenu-tabname", where tabname is the name of the page with spaces and illegal characters filtered out (if you are having trouble identifying a menu item's ID, use View Source in your browser to determine what ID is being used).  You can use the ID in your CSS to specify a special style for specific menu items.  For example, the CSS to draw a page named "About" in yellow text is:

  #invsidemenu-About {color: yellow}

Sample CSS
Add CSS code to your existing skin's skin.css or portal.css file.

Using SideMenu as a skin object
The Inventua SideMenu is installed as both a module and a skin object automatically when you install it using the DNN file manager. Add the SideMenu to your portal skin by including a [INVSIDEMENU] token. You can set the properties of the control using a skin.xml file as documented in the DNN Skinning Guide, Appendix B. The "Configuration Options" section above describes the available properties.

For example, to configure the SideMenu to display the child items of page 10, use the following xml in yourskin.xml:

Using QueryString items to control the SideMenu
If you pass querystring values matching SideMenu attribute names to a page, the SideMenu will use the values you pass.  For example, you could use the URL http://yoursite.com?RootTab=6 to display the menu using page number 6 as the root page.