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:

Re: Horizontal Category Menu

Post by mazhar » Tue Jul 14, 2009 10:15 am

Its working for me. Make sure that sub categories are public you haven't locked or ghosted them.

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

Re: Horizontal Category Menu renedering problems

Post by mazhar » Thu Jul 16, 2009 2:32 am

Willisski wrote: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
ASP.NET Menu control has some known issues with IE8, Safari and Chrome. Please read following threads to fix it for these browsers.

http://blogs.msdn.com/giorgio/archive/2 ... issue.aspx

http://geekswithblogs.net/bullpit/archi ... hrome.aspx

Khaliq
Lieutenant, Jr. Grade (LT JG)
Lieutenant, Jr. Grade (LT JG)
Posts: 26
Joined: Tue Dec 16, 2008 2:00 am

Re: Horizontal Category Menu

Post by Khaliq » Thu Jul 16, 2009 5:40 am

asp:Menu control does not work well with IE8, Chrome and Safari...

Fix for IE8
Define the DynamicMenuStyle for the asp:Menu control and set a CSS class for it.
Use a value of z-index for that class greater than 0.

Code: Select all

.DynamicMenuCssClass
{
z-index: 999;
}

Code: Select all

<DynamicMenuStyle CssClass=”DynamicMenuCssClass”/>

Fix for Chrome/Safari
Add the following code to Page_Load method of your control

Code: Select all

		if(Request.UserAgent.IndexOf("AppleWebKit") >= 0 )
		{
			Request.Browser.Adapters.Clear();
		}

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 Aug 16, 2009 6:38 am

Hi Mazhar
Back from vacation and still trying to figure out this menu situation, under the sample catagory there should be at least 2 subs and i am not showing any. Perhaps you could check it out at http://mysurplus.ca/default.aspx
Thanks
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 Aug 17, 2009 7:41 am

most probably you are checking it on IE8. Apply the above fix posted by khaliq. I just checked your page in FireFox and its showing child categories.

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 Aug 17, 2009 7:59 am

Hi
Yes i was checking it on IE8, since i am by no means an asp programmer would it be possible for you to tell me where i would put that code.
I did in the meantime install firefox and it appears to be working, I did add some subcatagories that do show up now if only i could keep the fields in the dropdown menu the same width.

Wil

DBounlom
Lieutenant (LT)
Lieutenant (LT)
Posts: 62
Joined: Wed Sep 09, 2009 1:26 pm

Re: Horizontal Category Menu

Post by DBounlom » Fri Nov 06, 2009 4:37 pm

Sorry for being ignorant, but how do you "Define the DynamicMenuStyle for the asp:Menu control and set a CSS class for it." Where does this following code go? Thanks.

Code: Select all

.DynamicMenuCssClass
{
z-index: 999;
}

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 Nov 09, 2009 6:28 am

You put these styles in your current theme's CSS file. Under you website/App_Themes folder locate your current theme folder and put this in style.css file under that folder.

DBounlom
Lieutenant (LT)
Lieutenant (LT)
Posts: 62
Joined: Wed Sep 09, 2009 1:26 pm

Re: Horizontal Category Menu

Post by DBounlom » Mon Nov 09, 2009 1:49 pm

Hi Mazhar,

Thanks for responding. I tried putting this code

Code: Select all

.DynamicMenuCssClass
{
z-index: 999;
}
in the style.css file under the current theme that we use. Within that file, I tried putting it in the second line, main panel, or store header section. None of it seemed to work. I still get white boxes in IE8.

Also, in the CategoryMenuEx.ascx I would put this code

Code: Select all

<DynamicMenuStyle CssClass=”DynamicMenuCssClass”/>
so that it looks like the following.

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 CssClass=”DynamicMenuCssClass” BackColor="#E3EAEB" />
        <DynamicSelectedStyle BackColor="#1C5E55" />
        <DynamicMenuItemStyle HorizontalPadding="5px" VerticalPadding="2px"
            BackColor="#FF9933" />
        <StaticHoverStyle BackColor="#666666" ForeColor="White" />
    </asp:Menu>
Is this correct? Thanks.

DBounlom
Lieutenant (LT)
Lieutenant (LT)
Posts: 62
Joined: Wed Sep 09, 2009 1:26 pm

Re: Horizontal Category Menu

Post by DBounlom » Thu Nov 19, 2009 12:53 pm

Does anyone know specific instructions on how to get the horizontal menu to work in IE8? I am not a programmer, and I haven't been able to figure it out. :(

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 Dec 08, 2009 5:40 am

I have uploaded the modified files having fix for IE8 and Safari in actual posts(First Post of this thread). You can make use of those updated files.

DBounlom
Lieutenant (LT)
Lieutenant (LT)
Posts: 62
Joined: Wed Sep 09, 2009 1:26 pm

Re: Horizontal Category Menu

Post by DBounlom » Tue Dec 08, 2009 5:58 pm

Thanks Mazhar. I appreciate it. It works great!

If I zoom in so that the resolution is low, my horizontal menu scrolls off to the right because I guess it is too long, but the other items on the page maintain a proper ratio. Is there a way to auto fit the horizontal menu in lower resolutions?

I've tried

Code: Select all

<div style="clear: both; margin-top: 6px; text-align:-moz-center;">
and I've also tried putting in

Code: Select all

<center> ... </center>
I can't get my horizontal menu to autofit regardless of the resolution size. Thanks for any help.

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 Dec 10, 2009 6:23 am

May be you need to set menu items width in % format instead. I am not sure but it may workout.

Post Reply