Horizontal Category Menu

This forum is where we'll mirror posts that are of value to the community so they may be more easily found.
User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Horizontal Category Menu

Post by mazhar » Thu Oct 16, 2008 6:51 am

This control will display horizontal categories menu when placed in the store pages. The control makes use of the ASP.NET menu control. You can extend the menu styles to meet your own needs. In order to use the control extract the attachment and place CategoryMenuEx.ascx file into you ConLib folder and then use it in scriptlets as below.

Code: Select all

[[ConLib:CategoryMenuEx]]
Edit Made:- I have uploaded the modified version of the control to include the fix for IE8 and Safari discussed in later posts.
Attachments
CategoryMenuEx.zip
(997 Bytes) Downloaded 518 times
hrmenu.jpg
(174.66 KiB) Downloaded 31100 times

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Fri Oct 17, 2008 12:47 pm

If you do not want the extra HTML, i mean you do not want to the caption etc. Edit the CategoryMenuEx.ascx file and change the following contents

Code: Select all

<div class="pageHeader">
    <div class="caption">
        <h1>
            <asp:Localize ID="Caption" runat="server" Text="Categories"></asp:Localize>
        </h1>
    </div>
</div>
<div style="clear: both; margin-top: 6px;">
    <asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>
</div>
and make them look like

Code: Select all

<asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>

User avatar
mfreeze
Commodore (COMO)
Commodore (COMO)
Posts: 421
Joined: Mon Jan 24, 2005 2:07 pm
Location: Washington, NJ
Contact:

Re: Horizontal Category Menu

Post by mfreeze » Mon Feb 02, 2009 11:12 am

Mazhar,

Where can I find all possible settings for this menu. For example, if I wanted a background image instead of a color or if I wanted to change the arrow to another character?
Mary E Freeze

Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development

http://www.ffgraphics.com

User avatar
mfreeze
Commodore (COMO)
Commodore (COMO)
Posts: 421
Joined: Mon Jan 24, 2005 2:07 pm
Location: Washington, NJ
Contact:

Re: Horizontal Category Menu

Post by mfreeze » Mon Feb 02, 2009 4:03 pm

Never mind. I found it. Changed the code to this:

<asp:Menu ID="CategoryMenu" runat="server" Orientation="Vertical" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px" width="194px">
<StaticSelectedStyle CssClass="menu_item" />
<StaticMenuItemStyle CssClass="menu_item" />
<StaticHoverStyle CssClass="menu_hover" />
<DynamicHoverStyle CssClass="menu_hover" />
<DynamicMenuStyle CssClass="menu_item" />
<DynamicSelectedStyle CssClass="menu_item" />
<DynamicMenuItemStyle CssClass="menu_item" />

Worked like a charm.
Mary E Freeze

Freeze Frame Graphics
Web Hosting and Design, ASP and CFMX Development

http://www.ffgraphics.com

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Tue Feb 03, 2009 6:26 am

A good tutorial about ASP.NET menu control
http://quickstarts.asp.net/QuickStartv2 ... /menu.aspx

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Tue Mar 24, 2009 3:52 am

In order to include all catalog nodes to menu you need to update PopulateMenuItem method as below

Code: Select all

private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = new CategoryCollection();
        CatalogNodeCollection otherNodes = new CatalogNodeCollection();

        CatalogNodeCollection nodes = CatalogNodeDataSource.LoadForCategory(categoryId);
        foreach (CatalogNode node in nodes)
        {
            if (node.CatalogNodeType == CatalogNodeType.Category)
                children.Add((Category)node.ChildObject);
            else
                otherNodes.Add(node);
        }
        
        foreach (Category child in children)
        {
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);

            foreach (CatalogNode node in otherNodes)
            {
                menuItem = new MenuItem();
                menuItem.Text = node.Name;
                menuItem.Value = node.CatalogNodeId.ToString();
                menuItem.NavigateUrl = node.NavigateUrl;
                parentMenu.ChildItems.Add(menuItem);
            }
        }

