Spacer Demo

This demo illustrates using spacer elements in a menu bound from an XML file. A spacer can contain three properties:

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

The File menu uses an <hr noshade /> for its spacer. The Edit menu uses spacers with a height of 10px. The About menu uses a spacer with the CSS class set to spacer. The spacer is given by:

<style type="text/css">
  .spacer { border-top-width: thick; border-top-style: dotted; border-top-color: black; }			
</style>

View the XML file bound to the DataGrid, SpacerXML.xml...

File

Edit

Help

Source Code

HTML Portion:


											
<%@ Register TagPrefix="cc1" Namespace="skmMenu" Assembly="skmMenu" %>
<cc1:Menu id="Menu1" runat="server" Font-Names="Microsoft Sans Serif" Font-Size="9.5pt" BackColor="#E0E0E0"
	Cursor="Pointer" ItemSpacing="0" ItemPadding="5" HighlightTopMenu="False" Layout="Horizontal"
	ScriptPath="~/skmMenu.js">
	<SelectedMenuItemStyle BackColor="#FFC080"></SelectedMenuItemStyle>
</cc1:Menu>

Code-Behind Code:


											
private void Page_Load(object sender, System.EventArgs e)
{
	Menu1.DataSource = Server.MapPath("SpacerXML.xml");
	Menu1.DataBind();
}