Page 5 of 7

Is there a way?

Posted: Mon Mar 17, 2008 12:23 pm
by Jinx
Is there a way to get a no script into bumbles code that will trigger something like the simplecategorylist.ascx if Javascript is turned off? Or how are other people handling this if they are using the ajax navigation?

Posted: Mon Mar 17, 2008 2:30 pm
by Bumbles
When I was first playing around with the ComponentArt Treeview control I had the same concerns, as to me SEO is paramount. I found this statement on the ComponentArt website:

ComponentArt Web.UI navigation controls (Menu, TreeView, NavBar, TabStrip and SiteMap) provide meaningful content to search engine crawlers by generating crawler friendly representation of the navigation structure. Any web site that uses ComponentArt navigation controls will be properly indexed by all of the supported search engines.

I was able to verify that this was the case by using a googlebot emulator, to see what html the googlebot would see. I guess that they are looking at User-Agent to decide whether to return the pretty version or the "searchable" version.

emulator

Posted: Tue Mar 18, 2008 6:11 am
by Jinx
What emulator are you using? I want to try and test it myself since I am using a modified treeview.

Emulator

Posted: Tue Mar 18, 2008 6:25 am
by Jinx
If your emulator is a paid product could you check out http://www.etillastuffedanimals.com. It is the modified version you helped me work on. Since the initial link opens up using ajax to display the sub categories I am worried that Google won't be able to open it up to spider the product categories.

Posted: Tue Mar 18, 2008 1:31 pm
by Bumbles
I use a software application, but there are a number of online ones. I tried your site on this one http://www.submitexpress.com/analyzer/. If you select googlebot from the combo, then it successfully reports all the links on your tree.

If you want to see what actual html returned from your site when the treeview component identifies the request as coming from a search engine spider, let me know and I'll send it to you.

I would love to see the html

Posted: Wed Mar 19, 2008 6:32 am
by Jinx
I would love to see the actual html. I have to double check to justify everything for our SEO guy.

Posted: Wed Mar 19, 2008 7:24 pm
by Bumbles
Have just sent you an email with the html attached.

Re: Navigation treeview or flyout menus?

Posted: Mon Apr 07, 2008 5:02 pm
by mfreeze
I tried to insert the TreeView1.NodeWrap = true; into the code and got the following message:

[[ConLib:/Custom/CategoryTreeView]] d:\ac7_xxxxx\ConLib\Custom\CategoryTreeView.ascx(26): error CS0117: 'ComponentArt.Web.UI.TreeView' does not contain a definition for 'NodeWrap'

That might explain why I haven't been able to get the category names to wrap whatever I do.

Re: Navigation treeview or flyout menus?

Posted: Mon Apr 07, 2008 5:18 pm
by jmestep
I could never get the nodewrap to work either. The use of the category tree is different in the admin and that is why it wraps there -see Admin/Catalog/CategoryTree.ascx-- it uses the asp:treeview and nodewrap works there.
I ended up making my left nav on the store side wide enough for the longest category name.
Mazhar, where are you?????????

Re: Navigation treeview or flyout menus?

Posted: Tue Apr 08, 2008 9:25 am
by Jinx
You're right. I added the node wrap as based upon component arts instructions and did not get an error and thought everything was working right... but.... since I have added a really long category name and the horizontal scroll displays.. SORRY thought it was working.

Re: Navigation treeview or flyout menus?

Posted: Fri Apr 11, 2008 12:02 am
by Pat_king
hi jinx,

I tried the navigation bar for the category navigation and fly out menu for the categories .i got the code that works fin e for navigation using the component art.


Regards ,
Pat

Re: Navigation treeview or flyout menus?

Posted: Fri Apr 11, 2008 8:12 am
by Jinx
You got the navigation to wrap without scroll bars?

Re: Navigation treeview or flyout menus?

Posted: Fri Apr 11, 2008 9:29 am
by mfreeze
Can you post the code you used?

