ComponentArt and Menus Question

Is it possible to add a "scrolling group menu" to the navigation tabs?  I know you can add menu items via the siteurl.conf file but was looking for a way to have an item that when highlighted would drop down to other menu items.

I looked at the samples from ComponentArt and they have one labled as "Scrolling Groups" and its exactly what I am looking to do.

anyone have some insite on this?

 I would really like to see this feature in CS 2.0, it would pretty much make the product perfect.

Yes, please allow me to second that request.

If you look at how DotNetNuke does these menu extensions (drop-downs for example) it's pretty neat. I'd love to have this feature in CS 2.x or 3.0.

Usage scenario: I'd like to create submenus for Blogs for example.
Blogs
   |-- Bill
   |-- Steve
   |-- Rob

Photos
   |-- Family
   |-- Friends

etc.

It would be neat if the Administration interface would allow an easy extension of these submenus.

Thanks and keep up the good work!
GunBee.

Have you looked at the Component Art web site

It tells you how to do this sort of thing.

Rob

Yes, the site does tell you how to do it.  My question is how can i do it with CS?  I want to populate the menu from a database (dynamically build the menu items). I beleive currently the menu is not being build by the component and when you do use the component it pulls it think from the siteurls.config.

Sorry should have started at the top of the thread I see thats what you originally requested. Can you not inherit from the navigation control and enhance it?

Rob

Hi :

  I was on the same page where I want to replace the Tabbar with my own menu.Since I dont have the source code , i was not able to integrate the roles yet.But am successful in replacing the Tabbar with ComponentArt menu bar .

Edit the skin-repeater bar in the CS default/themes/skin folder like the one shown below

 

<%@ Control Language="c#" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>

<!-- Instead of the Tab bar provided by the CS , ComponentArtMenu is being used
<script language="javascript">
function tabOver(e)
{
 if (e.className!='CommonSimpleTabStripSelectedTab')
  e.className='CommonSimpleTabStripTabHover';
}
function tabOut(e)
{
 if (e.className!='CommonSimpleTabStripSelectedTab')
  e.className='CommonSimpleTabStripTab';
}
</script>

<asp:Repeater EnableViewState="false" runat="server" id="Menu">      
 <HeaderTemplate>
  <div class="CommonTabBarInner">
  <table cellspacing="0" cellpadding="0" border="0">
  <tr valign="middle">
 </HeaderTemplate>
 <ItemTemplate>
  <td class="<%# ((bool) DataBinder.Eval(Container.DataItem, "IsSelected")) ? "CommonSimpleTabStripSelectedTab" : "CommonSimpleTabStripTab" %>" onmouseover="tabOver(this);" onmouseout="tabOut(this);"><a href="<%# DataBinder.Eval(Container.DataItem, "NavigateUrl") %>"><%# DataBinder.Eval(Container.DataItem, "Text") %></a></td>
 </ItemTemplate>
 <FooterTemplate>
  </tr>
  </table>
  </div>
 </FooterTemplate>
</asp:Repeater>
-->
<style type="text/css">
.MenuGroup
{
  border:solid 1px gray;
  font-weight:bold;
  border-right-color:#3F3F3F;
  border-bottom-color:#3F3F3F;
  background-color:#D3D3D3;
}

.TopMenuItem
{

  color:#3F3F3F;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  border: solid 1px gray;
  border-left-color:white;
  border-top-color:white;
  background-color:#D3D3D3;
  cursor:pointer;
}

.TopMenuItemHover
{

  color:#3F3F3F;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  border: solid 1px gray;
  border-left-color:white;
  border-top-color:white;
  background-color:#D3D3D3;
  cursor:pointer;
}

.TopMenuItemActive
{

  color:#FFFFFF;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  border: solid 1px gray;
  border-left-color:gray;
  border-top-color:gray;
  background-color:#2D6B93;
  cursor:pointer;
}

.MenuItem
{

  color:#3F3F3F;
  font-family:verdana;
  font-weight:bold;
  font-size:14px;
  border: solid 1px gray;
  border-left-color:white;
  border-top-color:white;
  background-color:#D3D3D3;
  cursor:pointer;
}

.MenuItemHover
{

  color:#FFFFFF;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  border: solid 1px gray;
  border-left-color:white;
  border-top-color:white;
  background-color:#2D6B93;
  cursor:pointer;
}

.MenuItemActive
{

  color:#3F3F3F;
  font-family:verdana;
  font-size:14px;
  font-weight:bold;
  border: solid 1px gray;
  border-left-color:gray;
  border-top-color:gray;
  background-color:#2D6B93;
  cursor:pointer;
}

</style>
<div align="left" valign="center">
<ComponentArt:Menu id="Menu1" runat="server" Orientation="Horizontal" DefaultGroupCssClass="MenuGroup" SiteMapXmlFile="~/menuData.xml" DefaultItemLookID="DefaultItemLook" ImagesBaseUrl="../images/ComponentMenu/" EnableViewState="true" height="100%">
    <ItemLooks>
        <componentart:ItemLook HoverCssClass="MenuItemHover" LabelPaddingTop="2px" ActiveCssClass="MenuItemDown" LabelPaddingRight="15px" LabelPaddingBottom="2px" ExpandedCssClass="MenuItemDown" LabelPaddingLeft="5px" LookId="DefaultItemLook" CssClass="MenuItem"></componentart:ItemLook>
    </ItemLooks>
</ComponentArt:Menu>
</div>

 

The above menu can be fed by using the menuData.xml that resides in your root folder which is web and it looks like this

 

<?xml version="1.0" encoding="utf-8" ?>
<SiteMap>
 
  <item Text="About Us" NavigateUrl="http://www.CommunityServer.org">
    <item Text="forums"  NavigateUrl="http://www.CommunityServer.org/forums/default.aspx"/>
    <item Text="Photos"  NavigateUrl="http://www.CommunityServer.org/photos/default.aspx"/>
   
  </item>

  <item Text="News" NavigateUrl="http://www.cnn.com">
    <item Text="Weather"  NavigateUrl="http://www.cnn.com/WEATHER/"/>  
  </item>

  <item Text="Files" NavigateUrl="http://www.Communityserver.org/files/default.aspx"/>

</SiteMap>

Well thats all there it is. For skinning the menu , please refer to ComponentArts menu documentation on skinnig.

Hope this is going to help some of the folks in the community.

 

Regards,

Rajesh

 

 

 

 

Thanks for the post, will be testing it today. Customization of the navigation menu is always one of those tests of actual usage that makes me have regrets about CS over other projects. It just seems natural that somone in a growing community at one time or another would want to have more static pages then could fit on a single line. More so when you included that CS 2 additioons of files and readers.

 

Good post

I am using web.sitemaps for the menu data and would like to add roles based menus

and would like to have diffrent styles for top and drop down menu

<siteMapNode url="url" title="name" LookId="SubNavLook" > 

and have added a new lookid  

       <ComponentArt:ItemLook LookID="DefaultItemLook" CssClass="MenuItem" HoverCssClass="MenuItemHover" ExpandedCssClass="MenuItemHover" />
       <ComponentArt:ItemLook LookID="SubNavLook" CssClass="SubMenuItem" HoverCssClass="SubMenuItemHover" ExpandedCssClass="SubMenuItemHover" LabelPaddingLeft="10" LabelPaddingRight="10" LabelPaddingTop="3" LabelPaddingBottom="4" />

 but have problems getting it to work.

 Thanks

Gautam
 

 is it just me or is this menu REALLY slow?