MenuComponent Class

MenuViewComponent - ViewComponent to generate a multi-level "drop-down" menu, from a SiteMap. public class MenuComponent

Remarks

ViewComponent to generate a multi-level "drop-down" menu, from a SiteMap.

Features:

Works with jQuery or prototype/scriptaculous.
Degrades gracefully in absence of javascript.
Uses simple Html (UL/LI) for easy styling with CSS.
Degrades gracefully in absence of CSS.
Works using ASP.NET standard web.sitemap provider.
Allows hiding menu items based on ASP.NET membership roles providers..

Menu VC is a line component which has eight optional parameters.

Section	Description
Id	string, optional. Unique identifer for this control. Defaults to a random string.
SiteMapFile	The site map file String, Optional, defaults to "~/web.sitemap"
Provider	A SiteMapProvider that is associated with the ViewComponent. You will generally not need to set this. It is normally set by setting the SiteMapProvider property; or, if that's not set, to the default specified in the web.config; or, to the file specified by the SiteMapFile property; or, to the web.sitemap file.
SiteMapProvider	The name of the SiteMapProvider used to render the site navigation control.
cssClass	string, optional. CSS Class assigned to menu. Defaults to "Menu".
JSLibrary	string, optional. Specifes which Javascript library to use. Presently only "prototype" and "jquery" are implemented. Defaults to value in jslibraries.xml, if present, or "prototype". May also be set to "none" in which case, a static fully-expanded menu is created.
Direction	string, optional. Specifes how the menu should appear, either "horizontal" or "vertical" Defaults "vertical". Setting to "horizontal" will have no effect unless InlineStyles is true.
InlineStyles	boolean, optional. Specifes whether (if true) required CSS style attrbutes should be added to the Html elements., or (if false), they are to be added manually via a stylesheet. Defaults to true. Has no effect when Direction is vertical. Unless properly styled, menus will appear vertically (regardless of Direction parameter) See below for needed CSS attributes.

CSS Styling
Several CSS classes are added to various elements to aid in CS styling of the menu.

MenuFrame - On the topmost UL element.
SubMenu - On each nested UL element.
MenuItem - On each LI element on all levels.
collapsed - On initially collapsed elements.

For a horizontal menu, the VC will automatically insert the needed CSS styles, unless InlineStyles is set to false, in which case, you will have to add the styling manually:

.MenuFrame li
{
float:left;
}
.SubMenu li
{
float: none;
}

You will also probably want to use CSS to add a minimum width. Set in on the .MenuItem class.

Known Issues

1. jQuery method fails in mixed jQuery/Prototype environments.

2. prototype method has an odd visual effect.

It's possibly that both of these are the result of using scriptocolous v1.7.1 (MR standard) which is said to be rather buggy, however, little research into this has been done.

TODO

1. Expand to a block component, to allow templates for menu items.

2. Add methods for other JS frameworks.

Page Operations

Browse Space

MenuComponent Class

Remarks