Thanks

Re: Navigation treeview or flyout menus?

Posted: Mon Apr 14, 2008 12:14 am
by Pat_king
Create /ConLib/Custom/CategoryNavigation.ascx with the following:

Code: Select all

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="CategoryNavigation.ascx.cs" Inherits="ConLib_Custom_CategoryNavigation" %>
<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>

<asp:Panel ID="MainPanel" runat="server" CssClass="section">
    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
	    <h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
    </asp:Panel>
	<asp:Panel ID="ContentPanel" runat="server" CssClass="content">
  <ComponentArt:NavBar id="serverNavBar" 
      CssClass="NavBar"
      DefaultItemLookID="TopItemLook"
      ImagesBaseUrl="App_Themes/AbleCommerce/images"
      runat="server" 
      >
    <ItemLooks>
      <ComponentArt:ItemLook LookID="TopItemLook" CssClass="TopItem" HoverCssClass="TopItemHover" LeftIconVisibility="Always" RightIconVisibility="Always" />
      <ComponentArt:ItemLook LookID="Level2ItemLook" LabelPaddingTop="10px" CssClass="Level2Item" HoverCssClass="Level2ItemHover" LeftIconVisibility="Always" RightIconVisibility="Always" />
    </ItemLooks>
      
  </ComponentArt:NavBar>
  </asp:Panel>
  </asp:Panel> 
Add this to the code file CategoryNavigation.ascx.cs

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using CommerceBuilder.Catalog;


public partial class ConLib_Custom_CategoryNavigation : System.Web.UI.UserControl
{
    
    private void Page_Load(object sender, System.EventArgs e)
    {
        BuildServerNavBar();
    }

    private void BuildServerNavBar()
    {
 
        /* Applying Styles to the Navigation Bar */
            
        serverNavBar.ScrollUpImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpHoverImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownHoverImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpActiveImageUrl = "scrollup.gif";
        serverNavBar.ScrollDownActiveImageUrl = "scrolldown.gif";
        serverNavBar.ScrollUpImageWidth = 16;
        serverNavBar.ScrollUpImageHeight = 16;
        serverNavBar.ScrollDownImageWidth = 16;
        serverNavBar.ScrollDownImageHeight = 16;
        serverNavBar.DefaultItemTextAlign = ComponentArt.Web.UI.TextAlign.Left;
        serverNavBar.ExpandSinglePath = true;
        serverNavBar.FullExpand = true;
        serverNavBar.Width = Unit.Parse("189");
        serverNavBar.Height = Unit.Parse("300");

        ComponentArt.Web.UI.NavBarItem newItem;
        CategoryCollection subCategories = CategoryDataSource.LoadForParent(0, false);
        int i = 0;
                 
        foreach (Category subCategory in subCategories)
        {

            newItem = new ComponentArt.Web.UI.NavBarItem();
            newItem.Text = subCategory.Name;
            if(i==0)
                 newItem.Expanded = true;
            else
                 newItem.Expanded = false;
            newItem.DefaultSubItemLookId = "Level2ItemLook";
            newItem.SubGroupCssClass = "Level2Group";
            serverNavBar.Items.Add(newItem);
            CategoryCollection childCategories = CategoryDataSource.LoadForParent(subCategory.CategoryId, false);
            foreach (Category childCategoriesList in childCategories)
            {
                newItem = new ComponentArt.Web.UI.NavBarItem();
                newItem.Text = childCategoriesList.Name;
                newItem.NavigateUrl = childCategoriesList.NavigateUrl;
                serverNavBar.Items[i].Items.Add(newItem);
            }
            i++;
        }


    }
   
}

Add the following to /App_Themes/[YOUR CURRENT THEME]/style.css

Code: Select all

.NavBar
{
  background-color: #FFFFFF; 
  border: 1px solid #000000; 
  padding: 2px;
  padding-bottom: 4px;
  cursor: default; 
} 

