Support for CSS Flyout Menu

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif is repeating itself. Any idea how to fix this?

It looks fine in Firefox and Safari browsers.

Thanks

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif image is repeating itself. Any idea how to fix this?

It looks fine in Firefox and Safari browsers.

Thanks

ckosloff:

IE7 does not need htc, it is only for IE6.
Does your site work in IE7?

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

https://www.gameroomguys.com/shop

I AM GOING INSANE! :)

Rhitty:

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

www.gameroomguys.com/shop

I AM GOING INSANE! :)
This website does work in IE7, however not in IE6, which confirms what I said before.
You need to set the path to htc exactly like so:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
and of course make sure that csshover.htc is in that folder.
You may also try the new version of csshover (I didn't test yet), which you can find here:
http://www.xs4all.nl/~peterned/htc/csshover2.htc
make sure you add a 2 to your path, if you use it.

JGraphics:

The CSS flyout categories are working for me except in Internet Explorer, the b1.gif image is repeating itself. Any idea how to fix this?
It looks fine in Firefox and Safari browsers.
Thanks
From post #83 in this same thread:
FYI, I did eliminate some errors in IE6 by adding this line:
div#nav-cat li {
background-image: url(../images/b1.gif);
background-repeat: no-repeat;
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
}

Rhitty:

it does not work in i.e 6 or 7. below is where i am testing. you can see that i directly copied the css which does not flyout.

www.gameroomguys.com/shop

I AM GOING INSANE! :)

As our friend above states who has already benefitted from my experience with this mod before,you need to change your behavior line.

At the moment it appears to be referring to a version on your testing own computer and not a file on your server.

This also applies to a background image too...

Rhitty:

i appreciate your assistance. my server company states that the mime htc is there but my flyouts still do not work in i.e.. Any help would make me happy as i have spent countless hours fidgeting with this.

thanks

EDIT: i even copied cswoods css directly to my site and it still did not work :(
The correct MIME type of the .htc file is Text/x-component.
Read this:
http://support.microsoft.com/kb/306231

Is it possible to make a hover over subcategory not clickable. Kind of hard to explain but what I am trying to say is for example I have a link on the css menu called products and when hovered over it has subcategories which when cilcked will go to my product category pages. However if the "Product" link is clicked it will go to the home page and have links to all the subcategory links at the bottom. To see this in action go to this site and click on products in the css menu. I would love to get this where you can not click products.

Site

The behaviour of the menu is right. If you click on "products", you gou tu category 14, with all subcategories at bottom of the page

My template is designed to widen to hole screen width.
Problem is on wide screen monitors.

When clicking on the menu to get sub menu visible the sub menu has too large gap to the root menu.

Problem comes when user moves cursor to the cap to reach the sub menu, the sub menu dissapears.

This is cause menu thinks user is hoovering out of the menu.

Any ideas how to make the gap fixed to small value?

tonibarcelona:

The behaviour of the menu is right. If you click on "products", you gou tu category 14, with all subcategories at bottom of the page

OK Well is there a way to turn this off or disable this feature?

welchyboy:

OK Well is there a way to turn this off or disable this feature?
I don´t understand what do you want to deactivate...

I would like to make the product link not a link. I don't want people to be able to click products and it go to the home page. I would like to get rid of that.

welchyboy:

I would like to make the product link not a link. I don't want people to be able to click products and it go to the home page. I would like to get rid of that.
I understand what you mean, you just want the hover to display the subcats and not be clickable.
The best you can do is leave the description blank, as to not displaying the subcats link, I am not aware that Zen Cart offers that option.

Well darn OK not that big of deal...What about having the products menu and the subcat menu have hover color like the other part of my menu. For some reason I am not able to figure out why all the other links are green before hover and red when hovering over except for the subcats and the actual product link.

welchyboy:

Well darn OK not that big of deal...What about having the products menu and the subcat menu have hover color like the other part of my menu. For some reason I am not able to figure out why all the other links are green before hover and red when hovering over except for the subcats and the actual product link.
You lost me here.
I don't see any difference in color between the links in the menu and all the rest, they all behave the same.
Earlier in this thread there is a style-only menu by Get Em Fast, try experimenting with that one.

OK I will look into that but you don't see how HOME, HISTORY, FUNDRAISER all of them are green and when i hover over the link it turns red. Well when I hover over PRODUCTS in the menu and the subcategory links they don't change color. That is what i was talking about. Just trying to clear it up for you. Sorry about that.

http://www.wpc-consulting.com/~stxmill/

I looked for the post but not sure what style only menu you are talking about. I might be using it already. I have the stylesheet_categories_menu.css. It looks like this

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */

/* EXTRA LINKS Background Color  and width */








div#nav-cat {
     margin-top: 0em;
     background-color: #eeff99;
	 color: #000000;
     width: 100%;
	 height:95%;
	 line-height:20px;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.3em;
}
	

div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 155px; 
         background-color: transparent;
         z-index: 1000;
  /*border: 1px solid #ff0000;*/
}

/*
div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}
*/

div#nav-cat li {
    z-index: 20; 
        position: relative; 
        list-style: none; 
        margin: 0;
		height: 20px;
		width: 150px;
		/*add border below or above products on the menu*/
		
    margin-top: 0px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 0px solid #679966; /* <---this line may help or hinder IE menu shifting issues */
	border-top: 0px solid #679966; /* <---this line may help or hinder IE menu shifting issues */
}
div#nav-cat li li {
    margin: 0; /* this overrides the margin-top in the declaration above */
} 







/* submenu hover over background color */


/* Products menu background color */
div#nav-cat li.submenu {background-color: #eeff99;}


/* Products menu hover over background color */
div#nav-cat li.submenu:hover {background-color: #eeff99;}

/*padding around product text css menu*/

div#nav-cat li a {
        display: block; 
        padding: 0em 0em 0em;
    text-decoration: none; 
        width: 160px; 
        color: #132e12;
}

div#nav-cat ul a {
        width: auto;
}

div#nav-cat ul ul {
        position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
	
}



div#nav-cat ul.level1 li.submenu:hover ul.level2, 
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
        display:block; 
		
		/* submenu background color */
        background-color: #eeff99;
		
		

I have messed with lots of these color numbers and couldn't get it to change the subcategory hover over links or the Product hover over link.

welchyboy:

OK I will look into that but you don't see how HOME, HISTORY, FUNDRAISER all of them are green and when i hover over the link it turns red. Well when I hover over PRODUCTS in the menu and the subcategory links they don't change color. That is what i was talking about. Just trying to clear it up for you. Sorry about that.

http://www.wpc-consulting.com/~stxmill/
I don't see them green, however they do change color, whereas Products and subcats do not.
It is a style issue, I don't have the time to investigate it right now, but the post you are looking for is #**32**

I still wasn't able to figure out how to make the color hover I was only able to get the background-color which i was able to before. But I guess it will do. Thanks