Inventua SideMenu for DotNetNuke

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.

Try Before You Buy
All of Inventua's DNN modules are available on a try before you buy basis. You can download them freely from Inventua, and try them out for as long as you like. If you are happy with the product, you can buy it at SnowCovered.

Installation
The installation zip file is configured as a DotNetNuke Private Assembly. To install Inventua DNN SideMenu to your DNN portal, log in as the DNN host user "host" and use the DNN Module Definitions page to upload the module.

Compatibility
This module has versions for DNN version 2.1.2., DNN 3/4 and 5. 

Microsoft Windows: Internet Explorer 6, Firefox 1.0, Mozilla 1.6
Apple OS X: Safari 1.2.3, Mozilla 1.6, Netscape 7.1, Opera 6.0.3.


Compatible with Apollo PageLocalization and DSLocalizator localization Modules
Inventua SideMenu is compatible with the PageLocalization module from Apollo Software Development. Use the PageLocalization module to enhance the localization capabilities of DNN. The PageLocalization module translates the names of your pages into any language your portal supports.  The SideMenu has also been tested successfully with the DSLocalizator module to display localized page names dynamically.

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".
Treat top level as header Sets the sidemenu to render top level (parent='none') pages as using the Header CSS class, regardless of whether the page has child pages.  If you are using the SideMenu as a skin object, the property name for this option is "TreatTopLevelAsHeader".
Current sub-tree only Renders the top level of menus and the current page's sub-tree. This provides the effect of an expanding menu, which is more effective than showing all pages at once on large sites with many pages.  If you are using the SideMenu as a skin object, the property name for this option is "CurrentSubTreeOnly".
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.

.MenuHdr
{
  font-size: 10pt; padding-left: 10px; font-weight: bold; padding-bottom: 2px;
  background-color: #f1f1f1; padding-top: 2px; cursor: default;
}
.MenuItem, .MenuItemMouseOver, .MenuItem HR
{
  font-size: 8pt; padding-left: 20px; font-weight: normal; padding-bottom: 2px;
  background-color: #f1f1f1; padding-top: 2px;
}
.MenuItem A, .MenuItem A:Active, .MenuItem A:Hover, .MenuItem A:Visited,
.MenuItem A:Link, .MenuItemMouseOver A, .MenuItemMouseOver A:Active,
.MenuItemMouseOver A:Hover, .MenuItemMouseOver A:Visited, .MenuItemMouseOver
  A:Link, .MenuHdr A, .MenuHdr A:Active, .MenuHdr A:Hover, .MenuHdr A:Visited,
.MenuHdr A:Link
{
  text-decoration: none; color: black; width: 100%; padding-top: 1px;
  padding-bottom: 1px; cursor: default; cursor: pointer;
}
.MenuItemMouseOver
{
  background-color: #cccccc!Important;
}

 

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:


<Objects>
  <Object>
    <Token>[INVSIDEMENU]</Token>
    <Settings>
      <Setting>
        <Name>Source</Name>
        <Value>10</Value>
      </Setting>
    </Settings>
  </Object>
</Objects>

 

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?Source=6 to display the menu using page number 6 as the root page.

Conditions of use
Permission is hereby granted, on a Try-before-you-buy basis, to any person obtaining a copy of the Inventua DNN SideMenu module and associated documentation files (the "Software"), to use the Software without restriction, including the rights to use, copy or otherwise use the software for commerical or non-commercial use, but excluding any rights to reverse engineer or remove Inventua logos and licensing information. This permission does not imply or otherwise grant any rights to any other Inventua intellectual property including but not limited to logos, trademarks, documentation and software products.

THIS SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

This help file, the accompanying software and other materials supplied with the software are Copyright © Inventua, 2004-2008. All Rights Reserved.

About DotNetNuke
The Inventua DNN SideMenu Module is a DotNetNuke portal module. For more information on DotNetNuke, visit http://www.dotnetnuke.com.

About Inventua
Inventua provides software tools for information technology organisations that facilitate and maximise synergy and cohesion between development, support, marketing and management teams, improves software product quality and helps information technology organisations to provide great products and great support. Visit Inventua on the web at http://www.inventua.com