CSS Vertical Left Category Flyout Menu

Store UI, layout, design, look and feel; Discussion on the customer facing pages of your online store. Cascading Style Sheets, Themes, Scriptlets, NVelocity and the components in the ConLib directory.
Post Reply
euroluxantiques
Commander (CMDR)
Commander (CMDR)
Posts: 118
Joined: Sat Dec 20, 2008 11:27 pm

CSS Vertical Left Category Flyout Menu

Post by euroluxantiques » Sat Feb 26, 2011 3:30 pm

I've been playing with developing a full CSS flyout menu for the last week or so, and I think I've got a decent one going using only <ul> and <li>. I thought I would share it because I know I've "stolen" I don't know how many ideas and code off these boards! It works for 3 levels and reads only categories that have subcategories and/or products associated with them. Put it in your sidebar like this:

<div id="simple-category-bar" class="sidebarSection" style="background:none">
[[ConLib:Custom/CategoryFlyout]]
</div>

The first <div> is necessary because my css hooks to it. If you want to remove the div, just modify the css.

I've set the code to load thumbnail image for the top-level category because my site uses that. You may have to tweak the code or CSS up a bit to work for your theme. You can see the finished product on my left category sidebar here:

http://www.euroluxantiques.com

I removed a few lines of CSS that puts the price tag and tiled image background, as those are pretty specific to my site. If you find room for improvement, let me know!


CategoryFlyout.ascx:

Code: Select all

<%@Control Language="C#" CodeFile="CategoryFlyout.ascx.cs" Inherits="CategoryFlyout" %>

<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="CategoryFlyoutList" runat="server" CssClass="content">
	
	    <asp:Label ID="CategoryDetail" CssClass="content" runat="server"></asp:Label>
	
    </asp:Panel>
    
</asp:Panel>
CategoryFlyout.ascx.cs:

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Text;
using System.Text.RegularExpressions;
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.Common;
using CommerceBuilder.Marketing;
using CommerceBuilder.Orders;
using CommerceBuilder.Utility;
using CommerceBuilder.Catalog;
using CommerceBuilder.Products;

public partial class CategoryFlyout : UserControl
{
    StringBuilder sb = new StringBuilder();

    protected void Page_Load(object sender, System.EventArgs e)
    {
        

        CategoryCollection subCategories = CategoryDataSource.LoadForStore();

        if (subCategories.Count == 0)
        {
            return;
        }

        sb.Append("<ul id='sidenav' class='level1'>");
        
        foreach (Category category in subCategories)
        {

            if (category.ParentId == 0)
            {
               
               sb.Append("<li class='folder'><a href='" + Regex.Replace(category.NavigateUrl, "~", "") + "' class='explain'><img src='" + Regex.Replace(category.ThumbnailUrl, "~", "") + "'/><span class='hide'>" + category.Name + "</span></a><ul class='level2'>");
               Response.Write(sb.Length);
              
                if (CategoryDataSource.CountForParent(category.CategoryId) > 0)
                {
                    RecursiveLoadChildren(category.CategoryId);
                }
                sb.Append("</li>");
            }
            sb.Append("</ul>");
        }

        //Response.Write(sb.ToString());
        sb.Append("</ul>");
        CategoryDetail.Text = sb.ToString();
        
    }

