AbleCommerce Shopping Cart Software


http://forums.ablecommerce.com/

CSS Vertical Left Category Flyout Menu

http://forums.ablecommerce.com/viewtopic.php?f=44&t=15019

Page 1 of 1

CSS Vertical Left Category Flyout Menu

Posted: Sat Feb 26, 2011 3:30 pm
by euroluxantiques
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}

Re: CSS Vertical Left Category Flyout Menu

Posted: Mon Mar 14, 2011 7:17 pm
by burmaju
its no good

Re: CSS Vertical Left Category Flyout Menu

Posted: Mon Mar 14, 2011 7:44 pm
by euroluxantiques
Works fine on our website, but you will likely have to make a few modifications for it to work on yours.

Re: CSS Vertical Left Category Flyout Menu

Posted: Thu Dec 29, 2011 1:48 am
by crockettdunn
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();
        
    }

flyout menus- quick variable scope question from C# amateur

Posted: Thu Dec 29, 2011 8:30 pm
by crockettdunn
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

Re: CSS Vertical Left Category Flyout Menu

Posted: Thu Dec 29, 2011 9:26 pm
by david-ebt
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;

Re: CSS Vertical Left Category Flyout Menu

Posted: Thu Dec 29, 2011 9:30 pm
by crockettdunn
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!

Re: CSS Vertical Left Category Flyout Menu

Posted: Fri Dec 30, 2011 10:23 am
by david-ebt
Looks nice! Good work!

Re: CSS Vertical Left Category Flyout Menu

Posted: Mon Jan 09, 2012 2:16 am
by crockettdunn
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 ");

Re: CSS Vertical Left Category Flyout Menu

Posted: Mon Jan 09, 2012 12:38 pm
by david-ebt
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;
            }
        }
    }

Re: CSS Vertical Left Category Flyout Menu

Posted: Mon Jan 09, 2012 4:25 pm
by crockettdunn
Beautiful! Thanks, David-ebt.

Re: CSS Vertical Left Category Flyout Menu

Posted: Wed Jan 11, 2012 6:35 pm
by crockettdunn
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!

Re: CSS Vertical Left Category Flyout Menu

Posted: Thu Jan 12, 2012 3:00 pm
by david-ebt
Great! Can you post your ascx file code so I can take a look?

Thanks!

Re: CSS Vertical Left Category Flyout Menu

Posted: Thu Jan 12, 2012 3:19 pm
by crockettdunn
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>

Re: CSS Vertical Left Category Flyout Menu

Posted: Fri Jul 20, 2012 5:40 pm
by RichWendrock
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)
All times are UTC-05:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/