.TopItem
{
  color: #FFFFFF;
  background-image: url(images/item_bg.gif);
  background-color: #757495; 
  font-family: tahoma, verdana; 
  font-size: 11px; 
  font-weight: bold;
  border:1px solid #696885; 
  border-bottom-color: #57566F; 
  border-right-color: #57566F; 
  padding-top: 4px; 
  padding-bottom: 4px; 
  cursor:hand;
}

.TopItemHover
{
  color: #FFFFFF;
  background-image: url(images/item_hoverBg.gif);
  background-color: #8E8DA9; 
  font-family: tahoma, verdana; 
  font-size: 11px; 
  font-weight: bold;
  border: 1px solid #7C7C94;
  border-bottom-color:#9593B2;
  padding-top: 4px; 
  padding-bottom: 4px; 
  cursor:hand;
}

.Level2Item
{
  font-family: tahoma, verdana; 
  font-size: 11px; 
  padding-left: 10px; 
  cursor:hand;
}

.Level2ItemHover
{
  font-family: tahoma, verdana; 
  font-size: 11px; 
  text-decoration:underline;
  padding-left: 10px; 
  cursor:hand;
}

.Level2Group
{
  background-color:white;
  background-image: url(images/group_bg.gif);
  border-top-color: #F0F1F5;
  padding:10px;
  padding-left:10px;
  padding-right:0px;
}

.Empty
{
}

Copy the two attached image files to the current theme images folder


After doing the above mentioned :

Add follwing line in : App_code/scriplets/Default/sidebar/Standard Sidebar 1.htm

Code: Select all

[[ConLib:Custom\CategoryNavigation]]


I just added the required things for the Navigation bar .......Add your own styles ........... Above Code is enough for the Simple Navigation Bar.

Dont forget to add the scrollup and scrolldown images that i attached..... then scroll won't work in firefox ......

Jinx it works without scroll bar............

Thanks & Regards,
Pat

Re: Navigation treeview or flyout menus?

Posted: Tue Aug 05, 2008 4:30 pm
by harris43
I used the earlier code from bubbles and it's working fine, but the word "Categories" is above the category menu. Here's the code: [[ConLib:Custom\CategoryTreeView HeaderText=" "]]. It's ignoring it.

Thoughts?

Re: Navigation treeview or flyout menus?

Posted: Tue Aug 05, 2008 5:27 pm
by jmestep
I don't think that will work on Bumble's code since it's a different conlib. Try taking this out of the code in the previous post:
<asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
<h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
</asp:Panel>

Re: Compunerdy

Posted: Wed Aug 13, 2008 12:28 pm
by chuvak
Jinx wrote:What are you looking for your navigation to do?

