<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>
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>");
}
}
}
}
}
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}