ComponentArt Website's Top Menu Example

Answered (Verified) This post has 4 verified answers and 21 replies

Top 200 Contributor
Posts: 34
OcalaWeb Posted: Wed Nov 4, 2009 @ 5:39 AM
Does support have a downloadable example of the menu style and function that CA currently uses on their website? (The black strip across the top of the page that drops down images on one side and links on the other?

TT

Answered (Verified) Verified Answers

Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Wed Nov 4, 2009 @ 7:44 AM
Verified by Chris

This sample is done pretty easily with client templates, please check the code below or click the link below this title.

 

WebForm1.aspx

<%@ Page %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Core Menu Features</title>
<link href="menuStyle.css" type="text/css" rel="stylesheet" />
<style>
a,a:link { color:#dd3409;text-decoration:none; }
a:visited { color:#a31515;text-decoration:none; }
a:visited:hover { color:#a31515;text-decoration:underline; }
a:visited:active { color:#f30;text-decoration:underline; }
a:hover { color:#dd3409;text-decoration:underline; }
a:active { color:#f30;text-decoration:underline; }
a:focus,a:active { outline:none; }
</style>
</head>

<body>
<form id="Form1" method="post" runat="server">

<div class="DemoArea">

<ComponentArt:Menu id="Menu1"
Orientation="Horizontal"
CssClass="TopGroup"
DefaultGroupCssClass="MenuGroup"
DefaultSubGroupExpandOffsetX="-10"
DefaultSubGroupExpandOffsetY="-5"
SiteMapXmlFile="menuData.xml"
TopGroupItemSpacing="0"
DefaultGroupItemSpacing="2"
ScrollingEnabled="true"
ScrollUpLookId="ScrollUpItemLook"
ScrollDownLookId="ScrollDownItemLook"
ImagesBaseUrl="images/"
ExpandDelay="100"
runat="server">
<ItemLooks>
<ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" LabelPaddingLeft="15" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemExpanded" ActiveCssClass="MenuItemActive" LabelPaddingLeft="18" LabelPaddingRight="12" LabelPaddingTop="3" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="ExpandableItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemExpanded" RightIconUrl="arrow.gif" RightIconWidth="20" LabelPaddingLeft="18" LabelPaddingRight="12" LabelPaddingTop="3" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="SpacerItemLook" CssClass="TopMenuItem" LabelPaddingLeft="15" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="SetMarginsItemLook" CssClass="MenuItem" HoverCssClass="SetMarginsHover" ActiveCssClass="SetMarginsActive" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="CalendarItemLook" CssClass="MenuItem" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="ColorPickerItemLook" CssClass="MenuItem" LabelPaddingLeft="5" LabelPaddingRight="5" LabelPaddingTop="5" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="ScrollUpItemLook" ImageUrl="scroll_up.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA"/>
<ComponentArt:ItemLook LookID="ScrollDownItemLook" ImageUrl="scroll_down.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA"/>
<ComponentArt:ItemLook LookID="BreakItem" ImageUrl="break.gif" CssClass="MenuBreak" ImageHeight="2" ImageWidth="100%" />
</ItemLooks>
<ClientTemplates>
<ComponentArt:ClientTemplate Id="linkTemplate">
<table>
<tr>
<td Class="MenuItem">THIS IS<br />ITEM ONE</td>
<td>
<ul>
<li><a href="/products/soaui/" class="idx">Overview</a></li>
<li><a href="/products/soaui/demos.aspx" onclick="this.blur();" class="dem">Live Demos</a></li>
<li><a href="/products/roadmap.aspx" onclick="this.blur();" class="map">Product Roadmap</a></li>
<li><a href="/products/soaui/white-paper.aspx" onclick="this.blur();" class="wht">White Paper</a></li>
</ul>
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
</ClientTemplates>
</ComponentArt:Menu>

<br /><br /><br />
<span class="hint">Expand various menu groups to see examples of nested ASP.NET <br/>server or user controls, client templates, and scrolling groups.</span>
<br /><br /><br /><br /><br />


<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="250" cellpadding="0" cellspacing="5" border="0">
<tr>
<td colspan="2" class="MainText"><span style="font-weight:bold;text-decoration:underline;">Expand Properties</span>: <br /><br /></td>
</tr>
<tr>
<td class="MainText">ExpandSlide: </td>
<td class="MainText">
<select style="width:130px;" id="selExpandSlide">
<option value="0">None</option>
<option value="3">Constant</option>
<option value="2" selected="selected">Decelerate</option>
<option value="1">Accelerate</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">ExpandTransition: </td>
<td class="MainText">
<select style="width:130px;" id="selExpandTransition">
<option value="0">None</option>
<option value="3">Fade</option>
<option value="2">Dissolve</option>
<option value="16">Pixelate</option>
<option value="19">WipeDown</option>
<option value="20">WipeLeft</option>
<option value="21">WipeRight</option>
<option value="22">WipeUp</option>
<option value="4">IrisCircle</option>
<option value="5">IrisCircleIn</option>
<option value="6">IrisCross</option>
<option value="7">IrisCrossIn</option>
<option value="8">IrisDiamond</option>
<option value="9">IrisDiamondIn</option>
<option value="10">IrisPlus</option>
<option value="11">IrisPlusIn</option>
<option value="12">IrisSquare</option>
<option value="13">IrisSquareIn</option>
<option value="14">IrisStar</option>
<option value="15">IrisStarIn</option>
<option value="17">Wheel2</option>
<option value="18">Wheel8</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">ExpandDuration: </td>
<td class="MainText">
<input type="text" id="txtExpandDuration" value="300" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">ExpandDelay: </td>
<td class="MainText">
<input type="text" id="txtExpandDelay" value="100" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">ExpandOnClick</td>
<td class="MainText">
<input type="checkbox" id="chkExpandOnClick" />
</td>
</tr>
</table>
</td>
<td>&nbsp;&nbsp;</td>
<td>
<table width="250" cellpadding="0" cellspacing="5" border="0">
<tr>
<td colspan="2" class="MainText"><span style="font-weight:bold;text-decoration:underline;">Collapse Properties</span>: <br /><br /></td>
</tr>
<tr>
<td class="MainText">CollapseSlide: </td>
<td class="MainText">
<select style="width:130px;" id="selCollapseSlide">
<option value="0">None</option>
<option value="3">Constant</option>
<option value="2" selected="selected">Decelerate</option>
<option value="1">Accelerate</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">CollapseTransition: </td>
<td class="MainText">
<select style="width:130px;" id="selCollapseTransition">
<option value="0">None</option>
<option value="3">Fade</option>
<option value="2">Dissolve</option>
<option value="16">Pixelate</option>
<option value="19">WipeDown</option>
<option value="20">WipeLeft</option>
<option value="21">WipeRight</option>
<option value="22">WipeUp</option>
<option value="4">IrisCircle</option>
<option value="5">IrisCircleIn</option>
<option value="6">IrisCross</option>
<option value="7">IrisCrossIn</option>
<option value="8">IrisDiamond</option>
<option value="9">IrisDiamondIn</option>
<option value="10">IrisPlus</option>
<option value="11">IrisPlusIn</option>
<option value="12">IrisSquare</option>
<option value="13">IrisSquareIn</option>
<option value="14">IrisStar</option>
<option value="15">IrisStarIn</option>
<option value="17">Wheel2</option>
<option value="18">Wheel8</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">CollapseDuration: </td>
<td class="MainText">
<input type="text" id="txtCollapseDuration" value="200" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">CollapseDelay: </td>
<td class="MainText">
<input type="text" id="txtCollapseDelay" value="500" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">CascadeCollapse</td>
<td class="MainText">
<input type="checkbox" id="chkCascadeCollapse" checked="checked" />
</td>
</tr>
</table>

</td>
</tr>
</table>
<br/>
<input type="button" onclick="updateMenu();" value="Apply Changes" />
</div>

<%-- image preload (not necessary but it improves page performance) --%>
<div style="position:absolute;top:0px;left:0px;visibility:hidden;">
<img src="images/margins_custom.gif" width="0" height="0" alt="" />
<img src="images/margins_narrow.gif" width="0" height="0" alt="" />
<img src="images/margins_normal.gif" width="0" height="0" alt="" />
<img src="images/margins_wide.gif" width="0" height="0" alt="" />
</div>

</form>
</body>
</html>
menuStyle.css

.TopGroup
{
background-color:#000;
background-image: url(images/top_groupBg.gif);
border:1px solid #000;
cursor:default;
}

.MenuGroup
{
background-color:#f6f6f6;
border:1px solid #666;
cursor:default;
}

.TopMenuItem
{
color:white;
font-family:tahoma;
font-size:12px;
font-weight: bold;
padding:20px;
cursor:default;
}

.TopMenuItemHover
{
color:white;
background-image: url(images/top_itemHoverBg.gif);
background-color:#b9b9b9;
font-family:tahoma;
font-size:12px;
font-weight: bold;
cursor:default;
}

.MenuItem {
border: 1px solid #f6f6f6;
color:#666;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemHover, .MenuItem:Hover {
margin:0;
background:#fff url("images/itemHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemExpanded
{
margin:0;
background:#fff url("images/itemHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemActive
{
margin:0;
background:#fff url("images/itemActiveBg.gif") repeat-x;
color: #454545;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuBreak
{
background-color: silver;
width:100%;
height:2px;
}


.SetMarginsHover {
margin:0;
background:#fff url("images/setMarginsHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}


.SetMarginsActive {
margin:0;
background:#fff url("images/setMarginsActiveBg.gif") repeat-x;
color: #454545;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
font-family:tahoma;
font-size:11px;
cursor:default;
}


.ScrollItem
{
background-color:#eee;
color:#666;
border: 1px solid #ccc;
text-align:center;
cursor:default;
}

.ScrollItemH
{
background-color:#eee;
color:#000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
text-align:center;
cursor:default;
}

.ScrollItemA
{
color: #454545;
background-color:#fff;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
text-align:center;
cursor:default;
}
menuData.xml

<SiteMap>
<item Text="File" LookId="TopItemLook">
<item ClientTemplateId="linkTemplate" />
</item>
<item Width="415" LookId="SpacerItemLook" />
</SiteMap>

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Fri Nov 6, 2009 @ 9:41 AM
Verified by Chris

 <item Text="Client Templates" LookId="ExpandableItemLook">
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_custom.gif" SettingName="Last Custom Setting" Top="1" Bottom="1" Left="1.25" Right="1.25" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_normal.gif" SettingName="Normal" Top="1" Bottom="1" Left="0.75" Right="0.75" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_narrow.gif" SettingName="Narrow" Top="0.25" Bottom="0.25" Left="0.25" Right="0.25" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_wide.gif" SettingName="Wide" Top="1" Bottom="1" Left="2" Right="2" />
      <item LookId="BreakItem" />
      <item Text="Advanced..." />
    </item>

 

Client Template

<ClientTemplates>
      <ComponentArt:ClientTemplate Id="SetMarginsTemplate">
        <table cellpadding="3" cellspacing="0">
        <tr>
          <td><img src="images/## DataItem.GetProperty('MarginImage') ##" width="37" height="47" alt="" /></td>
          <td>
            <b>## DataItem.GetProperty('SettingName') ##</b>
            <table cellpadding="2" cellspacing="0">
            <tr>
              <td>Top:</td>
              <td><b>## DataItem.GetProperty('Top') ##"</b></td>
              <td><img src="images/spacer.gif" width="20" height="10" alt="" /></td>
              <td>Right:</td>
              <td><b>## DataItem.GetProperty('Right') ##"</b></td>
            </tr>
            <tr>
              <td>Bottom:</td>
              <td><b>## DataItem.GetProperty('Bottom') ##"</b></td>
              <td><img src="images/spacer.gif" width="20" height="10" alt="" /></td>
              <td>Left:</td>
              <td><b>## DataItem.GetProperty('Left') ##"</b></td>
            </tr>
            </table>
          </td>
        </tr>
        </table>
      </ComponentArt:ClientTemplate>
    </ClientTemplates>
This above sample code (which is found in the core features sample), you can see how we use the extra properties in that menu item to display in client templates.

 

Hope this helps.

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Mon Dec 7, 2009 @ 8:28 AM
Verified by OcalaWeb

Why don't you just assign a navigateUrl?

 

<?xml version="1.0" encoding="utf-8" ?>
<sitemap>
  <item Text="Not Linked" ToolTip="Not Linked" LookId="TopItemLook">
    <item Text="Not linked" ClientTemplateId="ExpandItemTemplate">
      <item Text="Linked Item" ToolTip="This is a linked Item" ClientTemplateId="ItemTemplate" navigateUrl="http://www.asp.net" />
    </item> 
</sitemap>

Hope this helps.

 

Cheers,

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Wed May 12, 2010 @ 6:32 AM
Verified by Chris

If you are referring to our 2010.1 Demo Examples, the core menu features sample uses our new theming technology.

 

That being said, you can find the images for the themes under the AspNetAjaxDemo\common\themes folder

 

Assuming default location

 

64-bit Windows

C:\Program Files (x86)\ComponentArt\UI Framework 2010.1 for .NET\live_demos\aspnetajax\Common\themes\20101

 

32-bit Windows

C:\Program Files \ComponentArt\UI Framework 2010.1 for .NET\live_demos\aspnetajax\Common\themes\20101

 

In that folder, you will be able to see all the css / images for each theme.

 

Hope this helps.

 

Cheers,

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.

All Replies

Top 200 Contributor
Posts: 34
OcalaWeb Posted: Wed Nov 4, 2009 @ 5:59 AM
A zip file with all the graphics would be nice, so I can reverse engineer it ... I saw the example that was given in another similar post but I don't quite understand how you got the complete look from that example... I'm a noob ... :)
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Wed Nov 4, 2009 @ 7:44 AM
Verified by Chris

This sample is done pretty easily with client templates, please check the code below or click the link below this title.

 

WebForm1.aspx

<%@ Page %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Core Menu Features</title>
<link href="menuStyle.css" type="text/css" rel="stylesheet" />
<style>
a,a:link { color:#dd3409;text-decoration:none; }
a:visited { color:#a31515;text-decoration:none; }
a:visited:hover { color:#a31515;text-decoration:underline; }
a:visited:active { color:#f30;text-decoration:underline; }
a:hover { color:#dd3409;text-decoration:underline; }
a:active { color:#f30;text-decoration:underline; }
a:focus,a:active { outline:none; }
</style>
</head>

<body>
<form id="Form1" method="post" runat="server">

<div class="DemoArea">

<ComponentArt:Menu id="Menu1"
Orientation="Horizontal"
CssClass="TopGroup"
DefaultGroupCssClass="MenuGroup"
DefaultSubGroupExpandOffsetX="-10"
DefaultSubGroupExpandOffsetY="-5"
SiteMapXmlFile="menuData.xml"
TopGroupItemSpacing="0"
DefaultGroupItemSpacing="2"
ScrollingEnabled="true"
ScrollUpLookId="ScrollUpItemLook"
ScrollDownLookId="ScrollDownItemLook"
ImagesBaseUrl="images/"
ExpandDelay="100"
runat="server">
<ItemLooks>
<ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopMenuItem" HoverCssClass="TopMenuItemHover" LabelPaddingLeft="15" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemExpanded" ActiveCssClass="MenuItemActive" LabelPaddingLeft="18" LabelPaddingRight="12" LabelPaddingTop="3" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="ExpandableItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemExpanded" RightIconUrl="arrow.gif" RightIconWidth="20" LabelPaddingLeft="18" LabelPaddingRight="12" LabelPaddingTop="3" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="SpacerItemLook" CssClass="TopMenuItem" LabelPaddingLeft="15" LabelPaddingRight="15" LabelPaddingTop="4" LabelPaddingBottom="4" />
<ComponentArt:ItemLook LookID="SetMarginsItemLook" CssClass="MenuItem" HoverCssClass="SetMarginsHover" ActiveCssClass="SetMarginsActive" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="CalendarItemLook" CssClass="MenuItem" LabelPaddingLeft="0" LabelPaddingRight="0" LabelPaddingTop="0" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="ColorPickerItemLook" CssClass="MenuItem" LabelPaddingLeft="5" LabelPaddingRight="5" LabelPaddingTop="5" LabelPaddingBottom="0" />
<ComponentArt:ItemLook LookID="ScrollUpItemLook" ImageUrl="scroll_up.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA"/>
<ComponentArt:ItemLook LookID="ScrollDownItemLook" ImageUrl="scroll_down.gif" ImageWidth="15" ImageHeight="13" CssClass="ScrollItem" HoverCssClass="ScrollItemH" ActiveCssClass="ScrollItemA"/>
<ComponentArt:ItemLook LookID="BreakItem" ImageUrl="break.gif" CssClass="MenuBreak" ImageHeight="2" ImageWidth="100%" />
</ItemLooks>
<ClientTemplates>
<ComponentArt:ClientTemplate Id="linkTemplate">
<table>
<tr>
<td Class="MenuItem">THIS IS<br />ITEM ONE</td>
<td>
<ul>
<li><a href="/products/soaui/" class="idx">Overview</a></li>
<li><a href="/products/soaui/demos.aspx" onclick="this.blur();" class="dem">Live Demos</a></li>
<li><a href="/products/roadmap.aspx" onclick="this.blur();" class="map">Product Roadmap</a></li>
<li><a href="/products/soaui/white-paper.aspx" onclick="this.blur();" class="wht">White Paper</a></li>
</ul>
</td>
</tr>
</table>
</ComponentArt:ClientTemplate>
</ClientTemplates>
</ComponentArt:Menu>

<br /><br /><br />
<span class="hint">Expand various menu groups to see examples of nested ASP.NET <br/>server or user controls, client templates, and scrolling groups.</span>
<br /><br /><br /><br /><br />


<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table width="250" cellpadding="0" cellspacing="5" border="0">
<tr>
<td colspan="2" class="MainText"><span style="font-weight:bold;text-decoration:underline;">Expand Properties</span>: <br /><br /></td>
</tr>
<tr>
<td class="MainText">ExpandSlide: </td>
<td class="MainText">
<select style="width:130px;" id="selExpandSlide">
<option value="0">None</option>
<option value="3">Constant</option>
<option value="2" selected="selected">Decelerate</option>
<option value="1">Accelerate</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">ExpandTransition: </td>
<td class="MainText">
<select style="width:130px;" id="selExpandTransition">
<option value="0">None</option>
<option value="3">Fade</option>
<option value="2">Dissolve</option>
<option value="16">Pixelate</option>
<option value="19">WipeDown</option>
<option value="20">WipeLeft</option>
<option value="21">WipeRight</option>
<option value="22">WipeUp</option>
<option value="4">IrisCircle</option>
<option value="5">IrisCircleIn</option>
<option value="6">IrisCross</option>
<option value="7">IrisCrossIn</option>
<option value="8">IrisDiamond</option>
<option value="9">IrisDiamondIn</option>
<option value="10">IrisPlus</option>
<option value="11">IrisPlusIn</option>
<option value="12">IrisSquare</option>
<option value="13">IrisSquareIn</option>
<option value="14">IrisStar</option>
<option value="15">IrisStarIn</option>
<option value="17">Wheel2</option>
<option value="18">Wheel8</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">ExpandDuration: </td>
<td class="MainText">
<input type="text" id="txtExpandDuration" value="300" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">ExpandDelay: </td>
<td class="MainText">
<input type="text" id="txtExpandDelay" value="100" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">ExpandOnClick</td>
<td class="MainText">
<input type="checkbox" id="chkExpandOnClick" />
</td>
</tr>
</table>
</td>
<td>&nbsp;&nbsp;</td>
<td>
<table width="250" cellpadding="0" cellspacing="5" border="0">
<tr>
<td colspan="2" class="MainText"><span style="font-weight:bold;text-decoration:underline;">Collapse Properties</span>: <br /><br /></td>
</tr>
<tr>
<td class="MainText">CollapseSlide: </td>
<td class="MainText">
<select style="width:130px;" id="selCollapseSlide">
<option value="0">None</option>
<option value="3">Constant</option>
<option value="2" selected="selected">Decelerate</option>
<option value="1">Accelerate</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">CollapseTransition: </td>
<td class="MainText">
<select style="width:130px;" id="selCollapseTransition">
<option value="0">None</option>
<option value="3">Fade</option>
<option value="2">Dissolve</option>
<option value="16">Pixelate</option>
<option value="19">WipeDown</option>
<option value="20">WipeLeft</option>
<option value="21">WipeRight</option>
<option value="22">WipeUp</option>
<option value="4">IrisCircle</option>
<option value="5">IrisCircleIn</option>
<option value="6">IrisCross</option>
<option value="7">IrisCrossIn</option>
<option value="8">IrisDiamond</option>
<option value="9">IrisDiamondIn</option>
<option value="10">IrisPlus</option>
<option value="11">IrisPlusIn</option>
<option value="12">IrisSquare</option>
<option value="13">IrisSquareIn</option>
<option value="14">IrisStar</option>
<option value="15">IrisStarIn</option>
<option value="17">Wheel2</option>
<option value="18">Wheel8</option>
</select>
</td>
</tr>
<tr>
<td class="MainText">CollapseDuration: </td>
<td class="MainText">
<input type="text" id="txtCollapseDuration" value="200" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">CollapseDelay: </td>
<td class="MainText">
<input type="text" id="txtCollapseDelay" value="500" style="width:40px;" />
<span style="color:gray">milliseconds</span>
</td>
</tr>
<tr>
<td class="MainText">CascadeCollapse</td>
<td class="MainText">
<input type="checkbox" id="chkCascadeCollapse" checked="checked" />
</td>
</tr>
</table>

</td>
</tr>
</table>
<br/>
<input type="button" onclick="updateMenu();" value="Apply Changes" />
</div>

<%-- image preload (not necessary but it improves page performance) --%>
<div style="position:absolute;top:0px;left:0px;visibility:hidden;">
<img src="images/margins_custom.gif" width="0" height="0" alt="" />
<img src="images/margins_narrow.gif" width="0" height="0" alt="" />
<img src="images/margins_normal.gif" width="0" height="0" alt="" />
<img src="images/margins_wide.gif" width="0" height="0" alt="" />
</div>

</form>
</body>
</html>
menuStyle.css

.TopGroup
{
background-color:#000;
background-image: url(images/top_groupBg.gif);
border:1px solid #000;
cursor:default;
}

.MenuGroup
{
background-color:#f6f6f6;
border:1px solid #666;
cursor:default;
}

.TopMenuItem
{
color:white;
font-family:tahoma;
font-size:12px;
font-weight: bold;
padding:20px;
cursor:default;
}

.TopMenuItemHover
{
color:white;
background-image: url(images/top_itemHoverBg.gif);
background-color:#b9b9b9;
font-family:tahoma;
font-size:12px;
font-weight: bold;
cursor:default;
}

.MenuItem {
border: 1px solid #f6f6f6;
color:#666;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemHover, .MenuItem:Hover {
margin:0;
background:#fff url("images/itemHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemExpanded
{
margin:0;
background:#fff url("images/itemHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuItemActive
{
margin:0;
background:#fff url("images/itemActiveBg.gif") repeat-x;
color: #454545;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
font-family:tahoma;
font-size:11px;
cursor:default;
}

.MenuBreak
{
background-color: silver;
width:100%;
height:2px;
}


.SetMarginsHover {
margin:0;
background:#fff url("images/setMarginsHoverBg.gif") repeat-x;
color: #000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
font-family:tahoma;
font-size:11px;
cursor:default;
}


.SetMarginsActive {
margin:0;
background:#fff url("images/setMarginsActiveBg.gif") repeat-x;
color: #454545;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
font-family:tahoma;
font-size:11px;
cursor:default;
}


.ScrollItem
{
background-color:#eee;
color:#666;
border: 1px solid #ccc;
text-align:center;
cursor:default;
}

.ScrollItemH
{
background-color:#eee;
color:#000;
border: 1px solid #ccc;
border-right-color:#b9b9b9;
border-bottom-color:#b9b9b9;
text-align:center;
cursor:default;
}

.ScrollItemA
{
color: #454545;
background-color:#fff;
border: 1px solid #ddd;
border-right-color:#ccc;
border-bottom-color:#ccc;
text-align:center;
cursor:default;
}
menuData.xml

<SiteMap>
<item Text="File" LookId="TopItemLook">
<item ClientTemplateId="linkTemplate" />
</item>
<item Width="415" LookId="SpacerItemLook" />
</SiteMap>

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Not Ranked
Posts: 17
flex563 Posted: Thu Nov 5, 2009 @ 12:05 PM
thank you tooooooooo much
iam interested
Flex,,,,
Top 200 Contributor
Posts: 34
OcalaWeb Posted: Fri Nov 6, 2009 @ 5:46 AM
In the end I was able to use this example and make the menu that I was envisioning and it seems to be working great.  I'm not sure how to make the xml items links at this point but I think i saw an example that may work.  I'll let you know.  I really like the way th CA controls are designed for CSS purposes.  They seem easier to work with and modify than the telerik controls that I tried, although the out of the box template designs choices were kind of cool with telerik, these seems easier to design in my opinion. 

I'll try to link my items in the menu today and let u know how it goes, if you have a quick and easy way of linking the items, feel free to post it for me! :)  I think I'm going to use an example that had some javascript in the head, not sure, i have to find it again...
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Fri Nov 6, 2009 @ 9:41 AM
Verified by Chris

 <item Text="Client Templates" LookId="ExpandableItemLook">
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_custom.gif" SettingName="Last Custom Setting" Top="1" Bottom="1" Left="1.25" Right="1.25" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_normal.gif" SettingName="Normal" Top="1" Bottom="1" Left="0.75" Right="0.75" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_narrow.gif" SettingName="Narrow" Top="0.25" Bottom="0.25" Left="0.25" Right="0.25" />
      <item ClientTemplateId="SetMarginsTemplate" LookId="SetMarginsItemLook" MarginImage="margins_wide.gif" SettingName="Wide" Top="1" Bottom="1" Left="2" Right="2" />
      <item LookId="BreakItem" />
      <item Text="Advanced..." />
    </item>

 

Client Template

<ClientTemplates>
      <ComponentArt:ClientTemplate Id="SetMarginsTemplate">
        <table cellpadding="3" cellspacing="0">
        <tr>
          <td><img src="images/## DataItem.GetProperty('MarginImage') ##" width="37" height="47" alt="" /></td>
          <td>
            <b>## DataItem.GetProperty('SettingName') ##</b>
            <table cellpadding="2" cellspacing="0">
            <tr>
              <td>Top:</td>
              <td><b>## DataItem.GetProperty('Top') ##"</b></td>
              <td><img src="images/spacer.gif" width="20" height="10" alt="" /></td>
              <td>Right:</td>
              <td><b>## DataItem.GetProperty('Right') ##"</b></td>
            </tr>
            <tr>
              <td>Bottom:</td>
              <td><b>## DataItem.GetProperty('Bottom') ##"</b></td>
              <td><img src="images/spacer.gif" width="20" height="10" alt="" /></td>
              <td>Left:</td>
              <td><b>## DataItem.GetProperty('Left') ##"</b></td>
            </tr>
            </table>
          </td>
        </tr>
        </table>
      </ComponentArt:ClientTemplate>
    </ClientTemplates>
This above sample code (which is found in the core features sample), you can see how we use the extra properties in that menu item to display in client templates.

 

Hope this helps.

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Top 200 Contributor
Posts: 34
OcalaWeb Posted: Fri Nov 6, 2009 @ 10:30 AM

I'm using the Carbon Skin example so the links would have to be done from the XML like this unless you know of a more appropriate way:

In my WebUserControl.ascx User Control:

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="WebUserControl.ascx.vb" Inherits="COOMenu_WebUserControl" %>
<%@ Register assembly="ComponentArt.Web.UI" namespace="ComponentArt.Web.UI" tagprefix="ComponentArt" %>

<script type="text/javascript">
    //<![CDATA[
    // Opens a new browser window with the specified URL
    function openWindow(url) {
        var newWin = window.open(url, 'newWin');
    }
</script>

<ComponentArt:Menu ID="Menu1" runat="server" SiteMapXmlFile="menuData.xml" CssClass="top"
    ExpandOnClick="true" DefaultGroupCssClass="mnu" DefaultItemLookId="ItemLook"
    DefaultItemTextWrap="True">
    <ItemLooks>
        <ComponentArt:ItemLook LookId="TopItemLook" CssClass="itm" HoverCssClass="itm-h"
            ActiveCssClass="itm-a" ExpandedCssClass="itm-e" />
        <ComponentArt:ItemLook LookId="ItemLook" CssClass="itm" HoverCssClass="itm-h" />
        <ComponentArt:ItemLook LookId="BreakItemLook" CssClass="br" />
    </ItemLooks>
    <ClientTemplates>
        <ComponentArt:ClientTemplate ID="ExpandItemTemplate">
            <div>
                <div class="lbl">
                    <span class="shd">## DataItem.get_text(); ##</span>
                    <span class="txt">## DataItem.get_text(); ##</span>
                </div>
                <span class="exp"></span>
            </div>
        </ComponentArt:ClientTemplate>
        <ComponentArt:ClientTemplate ID="ItemTemplate">
            <div>
                <div class="lbl">
                    <span class="shd">## DataItem.get_text(); ##</span>
                    <span class="txt">## DataItem.get_text(); ##</span>
                </div>
            </div>
        </ComponentArt:ClientTemplate>
    </ClientTemplates>
</ComponentArt:Menu>
In my menuData.xml:
<?xml version="1.0" encoding="utf-8" ?>
<sitemap>
  <item Text="Not Linked" ToolTip="Not Linked" LookId="TopItemLook">
    <item Text="Not linked" ClientTemplateId="ExpandItemTemplate">
      <item Text="Linked Item" ToolTip="This is a linked Item" ClientTemplateId="ItemTemplate" ClientSideCommand="openWindow('http://www.asp.net');" />
    </item> 
</sitemap>
Would this be the proper way to activate links from the xml file? 


Also, how would I write the js to use the same window instead of opening a new window:
<script type="text/javascript">
    //<![CDATA[
    // Opens a new browser window with the specified URL
    function openWindow(url) {
        var newWin = window.open(url, 'newWin');
    }
</script>

Is there a way to make this happen in a VB codebehind page instead?

Thanks for the help!
TT

Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Mon Dec 7, 2009 @ 8:28 AM
Verified by OcalaWeb

Why don't you just assign a navigateUrl?

 

<?xml version="1.0" encoding="utf-8" ?>
<sitemap>
  <item Text="Not Linked" ToolTip="Not Linked" LookId="TopItemLook">
    <item Text="Not linked" ClientTemplateId="ExpandItemTemplate">
      <item Text="Linked Item" ToolTip="This is a linked Item" ClientTemplateId="ItemTemplate" navigateUrl="http://www.asp.net" />
    </item> 
</sitemap>

Hope this helps.

 

Cheers,

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Top 200 Contributor
Posts: 34
OcalaWeb Posted: Mon Dec 7, 2009 @ 12:08 PM

I wish I had that answer a long time ago! I have been making it work with javascript since noone seemed to know about the simple little navigateURL  ... *Palms forehead*

Thanks Chris ... this will help me with future stuff definately!

Not Ranked
Posts: 2
mcharest1858 Posted: Wed May 12, 2010 @ 6:21 AM
Chris,

Where can I find the image resources: horizontal.png, vertical.png, static.png that were used in the demo menu example?

M
Top 10 Contributor
Posts: 1,736
Answered (Verified) Chris Posted: Wed May 12, 2010 @ 6:32 AM
Verified by Chris

If you are referring to our 2010.1 Demo Examples, the core menu features sample uses our new theming technology.

 

That being said, you can find the images for the themes under the AspNetAjaxDemo\common\themes folder

 

Assuming default location

 

64-bit Windows

C:\Program Files (x86)\ComponentArt\UI Framework 2010.1 for .NET\live_demos\aspnetajax\Common\themes\20101

 

32-bit Windows

C:\Program Files \ComponentArt\UI Framework 2010.1 for .NET\live_demos\aspnetajax\Common\themes\20101

 

In that folder, you will be able to see all the css / images for each theme.

 

Hope this helps.

 

Cheers,

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Not Ranked
Posts: 2
mcharest1858 Posted: Wed May 12, 2010 @ 7:26 AM
That is what I am looking for. Thanks.
Top 500 Contributor
Posts: 19
bbbb123 Posted: Wed Jun 30, 2010 @ 5:50 PM

Chris,

I was looking at the demos.xml file that goes with the header menu on the live-demos menu and it uses "nodes"?  I thought that the menu xml file needs to be using the <item> delimiters.  Can you explain why you choose that format and what it means?

	<Node Text="Best-of-Breed UI" ClientTemplateId="TopLevelItemTemplate" LookId="ItemBreed" SubGroupCssClass="mnu-grp-bob">
		<Node Look-CssClass="itm-bob-top" Enabled="false" />
		<Node
			Text="DataGrid"
			Description="Performance, Technical Sophistication, Enterprise Features &amp; Raw Power."
			Image="datagrid.png"
			NavigateUrl="~/best-of-breed/datagrid/default.aspx"
			ClientTemplateId="BreedTemplate"
			TextWrap="true"
			CssClass="grid"
		/>


In addition, there is a TopLevelSiteTemplate with the following code:

<ClientTemplates>
	<ComponentArt:ClientTemplate ID="TopLevelItemTemplate">
		<a href="javascript:void(0);" onclick="this.blur();">## DataItem.getProperty('Text'); ##</a>
	</ComponentArt:ClientTemplate>


What is this used for and how does it work?  I know it is to format the header for each menu, but I just don't understand what it is doing. 

Thanks!

Top 10 Contributor
Posts: 1,736
Chris Posted: Fri Aug 6, 2010 @ 1:57 PM

Hi,

 

Really it doesn't matter, essentially it will take the hierarchy of the objects in the XML tree and read their properties.  Whether you put item or node is irrelevant.

 

Also, the client template is used so that you cannot click on the item, or that the item will not react to clicks.

 

Hope this clears it up.

 

Cheers,

Christopher Moncayo,
Solutions Architect
ComponentArt Inc.
Not Ranked
Posts: 1
huangyihao Posted: Tue Aug 24, 2010 @ 9:28 PM

hello

Page 1 of 2 (22 items) 1 2 Next >