Check this site out (http://www.etillastuffedanimals.com)is this what you want it to do? Or what exactly do you want... Sorry things are slow for me this morning.
Hi, I've been trying to get it working as you have it working on that site. I'm wondering what code did you use?

Right now, the menu is semi-working, with the category disappearing when i go to another page.

I was wondering what code you are using and if I maybe did something wrong, before I go and start to snoop around rewriting the code and reinventing the wheel.

Thanks!

Re: Navigation treeview or flyout menus?

Posted: Wed Aug 13, 2008 1:12 pm
by harris43
this started working. The site was caching just this part and wouldn't let go of it.

Re: Navigation treeview or flyout menus?

Posted: Wed Aug 13, 2008 1:22 pm
by jmestep
Yes, the menu does cache with the time dependent on what is set in the conlib int _CacheDuration = 60;

Re: Navigation treeview or flyout menus?

Posted: Thu Aug 14, 2008 12:11 am
by Sean@WMS
Howdy All,

Johny come lately to this thread here, but I've just started working with AC, AC7 specifically.

I wanted to thank everyone for their contributions here, and as pay back, I wanted to share my successes with this confounded widget.

First of all, I saw some folks on this thread apparently getting stumped with the CSS overflow and HTML nobr tags that ComponentArt throws in by default. When I first installed this from the code Pat_king shared here, I was alarmed by both of these.

Turns out the CSS overflow, or "autoscroll" as ComponentArt calls it, is simple. Just add AutoScroll="false" to the properties:

Code: Select all

            {... other properties ...}
            EnableViewState="false"
            AutoScroll="false"
            runat="server">
Dealing with the nowraps -- technically nobr tags that ComponentArt wraps every item in the tree in -- was much more challenging.

On the surface, this was "theoretically" simple to handle too, with CSS; just find the nobr tags as children of the various classes set as properties in CA, and set the value for the white-space property to "normal" like so:

Code: Select all

.CatTreeNode nobr, .CatSelectedTreeNode nobr, .CatHoverTreeNode nobr {
   white-space: normal;
}
Joy! That killed the "nowrap" effect . . . . but, dang it all!, we've got a new problem: it line wraps after every word ( pulling hair from head and wiskers from beard ).

To solve that, we need to apply width so there is room for the words to expand into before they wrap.

However, this is where it started getting really hairy ( or rather the opposite, as I lost so much hair and so many whiskers over it ).

CA produces the list in a way I really didn't expect. I'd have hoped for an unordered list, which would have made life simple here. But no, for reasons that I'm sure are probably sound from their perspective, each item in the list is actually wrapped in a table -- yeah, a TABLE! Can you believe that? What's worse, each subcat in the list is wrapped in a table with TWO colums, but top level cats are wrapped in a table with only ONE column ( though there is just a little bit of odd spacing to the left I'll address further down here ). That is, allocating that space for the text to fill into before wrapping was pretty tricky.

Finally, I came up with this: having applied the width of the overall category tree menu in .CatTreeView, we just need to be able to find these table cells correctly and give them a width of 100%. So, after much futsing around I finally came up with this:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView > table td:first-child { 
    width: 100%; 
}

#leftSidebarPanel .section .content .CatTreeView table td + td { 
    width: 100%; 
}
NOTE: I had to be very specific here because I was using one of the canned "Glass" themes here, and CA was picking up styles from "#leftSidebarPanel .section .content table"

That is, first find tables contextually with just the one TD ( we can't just set all of the TD's to any width, as the subcats with two TD's will inherit that ), and then find the instances of a TD preceeded by a TD ( i.e., our subcat text; the first TD is populated by CA with a div with width set to the value of what was set for NodeIndent ). Now top level cats will fill out their space allotted and subcats won't get pushed to the right; they will just indent as specified in the NodeIndent property of CA in the first cell, and then expand to fill out the space allotted to them in the second cell. All is well. . . . EXCEPT ( of course! ) in IE 6. I tested in FireFox 2 & 3, IE 7, and Safari 3 for PC's, and it was all good in those browsers. I'd really love it if anyone would pick up the torch from here and figure out how this could be tweeked for IE 6.

However, I was still not finished pulling out hairs and whiskers . . . . There was still one other very bothersome issue with this confounded table layout: I was using background images on the menu.

The problem here is that whatever I had set for background on .CatTreeNode & .CatSelectedTreeNode, & .CatHoverTreeNode didn't apply to the left of these -- for the top level cats, there was a wee bit of space, and for the subcats, there was a space as large as the indent was set for. I needed to be able to background the images at a larger scope than these CSS classes would allow me to do here.

I hit the books on ComponentArt documentation and found that you can add a row property to each of these. So I revised Pat_king's code as follows ( adding a row property to each of these instances ):

Code: Select all

        TreeView1.NodeCssClass = "CatTreeNode";
        TreeView1.NodeRowCssClass = "CatTreeNodeRow";
        TreeView1.SelectedNodeCssClass = "CatSelectedTreeNode";
        TreeView1.SelectedNodeRowCssClass = "CatSelectedTreeNodeRow";
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";
        TreeView1.HoverNodeRowCssClass = "CatHoverTreeNodeRow";
...
            NodeCssClass="CatTreeNode"
            NodeRowCssClass="CatTreeNodeRow"
            SelectedNodeCssClass="CatSelectedTreeNode"
            SelectedNodeRowCssClass="CatSelectedTreeNodeRow"
            HoverNodeCssClass="CatHoverTreeNode"
            HoverNodeRowCssClass="CatHoverTreeNodeRow"
Then, for the CSS:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView .CatTreeNodeRow {
   background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
   cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatHoverTreeNodeRow {
   background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
   cursor: pointer; 
}

#leftSidebarPanel .section .content .CatTreeView .CatSelectedTreeNodeRow {
   background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
   cursor: pointer;
}
NOTE: Not sure why I had to be so specific in locating these this way while I could style .CatTreeView .CatTreeNode just fine without providing context like this, but for the "*Row" elements, I had to get this specific for them to work. This might be because of the styling in the "Glass" theme I was using which I noticed CA was inheriting in some contexts.

This provides the proper styling to the entire row ( minus what's in the div that CA stuffs the text into ). Unfortunately, it also means that the background image has to be loaded multiple times: for top level cats, there's the row background and the background behind the div for the text that CA produces, and for subcats there's that plus the table-row to the left.

After all of this, I honestly have to say that while it is super cool for AC to include CompentArt under their royalty free licensing for those who might find interesting advantages, I think this is entirely way too much overhead ( it's like going around the world just to cross the street ) and way more learning curve than one should expect from a typical user ( I'm an experienced programmer, and it took me two days of study & trial and error ). I really can't see why AC can't put out an "ExtendedCategoryList" control rather like the SimpleCategoryList control, but expanding to the subcategory list under the parent category selected writing it out as a standard nested unordered list, esp. as using ComponentArt for this dramatically slows down page load, not to mention what a big PITA it makes styling it in interesting ways.

At the end of all of this, I still can't get this looking right in IE6, so I'd really love it if someone would run with what I've pushed forward here and suggest a remedy for IE6 as well.


Finally, here is my complete source code given all of this. There are some contextual labels based on one of the "Glass" themes I started with -- so for some, this might just "plug & play" if you are using one of these themes as a base, and for others, you'll have to edit the CSS accordingly:

CategoryTreeView.ascx

Code: Select all

<%@ Control Language="C#" ClassName="CategoryTreeView" EnableViewState="false" %>
<%@ Register TagPrefix="ComponentArt" Namespace="ComponentArt.Web.UI" Assembly="ComponentArt.Web.UI" %>
<%--
<conlib>
<summary>Displays the categories in your store in a treeview.</summary>
<param name="CacheDuration" default="60">Number of minutes the category tree will remain cached in memory.  Set to 0 to disable caching.</param>
</conlib>
--%>
<script runat="server">
    //to clear category tree cache use this page ClearCategoryTreeCache.aspx

    int _CacheDuration = 60;
    public int CacheDuration
    {
        get { return _CacheDuration; }
        set { _CacheDuration = value; }
    }

    protected void Page_Init(object sender, EventArgs e)
    {
        InitializeCategoryTree();
    }

    private void InitializeCategoryTree()
    {
        TreeView1.ShowLines = false;
        TreeView1.ImagesBaseUrl = "/App_Themes/" + Page.Theme + "/images/CategoryTreeView/";
        TreeView1.CssClass = "CatTreeView";
        TreeView1.NodeCssClass = "CatTreeNode";
        TreeView1.NodeRowCssClass = "CatTreeNodeRow";
        TreeView1.SelectedNodeCssClass = "CatSelectedTreeNode";
        TreeView1.SelectedNodeRowCssClass = "CatSelectedTreeNodeRow";
        TreeView1.HoverNodeCssClass = "CatHoverTreeNode";
        TreeView1.HoverNodeRowCssClass = "CatHoverTreeNodeRow";

        GetCategoryTreeNodes();

        // Specify the current category
        int categoryId = PageHelper.GetCategoryId();
        TreeViewNode node = TreeView1.FindNodeById(categoryId.ToString());
        if (node != null)
        {
            node.TemplateId = "SelectedCategoryTemplate";
            node.Expanded = true;
            EnsureTreeNodeVisible(node);
        }
    }

    private void GetCategoryTreeNodes()
    {
        string cacheKey = "53741CA849784C8DA262F53638A2A38F";
        string categoryNodes = null;

        if (_CacheDuration > 0)
        {
            // Check to see if category treeview is in the cache
            categoryNodes = Cache.Get(cacheKey) as string;
        }

        if (categoryNodes == null)
        {
            GetCategoryNodesRecursive(0, TreeView1.Nodes);
            Cache.Insert(cacheKey, TreeView1.GetXml(), null, DateTime.Now.AddMinutes(_CacheDuration), System.Web.Caching.Cache.NoSlidingExpiration, System.Web.Caching.CacheItemPriority.High, null);
        }
        else
        {
            // Load Nodes from the cached xml string
            TreeView1.LoadXml(categoryNodes);
        }
    }

    private void GetCategoryNodesRecursive(int categoryId, TreeViewNodeCollection nodes)
    {
        TreeViewNode node;

        CategoryCollection subcategories = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category subcat in subcategories)
        {
            node = new TreeViewNode();
            node.ID = subcat.CategoryId.ToString();
            node.Text = subcat.Name;
            node.NavigateUrl = subcat.NavigateUrl;
            //node.ImageUrl = subcat.ThumbnailUrl;
            nodes.Add(node);

            GetCategoryNodesRecursive(subcat.CategoryId, node.Nodes);
        }
    } 
    
    

    private void EnsureTreeNodeVisible(TreeViewNode node)
    {
        TreeViewNode currentNode = node.ParentNode;

        while (currentNode != null)
        {
            currentNode.Expanded = true;
            currentNode = currentNode.ParentNode;
        }
    }
</script>
<asp:Panel ID="MainPanel" runat="server" CssClass="section">
    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">    
       <h2 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Categories"></asp:Localize></h2>
    </asp:Panel>
 
   <asp:Panel ID="TreePanel" runat="server" CssClass="content">
      
        <ComponentArt:TreeView id="TreeView1"
            
            Width="178px"
            DragAndDropEnabled="false"
            NodeEditingEnabled="false"
            KeyboardEnabled="true"
            CssClass="CatTreeView"
            NodeCssClass="CatTreeNode"
            NodeRowCssClass="CatTreeNodeRow"
            SelectedNodeCssClass="CatSelectedTreeNode"
            SelectedNodeRowCssClass="CatSelectedTreeNodeRow"
            HoverNodeCssClass="CatHoverTreeNode"
            HoverNodeRowCssClass="CatHoverTreeNodeRow"
            DefaultImageWidth="0"
            DefaultImageHeight="0"
            ExpandCollapseImageWidth="0"
            ExpandSelectedPath="true"
            ExpandCollapseImageHeight="0"
            NodeIndent="10"
            ItemSpacing="0"
            NodeLabelPadding="0"
            CollapseImageUrl=""
            ExpandImageUrl=""
            ParentNodeImageUrl=""
            LeafNodeImageUrl=""
            ShowLines="false"
            EnableViewState="false"
            AutoScroll="false"
            runat="server">
            <Templates>
                <ComponentArt:NavigationCustomTemplate id="SelectedCategoryTemplate">
                    <Template>
                        <strong><%# DataBinder.Eval(Container.DataItem, "Text") %></strong></Template>
                </ComponentArt:NavigationCustomTemplate>
            </Templates>
        </ComponentArt:TreeView>
    </asp:Panel>
</asp:Panel>
CSS:

Code: Select all

/******************************************************************************************/
/* styles for the category treeview (such as might show on the home page)                 */
/******************************************************************************************/

.CatTreeView {
	width: 174px;
	background: transparent;
}

#leftSidebarPanel .section .content .CatTreeView table { 
	width: 100%; 
	border-top: 0; 
	border-right: solid 1px #8ED4AF; 
	border-bottom: solid 1px #8ED4AF; 
	border-left: solid 1px #8ED4AF; 
	border-collapse:inherit!important;
	background: transparent; 
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 12px;
}

#leftSidebarPanel .section .content .CatTreeView > table td:first-child { 
    width: 100%; 
}