    protected void RecursiveLoadChildren(int CatId)
        {
            CategoryCollection children = CategoryDataSource.LoadForParent(CatId, true);

            foreach (Category cat in children)
            {
                if (CategoryDataSource.CountForParent(cat.CategoryId)>0)
                {
                    sb.Append("<li class='subParent'><a href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "' class='submenu'>" + cat.Name + " > </a><ul>");
                    RecursiveLoadChildren(cat.CategoryId);
                    sb.Append("</ul></li>");
                }
                else
                {
                    if (cat.CatalogNodes.Count > 0)
                    {
                        sb.Append("<li><a class='submenu' href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "'>" + cat.Name + "</a></li>");
                    }
                }
            }

        } 
    }
And the associated css:

Code: Select all

#simple-category-bar li{position:relative; padding:0px; z-index:9}

#simple-category-bar li.folder{padding:10px 0}

#simple-category-bar li.folder:hover{z-index:10; background-color:#d0c18a}

#simple-category-bar li.folder ul{position:absolute; display:none; left:200px; /* IE */top:5px}

#simple-category-bar li.folder>ul{left:180px}

#simple-category-bar li.folder:hover ul.level2{display:block; width:200px}

#simple-category-bar li.subParent:hover ul{ width:200px;  display:block }

#simple-category-bar li a.submenu:hover{ color:#cedcc7;  background-color:#426a84}

#simple-category-bar a{padding:2px; text-decoration:none; width:100%; /* IE */}

#simple-category-bar li>a{width:auto}

#simple-category-bar li a.submenu{background-color:#cedcc7; padding-left:10px; font:11px/16px; border:1px solid #FFF; padding:3px 0 4x}

#simple-category-bar #link{ font:11px Verdana,Arial,Tahoma,Sans-Serif,Helvetica; padding-left:20px; margin-top:15px}
 
span.hide{ display:none}

burmaju
Ensign (ENS)
Ensign (ENS)
Posts: 5
Joined: Sun Mar 13, 2011 5:12 am

Re: CSS Vertical Left Category Flyout Menu

Post by burmaju » Mon Mar 14, 2011 7:17 pm

its no good

euroluxantiques
Commander (CMDR)
Commander (CMDR)
Posts: 118
Joined: Sat Dec 20, 2008 11:27 pm

Re: CSS Vertical Left Category Flyout Menu

Post by euroluxantiques » Mon Mar 14, 2011 7:44 pm

Works fine on our website, but you will likely have to make a few modifications for it to work on yours.

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Thu Dec 29, 2011 1:48 am

double check the UL nesting. I had to change mine as follows

Code: Select all

        sb.Append("<ul id='sidenav' class='level1'>");
        
        foreach (Category category in subCategories)
        {

            if (category.ParentId == 0)
            {
               
               sb.Append("<li class='folder'><a href='" + Regex.Replace(category.NavigateUrl, "~", "") + "' class='explain'><img src='" + Regex.Replace(category.ThumbnailUrl, "~", "") + "'/><span class='hide'>" + category.Name + "</span></a><ul class='level2'>");
               Response.Write(sb.Length);
              
                if (CategoryDataSource.CountForParent(category.CategoryId) > 0)
                {
                    RecursiveLoadChildren(category.CategoryId);
                }
                sb.Append("</li>");
//the following is moved inside bracket
           sb.Append("</ul>");
            }
//was problematic
//           sb.Append("</ul>");
        }

        //Response.Write(sb.ToString());
        sb.Append("</ul>");
        CategoryDetail.Text = sb.ToString();
        
    }

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

flyout menus- quick variable scope question from C# amateur

Post by crockettdunn » Thu Dec 29, 2011 8:30 pm

I'm building a standards-compliant, SEO-friendly flyout menu based on the code in this forum. Problem is, I don't know C#, or any object-oriented programming language. Would someone be kind enough to help me with the scope of my index variables?

I'm currently seeing this error:
[[ConLib:CategoryFlyout]] c:\inetpub\wwwroot\crockettdunn\ConLib\CategoryFlyout.ascx.cs(82): error CS0103: The name 'navItemCount' does not exist in the current context .

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Text;
using System.Text.RegularExpressions;
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.Common;
using CommerceBuilder.Marketing;
using CommerceBuilder.Orders;
using CommerceBuilder.Utility;
using CommerceBuilder.Catalog;
using CommerceBuilder.Products;

public partial class CategoryFlyout : UserControl
{
    StringBuilder sb = new StringBuilder();

