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;
}