#leftSidebarPanel .section .content .CatTreeView table td + td { 
    width: 100%; 
}

.CatTreeNode {
	padding: 8px 3px 8px 13px;
	background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
	color: #661A29;
	cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatTreeNodeRow {
	background: #F6F5DD url('images/left_panel_item_bg.gif') no-repeat left top;
	cursor: pointer;
}

.CatHoverTreeNode {
	padding: 8px 3px 8px 26px;
	background:#DEF4E8 url('images/left_panel_item_bg_hover.gif') no-repeat left top;
	color: #006729;
	cursor: pointer; 
}

#leftSidebarPanel .section .content .CatTreeView .CatHoverTreeNodeRow {
	background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
	cursor: pointer; 
}

.CatSelectedTreeNode {
	padding: 8px 3px 8px 26px;
	color: #006729;
	background:#DEF4E8 url('images/left_panel_item_bg_hover.gif') no-repeat left top;
	cursor: pointer;
}

#leftSidebarPanel .section .content .CatTreeView .CatSelectedTreeNodeRow {
	background:#DEF4E8 url('images/left_panel_item_bg_hover_sm.gif') repeat-x left top;
	cursor: pointer;
}

.CatTreeNode nobr, .CatSelectedTreeNode nobr, .CatHoverTreeNode nobr {
	white-space: normal;
}
/******************************************************************************************/
/* end styles for the category treeview (such as might show on the home page)             */
/******************************************************************************************/
PS: If anyone wants to see this all in action, I've done this on BarParts.com ( though things might change aver this post )