sdlong02
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 95
Joined: Mon Jan 19, 2009 2:33 pm

Re: Horizontal Category Menu

Post by sdlong02 » Fri May 29, 2009 1:32 pm

I integrated the horizontal style menu at the bottom of my header as a new row, but for whatever reason when I try to expand one of the category selections the first row shifts to the right.

Code: Select all

<table id="storeHeader" cellpadding="0" cellspacing="0">
	
<tr>
		<td class="logo">
		        <a href="~/Default.aspx">[[ConLib:StoreLogo]]</a>
		</td>
		<td class="headerContent" align="right" valign="top">
			<div class="shortcuts">
				#if($customer.IsAnonymous)
					<a href="~/Login.aspx" class="login">Login</a>
				#else
					<a href="~/Logout.aspx" class="login">Logout</a>
				#end
				<a href="~/Members/MyAccount.aspx" class="acct">Account</a>
				<a href="~/Members/MyWishlist.aspx" class="wishlist">Wishlist</a>
				<a href="~/Basket.aspx" class="basket">Basket</a>
				#if($customer.IsAdmin)
					<a href="~/Admin/Default.aspx" class="admin">Admin</a>
				#end
			</div>
			<div class="search">
				[[ConLib:SimpleSearch]]
			</div>
		</td>
	</tr>
	<tr>
		<td class="navigation" colspan="2">
			<div class="content" style="float:left;">
				<a href="~/Default.aspx" class="tab">Home</a>
				<a href="~/Search.aspx" class="tab">Product Finder</a>	
				<a href="~/AdvancedSearch.aspx" class="tab">Advanced Search</a>	
				#if ($store.Currencies.Count > 1 ) 
					<a href="~/Currencies.aspx" class="tab">Currencies</a>
				#end
				<a href="~/ContactUs.aspx" class="tab">Contact Us</a>
			</div>
		</td>
	</tr>

<tr>
<td style="background-color: #1C5E55">
<div style="float: left;"> 
[[Conlib:Custom\CategoryMenuEx]]
    </td>
    </tr>
</div>
</table>
That's what my scriptlet looks like -- so when I try to expand a menu, the top row of shortcuts shifts completely to the right, usually off the page. When I refresh the page it sets back to it's dynamic position at the right side of the window.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Sat May 30, 2009 2:29 am

Change your following part

Code: Select all

<tr>
<td style="background-color: #1C5E55">
<div style="float: left;">
[[Conlib:Custom\CategoryMenuEx]]
    </td>
    </tr>
</div>
</table>
to

Code: Select all

<tr>
<td style="background-color: #1C5E55" colspan="2">
<div style="float: left;">
[[Conlib:Custom\CategoryMenuEx]]
</div>
    </td>
    </tr>

</table>

sdlong02
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 95
Joined: Mon Jan 19, 2009 2:33 pm

Re: Horizontal Category Menu

Post by sdlong02 » Wed Jun 03, 2009 10:18 am

Thanks Mazhar,

worked nicely - wish I could figure the simple stuff out :cry:

User avatar
efficiondave
Commander (CMDR)
Commander (CMDR)
Posts: 151
Joined: Tue Dec 02, 2008 10:20 am
Location: St. Louis Missouri
Contact:

Re: Horizontal Category Menu

Post by efficiondave » Wed Jun 24, 2009 4:18 pm

I prefer using the Component Art menu for this. It's trivial to adapt it from the code posted for the Vertical/Left Flyout Menu from this thread.
viewtopic.php?f=47&t=7986

deadlybuda
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 22
Joined: Wed Jun 24, 2009 3:39 pm

Re: Horizontal Category Menu

Post by deadlybuda » Wed Jul 08, 2009 4:51 pm

Hi! What would I edit so that only certain categories are displayed?

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Thu Jul 09, 2009 3:25 am

you can put some code to make sure that control doesn't add categories with specific CategoryId to menu.

deadlybuda
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 22
Joined: Wed Jun 24, 2009 3:39 pm

Re: Horizontal Category Menu