    protected void Page_Load(object sender, System.EventArgs e)
    {
        

        CategoryCollection subCategories = CategoryDataSource.LoadForStore(" NAME ASC ");

        if (subCategories.Count == 0)
        {
            return;
        }
int navItemCount = 0;
int navMenuCount = 0;
        sb.Append("<ul id='sidenav' class='x8menus' style='z-index:1000;'>");
        
        foreach (Category category in subCategories)
        {

            if (category.ParentId == 0)
            {
              if (category.VisibilityId==0)
             	{
               sb.Append("<li class='toplevelmenu");
	               if ((CategoryDataSource.CountForParent(category.CategoryId) > 0) && (category.VisibilityId==0))
	               {               
	               sb.Append(" hasSubMenu");
	             		}
               sb.Append("'><a class='toplevel' href='" + Regex.Replace(category.NavigateUrl, "~", "") + "' id='navItem_"+navItemCount.ToString()+"'>" + category.Name + "</a>");
               navItemCount = navItemCount + 1;
              // Response.Write(sb.Length);
							}			              
                if ((CategoryDataSource.CountForParent(category.CategoryId) > 0) && (category.VisibilityId==0))
                {
               		sb.Append("<ul class='navMenu' id='navMenu_"+navMenuCount.ToString()+"'>");
               		navMenuCount = navMenuCount + 1;
                  RecursiveLoadChildren(category.CategoryId);
            			sb.Append("</ul>");
                }
                sb.Append("</li>");
            
            }

        }

        //Response.Write(sb.ToString());
        sb.Append("</ul>");
        CategoryDetail.Text = sb.ToString();
        
    }