Re: Navigation treeview or flyout menus?

Posted: Thu Aug 14, 2008 8:55 am
by jmestep
There are actually two different components in this post. The treeview and the navbar. Pat_King's code was for the navbar-- when you click on the top link, it expands/scrolls to display the other links. When I tried it some but wanted to change the appearance and didn't get far with that.
For the treeview, mazhar has posted code using the .net treeview and not the ComponenetArt treeview and it handles word wrap.
viewtopic.php?f=42&t=7829&p=33634

I haven't implemented it, but I think it is lighter weight than the ComponentArt one.

viewtopic.php?f=42&t=7829&p=33634

Re: Navigation treeview or flyout menus?

Posted: Fri Aug 15, 2008 2:07 pm
by chuvak
This is weird. I seem to be having trouble applying the css styling to the menu. It also tells me it can't find class CatTreeView..anyone have any ideas how to get That part working?

Re: Navigation treeview or flyout menus?

Posted: Fri Aug 15, 2008 2:32 pm
by Sean@WMS
Try being very specific about your inheritance, something like:

Code: Select all

#leftSidebarPanel .section .content .CatTreeView

Re: Navigation treeview or flyout menus?

Posted: Tue Aug 19, 2008 12:43 pm
by jmestep
Here's a flyout menu using ComponentArt stuff:
viewtopic.php?f=47&t=7986

Re:

Posted: Wed Sep 17, 2008 4:10 pm
by ajasko
Shopping Cart Admin wrote:Hello Haak,

We've tried a number of commercially available fly out menus and they produced horribly bloated code that noticeably slowed page load. The one on the admin side is our custom control, which on our demo store reduced page size by almost 100k.

We're short staffed this week, but we'll get something out for the retail side for this next week. This is already on the custom control todo list.
Mike,
(or anyone who knows) - Has Able come out with a custom control for a Nested Tree Sidebar yet?