Post by deadlybuda » Thu Jul 09, 2009 10:19 am

Hi there Master Yoda!
I was playing with the code, but I can't seem to figure out where the script is pulling the Category ids from. I'm new to ASP, so I've been fumbling around. If it makes any difference, I am using the MSSQL 2005 express database.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Thu Jul 09, 2009 10:40 am

Edit the control file and replace

Code: Select all

<script runat="server"> 
................
.................
</script>
part with following control

Code: Select all

<script runat="server">
    
    int _CategoryId;
    int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
    
    private void PopulateMenu() 
    {
        CategoryMenu.Items.Clear();
        CategoryCollection children = CategoryDataSource.LoadForParent(0, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            menuItem.NavigateUrl = child.NavigateUrl;
            if (CategoryDataSource.CountForParent(child.CategoryId) > 0)
                PopulateMenuItem(menuItem, child.CategoryId);
            CategoryMenu.Items.Add(menuItem);
        }
        CategoryMenu.DataBind();
    }
    private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);
        }
    }
</script>
Now Go to merchant module and have a look at the categories. For every category which you want to hide first click the edit option it will take you to the EditCategory.aspx page. In this page check its URL it will have CategoryId={some number} for example CategoryId=1 so this is your category id. Note this id and go back to the control file and enter it in following statement

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
For example 5,8,9 are the category ids of all those categories I don't want the control to render.

deadlybuda
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 22
Joined: Wed Jun 24, 2009 3:39 pm

Re: Horizontal Category Menu

Post by deadlybuda » Thu Jul 09, 2009 10:57 am

THANK YOU!!!!! :D :D :D :D :D :D :D
Worked perfectly!
For future reference, where is the list of banned categories coming from?

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Thu Jul 09, 2009 11:20 am

You are deciding which category to banned by making an entry of it. See following code part

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
Where in new int[] { 5,8,9 }; where you are telling code not to show these categories
and _BannedCategoriesList.AddRange(_BannedCategories); is converting array to list for easy search operation against categories. So all you need is to create an entry about any category you don't want to be listed by control in following code part
{ 5,8,9 }. For example if there is a category with id 10 then update code would be

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9,10 };

deadlybuda
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 22
Joined: Wed Jun 24, 2009 3:39 pm

Re: Horizontal Category Menu

Post by deadlybuda » Thu Jul 09, 2009 11:41 am

I understand that. Does the CategoryMenuEx script connect directly with the database, or does it call a different file that queries the database?

User avatar
Willisski
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 82
Joined: Thu Oct 27, 2005 1:46 am
Location: http://www.Thejibshop.com
Contact:

Re: Horizontal Category Menu renedering problems

Post by Willisski » Thu Jul 09, 2009 11:56 am

I have been playing around with this menu and it works great in firefox. but in IE8 turns all of the sub menus white. Has anyone else had these issues?

Greg

windsurfer
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 44
Joined: Sat Jun 20, 2009 6:14 pm

Re: Horizontal Category Menu

Post by windsurfer » Sun Jul 12, 2009 5:27 am

Hi Mazhar
I installed your menu utility and wanted to edit the file so it would expand. I replaced from line 13 to 42 with your modification and got this error message " [[ConLib:CategoryMenuEx]] c:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\884df278\f14e597f\App_Web_categorymenuex.ascx.61f0840.cvfkvxpa.0.cs(286): error CS1513: } expected " so i added another closing bracket at line 46
after i did that i get an error message saying " [[ConLib:CategoryMenuEx]] c:\able\ConLib\CategoryMenuEx.ascx(10): error CS0103: The name 'PopulateMenu' does not exist in the current context "

Am i missing something ?
Or do you perhaps have the full [[ConLib:CategoryMenuEx]] file available that allows for all categories and subcategories to expand?

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Mon Jul 13, 2009 5:04 am

Here are the complete modified contents with hiding specific categories support

Code: Select all

<%@ Control Language="C#" ClassName="CategoryMenuEx" %>

<script runat="server">
    
    int _CategoryId;
    int[] _BannedCategories = new int[] { 5,8,9 };
    System.Collections.ArrayList _BannedCategoriesList = new ArrayList();
    protected void Page_Load(object sender, EventArgs e)
    {
        _CategoryId = PageHelper.GetCategoryId();
        if (!Page.IsPostBack)
        {
            _BannedCategoriesList.AddRange(_BannedCategories);
            PopulateMenu();
        }
    }
    
    private void PopulateMenu() 
    {
        CategoryMenu.Items.Clear();
        CategoryCollection children = CategoryDataSource.LoadForParent(0, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            menuItem.NavigateUrl = child.NavigateUrl;
            if (CategoryDataSource.CountForParent(child.CategoryId) > 0)
                PopulateMenuItem(menuItem, child.CategoryId);
            CategoryMenu.Items.Add(menuItem);
        }
        CategoryMenu.DataBind();
    }
    private void PopulateMenuItem(MenuItem parentMenu,int categoryId)
    {
        CategoryCollection children = CategoryDataSource.LoadForParent(categoryId, true);
        foreach (Category child in children)
        {
            if (_BannedCategoriesList.Contains(child.CategoryId))
                continue;
            MenuItem menuItem = new MenuItem();
            menuItem.Text = child.Name;
            menuItem.Value = child.CategoryId.ToString();
            if (CategoryDataSource.CountForParent(child.CategoryId) > 1)
                PopulateMenuItem(menuItem, child.CategoryId);
            menuItem.NavigateUrl = child.NavigateUrl;
            parentMenu.ChildItems.Add(menuItem);
        }
    }
</script>
<div class="pageHeader">
    <div class="caption">
        <h1>
            <asp:Localize ID="Caption" runat="server" Text="Categories"></asp:Localize>
        </h1>
    </div>
</div>
<div style="clear: both; margin-top: 6px;">
    <asp:Menu ID="CategoryMenu" runat="server" Orientation="Horizontal" BackColor="#E3EAEB" DynamicHorizontalOffset="2" Font-Names="Verdana" Font-Size="Small" ForeColor="#666666" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#1C5E55" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#666666" ForeColor="White" />
        <DynamicMenuStyle BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" 
            BackColor="#FF9933" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>
</div>

windsurfer
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 44
Joined: Sat Jun 20, 2009 6:14 pm

Re: Horizontal Category Menu

Post by windsurfer » Mon Jul 13, 2009 5:16 am

Hi Mazhar
Modified the file and get an error "[[ConLib:CategoryMenuEx]] C:\able\ConLib\CategoryMenuEx.ascx(3): error BC30188: Declaration expected."
Am I missing something?
Wil

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Mon Jul 13, 2009 5:34 am

Sorry that was due to missing definition line in above code. I just updated the code so try it again from above post.

windsurfer
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 44
Joined: Sat Jun 20, 2009 6:14 pm

Re: Horizontal Category Menu

Post by windsurfer » Mon Jul 13, 2009 5:43 am

Hi Mazhar
Works like a clean diaper on a freshly washed baby but still not showing more than 1 category when dropped down. Subs don't show.

User avatar
mazhar
Master Yoda
Master Yoda
Posts: 5084
Joined: Wed Jul 09, 2008 8:21 am
Contact:

Re: Horizontal Category Menu

Post by mazhar » Mon Jul 13, 2009 5:57 am

Its because of following line

Code: Select all

int[] _BannedCategories = new int[] { 5,8,9 };
just make it look like

Code: Select all

int[] _BannedCategories = new int[] {  };
and it won't stop any category from listing. In fact the last mod you merged back in to actual control file is related to stop specific categories to be shown. So if you don't need this functionality you can just use the control available in actual attachment.

windsurfer
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 44
Joined: Sat Jun 20, 2009 6:14 pm

Re: Horizontal Category Menu

Post by windsurfer » Mon Jul 13, 2009 6:08 am

Yes that stops the banning but i still don't get any subcategories showing in the drop down.

Post Reply