    protected void RecursiveLoadChildren(int CatId)
        {
            CategoryCollection children = CategoryDataSource.LoadForParent(CatId, true);

            foreach (Category cat in children)
            {
                if (CategoryDataSource.CountForParent(cat.CategoryId)>0)
                //when is this condition met??  a childless sub, maybe?
                {
                    sb.Append("<li><a href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "' id='navItem_"+navItemCount.ToString()+"'>" + cat.Name + " > </a><ul class='navMenu' id='navMenu_"+navMenuCount.ToString()+"'>");
navItemCount = navItemCount + 1;
navMenuCount = navMenuCount + 1;
                    RecursiveLoadChildren(cat.CategoryId);
                    sb.Append("</ul></li>");
                }
                else
                {
//mixer search has no child nodes so we show it...
//                    if (cat.CatalogNodes.Count > 0)
  //                  {
                        sb.Append("<li><a id='navItem_"+navItemCount+"' href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "'>" + cat.Name + "</a></li>");
                        navItemCount = navItemCount + 1;
    //                }
                }
            }

        } 
    }
Thanks,
Crockett

User avatar
david-ebt
Captain (CAPT)
Captain (CAPT)
Posts: 253
Joined: Fri Dec 31, 2010 10:12 am

Re: CSS Vertical Left Category Flyout Menu

Post by david-ebt » Thu Dec 29, 2011 9:26 pm

to get past that error just move the declarations for navItemCount and navMenuCount to the top of the class like this:

Code: Select all

public partial class CategoryFlyout : UserControl
{
    StringBuilder sb = new StringBuilder();
	private int navItemCount = 0;
	private int navMenuCount = 0;
David
http://www.ecombuildertoday.com
Enhanced Reporting for AbleCommerce
Image

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Thu Dec 29, 2011 9:30 pm

Thanks, david-ebt.

My sloppy coding aside, I think I figured it out. I suppose I shouldn't be posting the URL of a 3rd party's dev server, so you will have to trust that it works in AC as well as it does on my example site.

It will eventually reside @

http://www.markimicrowave.com

where you can see them in action outside of AC.

Here's the CS:

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Text;
using System.Text.RegularExpressions;
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.Common;
using CommerceBuilder.Marketing;
using CommerceBuilder.Orders;
using CommerceBuilder.Utility;
using CommerceBuilder.Catalog;
using CommerceBuilder.Products;

public partial class CategoryFlyout : UserControl
{
    StringBuilder sb = new StringBuilder();

    protected void Page_Load(object sender, System.EventArgs e)
    {
        

        CategoryCollection subCategories = CategoryDataSource.LoadForStore(" NAME ASC ");

        if (subCategories.Count == 0)
        {
            return;
        }
int navItemCount = 0;

        sb.Append("<ul id='sidenav' class='x8menus' style='z-index:1000;'>");
        
        foreach (Category category in subCategories)
        {

            if (category.ParentId == 0)
            {
              if (category.VisibilityId==0)
             	{
               sb.Append("<li class='toplevelmenu");
	               if ((CategoryDataSource.CountForParent(category.CategoryId) > 0) && (category.VisibilityId==0))
	               {               
	               sb.Append(" hasSubMenu");
	             		}
               sb.Append("'><a class='toplevel' href='" + Regex.Replace(category.NavigateUrl, "~", "") + "' id='navItem_"+navItemCount.ToString()+"'>" + category.Name + "</a>");
               
              // Response.Write(sb.Length);
							}			              
                if ((CategoryDataSource.CountForParent(category.CategoryId) > 0) && (category.VisibilityId==0))
                {
               		sb.Append("<ul class='navMenu' id='navMenu_"+navItemCount.ToString()+"'>");
                  RecursiveLoadChildren(category.CategoryId, navItemCount);
               navItemCount = navItemCount + 1;

            			sb.Append("</ul>");
                }
                sb.Append("</li>");
            
            }

        }

        //Response.Write(sb.ToString());
        sb.Append("</ul>");
        CategoryDetail.Text = sb.ToString();
        
    }

    protected void RecursiveLoadChildren(int CatId, int navMenuCount)
        {
            CategoryCollection children = CategoryDataSource.LoadForParent(CatId, true);
int navMenuItemCount=1;
            foreach (Category cat in children)
            {
//sub-recurse (has children)
                if (CategoryDataSource.CountForParent(cat.CategoryId)>0)
                 {
                    sb.Append("<li><a href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "' id='navItem_"+navMenuCount.ToString()+"."+navMenuItemCount.ToString()+"'>" + cat.Name + " > </a>");
										navMenuCount = navMenuCount + 1;
                    sb.Append("<ul class='navMenu' id='navMenu_"+navMenuCount.ToString()+"'>");
                    RecursiveLoadChildren(cat.CategoryId, navMenuCount);
                    sb.Append("</ul></li>");
                }
                else
                {
//mixer search has no child nodes, but we show it anyway... don't hide empty categories
//                    if (cat.CatalogNodes.Count > 0)
//                    {
                        sb.Append("<li><a id='navItem_"+navMenuCount+"."+navMenuItemCount+"' href='" + Regex.Replace(cat.NavigateUrl, "~", "") + "'>" + cat.Name + "</a></li>");
                        navMenuItemCount = navMenuItemCount + 1;
//                    }
                }
            }

        } 
    }
The css/js for the AC version are no different from what can be seen in the source @ markimicrowave.com.


Now, I will see if I can be more efficient with my CSS/JS inclusion... I want them to only load when this is visible rather than weighing down the entire website.

thanks for your help!

User avatar
david-ebt
Captain (CAPT)
Captain (CAPT)
Posts: 253
Joined: Fri Dec 31, 2010 10:12 am

Re: CSS Vertical Left Category Flyout Menu

Post by david-ebt » Fri Dec 30, 2011 10:23 am

Looks nice! Good work!
David
http://www.ecombuildertoday.com
Enhanced Reporting for AbleCommerce
Image

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Mon Jan 09, 2012 2:16 am

Anyone off the top of their head know how to enumerate all navigation items (categories, products, links, webpages)? I'm ready to expand the flyout menus to more than just categories. Ideally I'd like to show categories, links, and webpages, while ignoring products.

Something like CatalogNodeDataSource.LoadForStore(" NAME ASC ");

User avatar
david-ebt
Captain (CAPT)
Captain (CAPT)
Posts: 253
Joined: Fri Dec 31, 2010 10:12 am

Re: CSS Vertical Left Category Flyout Menu

Post by david-ebt » Mon Jan 09, 2012 12:38 pm

Take a look at the Conlib\CatalogTree control. Here's the code for the AddNodes function. It loops through the items in a node doing different things for each node item type.

Code: Select all

    protected void AddSubNodes(TreeViewNode parentNode, int currentLevel)
    {
        ComponentArt.Web.UI.TreeViewNode node;
        int rootCategoryId = AlwaysConvert.ToInt(parentNode.ID.Substring(9));
        
        CatalogNodeCollection catalogNodes = null;
        if (!_ShowAllNodes)
        {
            catalogNodes = CatalogNodeDataSource.LoadForCriteria("CategoryId = " + rootCategoryId + " And CatalogNodeTypeId = " + (int)CatalogNodeType.Category);
        }
        else
        {
            catalogNodes = CatalogNodeDataSource.LoadForCategory(rootCategoryId);
        }

        foreach (CatalogNode catalogNode in catalogNodes)
        {
            // SKIP NON-PUBLIC NODES
            if (catalogNode.Visibility != CatalogVisibility.Public) continue;

            switch (catalogNode.CatalogNodeType)
            {
                case CatalogNodeType.Category:
                    Category category = ((Category)catalogNode.ChildObject);
                    if (category != null)
                    {
                        node = new ComponentArt.Web.UI.TreeViewNode();
                        node.ID = "Category_" + category.CategoryId.ToString();
                        node.Text = category.Name;
                        node.NavigateUrl = category.NavigateUrl;
                        node.ImageUrl = "category.gif";

                        if (currentLevel < PreExpandLevel)
                        {
                            node.Expanded = true;
                            AddSubNodes(node, currentLevel + 1);
                        }
                        else
                        {
                            node.Expanded = false;
                            node.ContentCallbackUrl = "~/CatalogTreeXmlGenerator.ashx?CategoryId=" + category.CategoryId.ToString() + "&ShowAllNodes=" + ShowAllNodes;
                        }                        
                        parentNode.Nodes.Add(node);
                    }
                    break;
                case CatalogNodeType.Product:
                    Product product = ((Product)catalogNode.ChildObject);
                    if (product != null)
                    {
                        node = new ComponentArt.Web.UI.TreeViewNode();
                        node.ID = "Product_" + product.ProductId.ToString();
                        node.Text = product.Name;
                        node.NavigateUrl = product.NavigateUrl;
                        node.ImageUrl = "product.gif";
                        parentNode.Nodes.Add(node);
                    }
                    break;
                case CatalogNodeType.Webpage:
                    Webpage webpage = ((Webpage)catalogNode.ChildObject);
                    if (webpage != null)
                    {
                        node = new ComponentArt.Web.UI.TreeViewNode();
                        node.ID = "Webpage_" + webpage.WebpageId.ToString();
                        node.Text = webpage.Name;
                        node.NavigateUrl = webpage.NavigateUrl;
                        node.ImageUrl = "webpage.gif";
                        parentNode.Nodes.Add(node);
                    }
                    break;

                case CatalogNodeType.Link:
                    Link link = ((Link)catalogNode.ChildObject);
                    if (link != null)
                    {
                        node = new ComponentArt.Web.UI.TreeViewNode();
                        node.ID = "Link_" + link.LinkId.ToString();
                        node.Text = link.Name;
                        node.NavigateUrl = link.NavigateUrl;
                        node.ImageUrl = "link.gif";
                        parentNode.Nodes.Add(node);
                    }
                    break;
                default: break;
            }
        }
    }
David
http://www.ecombuildertoday.com
Enhanced Reporting for AbleCommerce
Image

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Mon Jan 09, 2012 4:25 pm

Beautiful! Thanks, David-ebt.

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Wed Jan 11, 2012 6:35 pm

It's been a while since I've counted this many braces! ...wait that's not true. When I was taught programming, there weren't braces (in FORTRAN77).

But I digress.

I got it working. fly-outs that handle categories, links, and pages:

Code: Select all

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Text;
using System.Text.RegularExpressions;
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.Common;
using CommerceBuilder.Marketing;
using CommerceBuilder.Orders;
using CommerceBuilder.Utility;
using CommerceBuilder.Catalog;
using CommerceBuilder.Products;

public partial class TechSupportFlyout : UserControl
{
    StringBuilder sb = new StringBuilder();

    protected void Page_Load(object sender, System.EventArgs e)
    {
        
 				CatalogNodeCollection catalogNodes = null;

        catalogNodes = CatalogNodeDataSource.LoadForCategory(71);

        if (catalogNodes.Count == 0)
        {
            return;
        }

        sb.Append("<ul id='sidenav' class='x8menus'>");
        
        foreach (CatalogNode catalogNode in catalogNodes)
        {
	        // SKIP NON-PUBLIC NODES
	        if (catalogNode.Visibility != CatalogVisibility.Public) continue;
	       	{
						//what type of node are you
						switch (catalogNode.CatalogNodeType)
						{
	            case CatalogNodeType.Category:            	
		         		Category category = ((Category)catalogNode.ChildObject);
		         		if (category != null)
	            	{
   			         	sb.Append("<li class='toplevelmenu");
		             	if (CatalogNodeDataSource.LoadForCategory(category.CategoryId).Count>0)
		               {               
		             	  sb.Append(" hasSubMenu");
		             	 }
		           		sb.Append("'><a class='toplevel' href='" + Regex.Replace(category.NavigateUrl, "~", "") + "'>" + category.Name + "</a>");
									Category category1 = ((Category)catalogNode.ChildObject);
		              if (CatalogNodeDataSource.LoadForCategory(category1.CategoryId).Count>0)
		              {
		             		sb.Append("<ul class='navMenu'>");
		                RecursiveLoadChildren(catalogNode.CatalogNodeId);
		          			sb.Append("</ul>");
		             	}
	            	}
	      				break;
	            case CatalogNodeType.Product:
	            	break;
	            case CatalogNodeType.Webpage:
	            	Webpage webpage = ((Webpage)catalogNode.ChildObject);
                if (webpage != null)
                {
									sb.Append("<li><a href='" + Regex.Replace(webpage.NavigateUrl, "~", "") +"'>"+ webpage.Name + "</a></li>");
                }
                break;
							case CatalogNodeType.Link:
								Link link = ((Link)catalogNode.ChildObject);
                if (link != null)
                {
									sb.Append("<li><a href='" + Regex.Replace(link.NavigateUrl, "~", "") + "'>" + link.Name + "</a></li>");
                }
								break;
	            default: break;		                
				  sb.Append("</li>");
	        	}
					}	
							
        } //end for each catalognode

        sb.Append("</ul>");
        TechSupportDetail.Text = sb.ToString();
        
    } // end page load

    protected void RecursiveLoadChildren(int CatNodeId)
        {
            CatalogNodeCollection children = CatalogNodeDataSource.LoadForCategory(CatNodeId);

            foreach (CatalogNode catalogNode in children)
            {
           	if (catalogNode.Visibility != CatalogVisibility.Public) continue;
           		{
		        	switch (catalogNode.CatalogNodeType)
		            {
                case CatalogNodeType.Category:
                	Category category = ((Category)catalogNode.ChildObject);
                  if (category != null)
                    {
                    //category.CategoryId.ToString();
                    //category.Name;
                    //category.NavigateUrl;
		                if (CatalogNodeDataSource.LoadForCategory(category.CategoryId).Count>0)
		                	{
	                    sb.Append("<li><a href='" + Regex.Replace(category.NavigateUrl, "~", "") + "'>" + category.Name + " > </a>");
	                    sb.Append("<ul class='navMenu'>");
		                    RecursiveLoadChildren(category.CategoryId);
		                    sb.Append("</ul></li>");
		                	}
		                else
		                	{
											//mixer search has no child nodes, but we show it anyway... don't hide empty categories
											//if (CatalogNodeDataSource.LoadForCategory(catalogNode.CatalogNodeId).Count>0)
											//{
												sb.Append("<li><a href='" + Regex.Replace(category.NavigateUrl, "~", "") + "'>" + category.Name + "</a></li>");
											//}
		                	}

                		}
                	break;
                case CatalogNodeType.Product:
                    Product product = ((Product)catalogNode.ChildObject);
                    if (product != null)
                    {
                    	// I have NOT TESTED products in the flyouts
											sb.Append("<li><a href='" + Regex.Replace(product.NavigateUrl, "~", "") + "'>" + product.Name + "</a></li>");
                    }
                    break;
                case CatalogNodeType.Webpage:
                    Webpage webpage = ((Webpage)catalogNode.ChildObject);
                    if (webpage != null)
                    {
											sb.Append("<li><a href='" + Regex.Replace(webpage.NavigateUrl, "~", "") +"'>"+ webpage.Name + "</a></li>");
                    }
                    break;

                case CatalogNodeType.Link:
                    Link link = ((Link)catalogNode.ChildObject);
                    if (link != null)
                    {
											sb.Append("<li><a href='" + Regex.Replace(link.NavigateUrl, "~", "") + "'>" + link.Name + "</a></li>");
                    }
                    break;
                default: break;
		            }
							}

            }
        } //end function recursiveloadchildren
    } //end user control
thanks again, David!

User avatar
david-ebt
Captain (CAPT)
Captain (CAPT)
Posts: 253
Joined: Fri Dec 31, 2010 10:12 am

Re: CSS Vertical Left Category Flyout Menu

Post by david-ebt » Thu Jan 12, 2012 3:00 pm

Great! Can you post your ascx file code so I can take a look?

Thanks!
David
http://www.ecombuildertoday.com
Enhanced Reporting for AbleCommerce
Image

User avatar
crockettdunn
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 105
Joined: Sun Oct 26, 2008 6:32 pm
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by crockettdunn » Thu Jan 12, 2012 3:19 pm

Here you are. It's not very exciting, because most of the magic happens in CSS/JS:

Code: Select all

<%@Control Language="C#" CodeFile="TechSupportFlyout.ascx.cs" Inherits="TechSupportFlyout" %>

<asp:Panel ID="MainPanel" runat="server" CssClass="section">


               <!-- START CONTENT BOX CONTAINER DO NOT EDIT CONTAINER HTML -->
<div>
	
               <div class="boxContainer"><b class="boxTop"><b class="boxBorder1"></b><b class="boxBorder2 color_a"></b><b class="boxBorder3 color_a"></b><b class="boxBorder4 color_a"></b></b>
                    <div class="box">
                         <div class="boxContent">
                              <!-- START BOX CONTENT -->

    <asp:Panel ID="HeaderPanel" runat="server" CssClass="header">
       <h1 class="header"><asp:Localize ID="HeaderTextLabel" runat="server" Text="Tech Support"></asp:Localize></h1>
    </asp:Panel>
   <asp:Panel ID="TechSupportFlyoutList" runat="server" CssClass="content">  
       <asp:Label ID="TechSupportDetail" CssClass="content" runat="server"></asp:Label>
    </asp:Panel>
                             </div>
                         <div class="clear"></div>
                    </div>
                    <b class="boxBottom"><b class="boxBorder4"></b><b class="boxBorder3"></b><b class="boxBorder2"></b><b class="boxBorder1"></b></b></div>

</div>                    
               <!-- END CONTENT BOX CONTAINER -->
</asp:Panel>

User avatar
RichWendrock
Commander (CMDR)
Commander (CMDR)
Posts: 134
Joined: Sat Apr 05, 2008 12:55 am
Location: Austin Texas
Contact:

Re: CSS Vertical Left Category Flyout Menu

Post by RichWendrock » Fri Jul 20, 2012 5:40 pm

Version 7.0
We have a flyout menu that was custom made for us over three years ago. We did not realize at the time that our Flyout menu can only display two levels, the Primary Category and one subcategory level. I think our code is poorly written because the Unordered List statements are in the html page, not in the code behind file. If you have the flyout menu working for any number of levels, would you please share all sections of your code? (HTML, Code behind, CSS and control files)
Regards,
Richard

http://www.TheHomePageStore.com

AbleCommerce
VERSION: 7.0.7.14588
MSSQL v2005
AC SCHEMA v2005
.NET CLR v2.0.50727.3634

Post Reply