A common way of specifying the structure of skmMenu is to bind an XML document to the menu control. The XML document's root element is <menu>. <menu> is comprised of a variable number of <menuItem> element that is a child of <menu> is a top-level menu item.
<menu>
<menuItem>
... Menu Item 1 ...
</menuItem>
<menuItem>
... Menu Item 2 ...
</menuItem>
...
</menu>
Each <menuItem> can contain a variable number of inner elenets that specify their properties. These properties correspond to properties in the MenuItem class. (See the online documentation for a full list of the MenuItem class's properties.) The following table lists the elements, what property they correspond to, and an example of use in the XML file. (Remember that XML is case-sensitive!)
| XML Element | Corresponding Property | Example |
|---|---|---|
| <text> | Text | <text>About</text> |
| <url> | Url | <url>http://ScottOnWriting.NET</url> |
| <target> | Target | <target>_blank</target> |
| <image> | Image | <image>/images/menu.gif</image> |
| <imagealttext> | ImageAltText | <imagealttext>Alternate text for the image...</imagealttext> |
| <commandname> | CommandName | <commandname>Delete</commandname> |
| <javascriptcommand> | JavaScriptCommand | <javascriptcommand>foobar</javascriptcommand> |
| <tooltip> | ToolTip | <tooltip>Learn about the people behind skmMenu!</tooltip> |
| <cssclass> | CssClass | <cssclass>silverClass</cssclass> |
| <mouseovercssclass> | MouseOverCssClass | <mouseovercssclass>silverClass</mouseovercssclass> |
| <mouseupcssclass> | MouseUpCssClass | <mouseupcssclass>silverClass</mouseupcssclass> |
| <mousedowncssclass> | MouseDownCssClass | <mousedowncssclass>silverClass</mousedowncssclass> |
| <mouseoverimage> | MouseOverImage | <mouseoverimage>over.jpg</mouseoverimage> |
| <mouseupimage> | MouseUpImage | <mouseupimage>up.jpg</mouseupimage> |
| <resolveurl> | ResolveUrl | Can only be: <resolveurl>true</resolveurl> or <resolveurl>false</resolveurl> |
| <enabled> | Enabled | Can only be: <enabled>true</enabled> or <enabled>false</enabled> |
| <visible> | Visible | Can only be: <visible>true</visible> or <visible>false</visible> |
| <leftimage> | LeftImage | <leftimage>someImage.png</leftimage> |
| <rightimage> | RightImage | <rightimage>someImage.png</rightimage> |
| <rightimageleftpadding> | RightImageLeftPadding | <rightimageleftpadding>Convertable to Unit</rightimageleftpadding> |
| <leftimagerightpadding> | LeftImageRightPadding | <leftimagerightpadding>Convertable to Unit</leftimagerightpadding> |
| <rightimagealign> | RightImageAlign | <rightimagealign>Convertable to ImageAlign</rightimagealign> |
| <leftimagealign> | LeftImageAlign | <leftimagealign>Convertable to ImageAlign</leftimagealign> |
| <horizontalalign> | HorizontalAlign | <horizontalalign>Convertable to HorizontalAlign</horizontalalign> |
| <verticalalign> | VerticalAlign | <verticalalign>Convertable to VerticalAlign</verticalalign> |
| <width> | Width | <width>Convertable to Unit</width> |
| <height> | Height | <height>Convertable to Unit</height> |
| <roles> | Roles | <roles>comma-delimited list of roles</roles> I.e.: <roles>dev,test,manager</roles> Added in skmMenu Version 2.2. |
| <backcolor> | BackColor | <backcolor>color name</backcolor> Added in skmMenu Version 2.2. |
| <bordercolor> | BorderColor | <bordercolor>color name</bordercolor> Added in skmMenu Version 2.2. |
| <borderwidth> | BorderWidth | <borderwidth>Convertable to Unit</borderwidth> Added in skmMenu Version 2.2. |
In addition to these properties, the <menuItem> element can contain a <subMenu> element. The <subMenu> element can then contain another variable number of <menuItem> elements. For example, to display a menu with the following structure:
File |--- New |--- Close Edit |--- Copy |--- Paste
We could use the following XML:
<menu> <menuItem> <text>File</text> <subMenu> <menuItem> <text>New</text> </menuItem> <menuItem> <text>Close</text> </menuItem> </subMenu> </menuItem> <menuItem> <text>Edit</text> <subMenu> <menuItem> <text>Copy</text> </menuItem> <menuItem> <text>Paste</text> </menuItem> </subMenu> </menuItem> </menu>
<menuSpacer> Element Added with skmMenu Version 2.2
As of skmMenu Version 2.2, a <menuSpacer> element has been
added to the schema. A <menuSpacer> element can appear
wherever <menuItem> elements can appear, and simply adds a
spacer to the menu. The <menuSpacer> element has three child
elements (all optional):
<spacermarkup> - specifies the HTML to use to render the
spacer<height> - specifies the height of the spacer<cssclass> - specifies a CSS class for the spacer
An example of using menu spacers can be found at:
Spacer.aspx. You can see an example XML file using the <menuSpacer>
element at: SpacerXML.xml.
Examples of Valid XML Files If you learn best by seeing XML files in action, check out the XML files that are used to build up the menus on this Web site: