Show categories horizontally with dropdown for sub categories

Is it possible to change the layout so the category menu will be shown on top of the page horizontally and the sub categories shows as a dropdown on hovering the main category.
Many of us need a navigation menu with product categories from left to right and the main items on the left or right hand side.

Can anyone help with this?
What is the effect when the new release comes if changes are made to the controls and/or master pages?

_

I have implemented the categories in Horizontal menu. We need to customize the category navigation page and generate the XML from the GetAllCategories SP, and assign this XML source with asp:menu control.

If you need then let me know, I will share the code.

Thank You
Venkat

I have too implemented the categories in Horizontal menu

Need to rewrite categorynavigation.ascx and categorynavigation.cs

If you need then let me know, I will share the code.

I Need it very much, I would love the code please, thank you.

follow the link for code or paste it in new browser

http://nopcommerce.com/Boards/Topic.aspx?TopicID=1139

after implemented do three small changes.

1. add following line in your master page for menu style
<link href="../App_Themes/administration/menu.css" type="text/css" rel="stylesheet" />

2. Set Orientation property to Horizontal in asp:menu control.

3. add cssselectorclass="AdminMenu" in the same asp:menu control

E.g.,
<asp:Menu runat="server" ID="mnuCategories" BackColor="#B5C7DE" DynamicHorizontalOffset="2" Orientation ="Horizontal"
        cssselectorclass="AdminMenu" Font-Names="Verdana" Font-Size="0.8em" ForeColor="#284E98" StaticSubMenuIndent="10px">
        <StaticSelectedStyle BackColor="#507CD1" />
        <StaticMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <DynamicHoverStyle BackColor="#284E98" ForeColor="White" />
        <DynamicMenuStyle BackColor="#B5C7DE" />
        <DynamicSelectedStyle BackColor="#507CD1" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px" />
        <StaticHoverStyle BackColor="#284E98" ForeColor="White" />
    </asp:Menu>

Thanks
Venkat

CategoryNavigation.ascx

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.CategoryNavigation"
    CodeBehind="CategoryNavigation.ascx.cs" %>

<div class="category-navigation">

<asp:Menu ID="NavigationMenu2" runat="server" Orientation="Horizontal" 
        BorderColor="Black" BorderStyle="Solid" DynamicVerticalOffset="2" Height="70px">
        
</asp:Menu>

</div>

CategoryNavigation.ascx.cs

//------------------------------------------------------------------------------
// The contents of this file are subject to the nopCommerce Public License Version 1.0 ("License"); you may not use this file except in compliance with the License.
// You may obtain a copy of the License at  https://www.nopcommerce.com/License.aspx. 
// 
// Software distributed under the License is distributed on an "AS IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or implied. 
// See the License for the specific language governing rights and limitations under the License.
// 
// The Original Code is nopCommerce.
// The Initial Developer of the Original Code is NopSolutions.
// All Rights Reserved.
// 
// Contributor(s): _______. 
//------------------------------------------------------------------------------

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Text;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using NopSolutions.NopCommerce.BusinessLogic.Categories;
using NopSolutions.NopCommerce.BusinessLogic.Products;
using NopSolutions.NopCommerce.BusinessLogic.SEO;
using NopSolutions.NopCommerce.Common.Utils;
using NopSolutions.NopCommerce.BusinessLogic.Media;
using NopSolutions.NopCommerce.BusinessLogic.Configuration.Settings;
namespace NopSolutions.NopCommerce.Web.Modules
{
    public partial class CategoryNavigation : BaseNopUserControl
    {
        #region Handlers
        protected void Page_Load(object sender, EventArgs e)
        {
            //------------
        }
        #endregion

        #region Overrides
        protected override void CreateChildControls()
        {

            if (!this.ChildControlsCreated)
            {
                CreateMenu();
                base.CreateChildControls();
                ChildControlsCreated = true;
            }
        }

        #endregion

        #region Utilities
        //Menu NavigationMenu = null;
        protected void CreateMenu()
        {

            NavigationMenu2.Orientation = Orientation.Horizontal;


            /*
            // Set the properties of the Menu control.
            NavigationMenu = new Menu();
            NavigationMenu.ID = "NavigationMenu";

            */

            CategoryCollection breadCrumb = null;
            Category currentCategory = CategoryManager.GetAllCategories(0)[0];


            if (currentCategory != null)
                breadCrumb = CategoryManager.GetBreadCrumb(currentCategory.CategoryID);
            else
                breadCrumb = new CategoryCollection();

            CreateChildMenu(breadCrumb, 0, currentCategory, 0);
        }

        MenuItem MainMenuItem = null;
        MenuItem SubMenuItem = null;
        protected void CreateChildMenu(CategoryCollection breadCrumb, int rootCategoryID, Category currentCategory, int level)
        {

            int padding = level++ * 15;
            foreach (Category category in CategoryManager.GetAllCategories(rootCategoryID))
            {

                string URL = SEOHelper.GetCategoryURL(category.CategoryID);
                string CategoryName = Server.HtmlEncode(category.Name);
                string ImgURL = PictureManager.GetPictureUrl(category.PictureID, SettingManager.GetSettingValueInteger("Media.Category.ThumbnailImageSize", 125), false);


                if (padding > 0)
                {
                    //SubMenu
                    SubMenuItem = CreateMenuItem(CategoryName, URL, CategoryName);

                    // Add the submenu items to the ChildItems
                    // collection of the root menu item.
                    MainMenuItem.ChildItems.Add(SubMenuItem);

                }
                else
                { //MainMenu
                    MainMenuItem = CreateMenuItem("", URL, CategoryName, ImgURL);
                    NavigationMenu2.Items.Add(MainMenuItem);
                    //NavigationMenu.

                }
                for (int i = 0; i <= breadCrumb.Count - 1; i++)
                    CreateChildMenu(breadCrumb, category.CategoryID, currentCategory, level);
            }
            //phCategories.Controls.Add(NavigationMenu);

        }

        MenuItem CreateMenuItem(String text, String url, String toolTip, String ImageUrl)
        {// Create a new MenuItem object.
            MenuItem menuItem = new MenuItem();

            // Set the properties of the MenuItem object using
            // the specified parameters.
            menuItem.Text = text;
            menuItem.NavigateUrl = url;
            menuItem.ToolTip = toolTip;
            menuItem.ImageUrl = ImageUrl;
            //menuItem.PopOutImageUrl = ImageUrl;
            menuItem.Value = text;



            return menuItem;

        }

        MenuItem CreateMenuItem(String text, String url, String toolTip)
        {

            // Create a new MenuItem object.
            MenuItem menuItem = new MenuItem();

            // Set the properties of the MenuItem object using
            // the specified parameters.
            menuItem.Text = text;
            menuItem.NavigateUrl = url;
            menuItem.ToolTip = toolTip;
            //menuItem.ImageUrl = ImageUrl;
            menuItem.Value = text;

            return menuItem;

        }


        #endregion
    }
}

venkat how your menu works in IE6, IE7?

Anton,
So if I simply copy and paste your code over the top of the code in my two files it should work? What else do I need to do for it to work?

Should work. It is necessary to remove excess ad <nopCommerce:CategoryNavigation ID="ctrlCategoryNavigation" runat="server" />. And add to the place where the menu should be. Probably in header.ascx

my menu displays wrong menu in IE6, IE7. I am working on this problem