ComponentArt

Adding a ComponentArt menu to a web site is something that I have to do frequently, here is template code to do that quickly

Menu code:

<ComponentArt:Menu id="Menu1"
    ExpandDelay="50"
    DefaultGroupCssClass="Group"
    SiteMapXmlFile="menuData.xml"
    ImagesBaseUrl="images/"
    DefaultItemLookID="DefaultItemLook"
    EnableViewState="false" Width="100%"
    runat="server">
    <ItemLooks>
        <ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="Item" 
            HoverCssClass="ItemH" ExpandedCssClass="ItemExp" LabelPaddingLeft="5" 
            LabelPaddingRight="15" LabelPaddingTop="2" LabelPaddingBottom="2" 
            RightIconUrl="arrow.gif" RightIconWidth="15" RightIconHeight="10" 
            RightIconVisibility="WhenExpandable" />
        <ComponentArt:ItemLook LookID="EdgeLook" CssClass="ItemEdge" />
        <ComponentArt:ItemLook LookID="BreakItem" ImageUrl="break.gif" ImageHeight="1" ImageWidth="100%" />
    </ItemLooks>
</ComponentArt:Menu>

Create MenuData.xml like this:

<SiteMap>
 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Home" NavigateUrl="Default.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Photo Album" NavigateUrl="PhotoAlbums.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text="Photo Caption Contest" NavigateUrl="PhotoCaptionContest.aspx"  />


 <item text=" " width="5px" LookID="EdgeLook" />
 <item text=" " width="100%" />
</SiteMap>

Then add the .css file:

.Group
{
 border:solid 1px black; 


 background-repeat:repeat;
 background-position:left;
 padding-bottom: 0px;
 padding-top:0px;
 padding-left:2px;
 padding-right: 2px; 
 text-align: center;
 height:22px; 
 vertical-align:middle;
 font-size:12px; 
 color:white;


}
.test { }


.ItemEdge
{
 font-family: verdana;
 background-image :url(/images/menuBG2.gif);
 border:solid 0px black; 
 cursor:pointer;
}
.Item
{
 font-family: verdana;
 background-image :url(/images/menuBG.gif);
 border:solid 0px black; 
 cursor:pointer;
}


.ItemH
{
 font-family: verdana; 
 background-image :url(/images/menuBG.gif);
 color:silver; 
 border:solid 0px black; 
 cursor:pointer;
}


.ItemExp
{
  color:black; 
  font-size:12px; 
  border:solid 0px black; 
  cursor:pointer;
}