Support for CSS Flyout Menu

ckossloff,

Just wondering if you have had a chance to look at my problem?

Thanks,

gee38l

I just noticed that the links in IE6 seem to be working just not IE7... also the link is not the entire box in mozilla, ie6 or safari small part is cut off at the bottom.

gee38l:

Thanks for the reply cklosloff!

I have updated the htc file as per the link but im at work atm and dont have access to a machine with IE7 (using linux) Can anyone test for me?

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

preman:

Hi Gee38l

Could you pls offer me your css Flyout file ? I want my site have the same flyout effect like yours.

Thank you

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #838367;
     width: 95%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.0em;
}
div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 100%; 
         background-color: #838367; 
         z-index: 1000;
/*  border: 1px solid #AAA;*/
}

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: 1; 
        position: relative; 
        list-style: none; 
        margin: 0;
    margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
    border-bottom: 1px solid #CCC; /* <---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 */
} 
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
        display: block; 
        padding: 0.25em 0 0.25em 0.5em;
    text-decoration: none; 
        width: 99%; 
        color: white;
}

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; 
        background-color: #756783;

This is the coding that i used from a previous post and just changed the colours....

gee38l:

body {
behavior: url(includes/csshover.htc);
} /* WinIE behavior call /
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/ border: 1px solid #AAA;*/
}

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: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---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 */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: white;
}

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;
background-color: #756783;

> 
> This is the coding that i used from a previous post and just changed the colours....

Hi,I don't know how to change the colours, :cry:, could u pls give me some advices ?

preman:

Hi,I don't know how to change the colours, :cry:, could u pls give me some advices ?
You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

ckosloff:

You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

Thank you very much:flex:

ckosloff:

You just change the hex code in the given example (combination of six letters/numbers after the #).
Google something like "hex color charts", "web safe colors", or the like, and you will find tons of information and visual displays of what each color code displays.

Hi Ckosloff,

I faced a Problem to change the color the same like my template,
pls kindly look my attachment(the left is the one I changed from the CSS FLYOUT, the right one is the original module of my template), I want my CSS FLYOUT has the same color like my template.

This is the CSS content I changed,I think I may made some mistakes in the colours, could you pls help me to figure them out ?
Thank you !

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #838367; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color: #838367;
/ border: 1px solid #AAA;/}
div#nav-cat ul.level2 {background-color: #c65928;}
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 li {position: relative; list-style: none; margin: 0;
body {
behavior: url(includes/csshover.htc);
} / WinIE behavior call /
div#nav-cat {
margin-top: 0em;
background-color: #838367;
width: 95%;
margin-left: auto;
margin-right: auto;
font-weight: bold;
font-size: 1.0em;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 100%;
background-color: #838367;
z-index: 1000;
/ border: 1px solid #AAA;*/
}

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: 1;
position: relative;
list-style: none;
margin: 0;
margin-top: 2px; /* change it to whatever space you want to put space between buttons*/
border-bottom: 1px solid #CCC; /* <---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 */
}
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 99%;
color: white;
}

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;
background-color: #756783;
}

preman:

Hi Ckosloff,
I faced a Problem to change the color the same like my template,
pls kindly look my attachment(the left is the one I changed from the CSS FLYOUT, the right one is the original module of my template), I want my CSS FLYOUT has the same color like my template...

First thing I noticed is that your CSS is messed up.
For example, there are two body tags, repeated categories, etc.
The first thing I would do is clean up the CSS, you will find plenty examples in the thread on how a CSS should look.
Try pasting one of the "good" CSS onto your test site and check out the looks, it will be easy to take it from there.
You will just need to play around with the hex codes to find which ones you like, or check with the template maker which hex codes they used.
By the way, you do have a test site, right?
If you don't, you need to start there.
My suggestion would be to buy the Zen Cart manual, and build the test site first.

ckosloff:

First thing I noticed is that your CSS is messed up.
For example, there are two body tags, repeated categories, etc.
The first thing I would do is clean up the CSS, you will find plenty examples in the thread on how a CSS should look.
Try pasting one of the "good" CSS onto your test site and check out the looks, it will be easy to take it from there.
You will just need to play around with the hex codes to find which ones you like, or check with the template maker which hex codes they used.
By the way, you do have a test site, right?
If you don't, you need to start there.
My suggestion would be to buy the Zen Cart manual, and build the test site first.

Yep, you are right, I have a test site,with your kind advices,I shall figure out them myself,this is my test site used CHERRY ZEN template https://www.youtoimport.com
Thank you very much

preman:

Yep, you are right, I have a test site,with your kind advices,I shall figure out them myself,this is my test site used CHERRY ZEN template https://www.youtoimport.com
Thank you very much

ckosloff:

First thing I noticed is that your CSS is messed up.
For example, there are two body tags, repeated categories, etc.
The first thing I would do is clean up the CSS, you will find plenty examples in the thread on how a CSS should look.
Try pasting one of the "good" CSS onto your test site and check out the looks, it will be easy to take it from there.
You will just need to play around with the hex codes to find which ones you like, or check with the template maker which hex codes they used.
By the way, you do have a test site, right?
If you don't, you need to start there.
My suggestion would be to buy the Zen Cart manual, and build the test site first.

Hi Ckosloff,

I need your help please, how could I change my css flyout style like the AMAZON ? I attached the photo below:

This is my CSS content,could you pls help me to revise it ?

body { behavior: url(includes/csshover.htc);} /* WinIE behavior call /
div#nav-cat {float: left; width: 140px;
background-color: #E8E9E9; font-weight:0;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color:#E8E9E9;
/ border: 1px solid #E8E9E9;/}
div#nav-cat ul.level2 {background-color: #E8E9E9;}
div#nav-cat ul.level3 {background-color: #E8E9E9;}
div#nav-cat ul.level4 {background-color: #E8E9E9;}
div#nav-cat ul.level5 {background-color: #E8E9E9;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
/ border-bottom: 1px solid #E8E9E9;*/}
div#nav-cat li:hover {background-color: #E8E9E9;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #E8E9E9;}
div#nav-cat li.submenu:hover {background-color: #E8E9E9;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: black;}
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}
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 {display:block;}

Thank you very much !

preman:

Hi Ckosloff,
I need your help please, how could I change my css flyout style like the AMAZON ? I attached the photo below:
This is my CSS content,could you pls help me to revise it ?
Hi,
I cannot do the whole testing for you, however I can give you a hint.
Try using negative margins for subcats., like -5, for example, this will push them to the left.
Please bear in mind that this might not display well in IE6.
You will need to test different settings, save a copy of your file if it works and just sweat it out.

ckosloff:

Hi,
I cannot do the whole testing for you, however I can give you a hint.
Try using negative margins for subcats., like -5, for example, this will push them to the left.
Please bear in mind that this might not display well in IE6.
You will need to test different settings, save a copy of your file if it works and just sweat it out.

Thank you very much

Hi,

I have the fly-out menu installed on my site: https://www.bestpriceaccessories.com

However, I would like the sub menu's text to be default white and then change to #666666 when hover. How could I do that?

Best Price Accessori:

Hi,

I have the fly-out menu installed on my site: www.bestpriceaccessories.com

However, I would like the sub menu's text to be default white and then change to #666666 when hover. How could I do that?

in your stylesheet paste this:

#nav-cat li.submenu {
color:white;
}

#nav-cat li.submenu:hover {
color:#666;
}

and that should do it.

Thanks for that but I think I did something wrong.

All my links are now purple!

Sorry if it a dumb question -I'm new to CSS.

Hi guys

Here it goes..... I have installed SHOW/HIDE categories wich someone said is build upon the CSS Flyout menu.

And i was just wondering if anyone knows if it might be possible to expand the subcategories a little bit slower, sort of ajax style....

It may be possible with categories_css.js

thanx in advance :wink:

Hello everyone,

OK. This is driving me crazy.. I pretty much have it the way I want it. But there is just this little thing that I can't seem to "fix" it.

Please go to this site: http://s266460223.onlinehome.us/shop

On FF and Safari, everything is fine. But on IE (both IE 6 and 7), if you move your cursor from "Lighting" down to "Garden & Outdoor", you will see that the menu shift up and down a little. I've looked at every possible settings..

Can anybody tell me what I missed?

Any help will be appreciated. Thank you in advance.

reneberg:

Hi guys
Here it goes..... I have installed SHOW/HIDE categories wich someone said is build upon the CSS Flyout menu.
And i was just wondering if anyone knows if it might be possible to expand the subcategories a little bit slower, sort of ajax style....
It may be possible with categories_css.js
thanx in advance :wink:
Sorry, wrong thread, there is an AJAX menu in the downloads area.
Check to see if they have a support thread, they should.

e81ny:

Hello everyone,
OK. This is driving me crazy.. I pretty much have it the way I want it. But there is just this little thing that I can't seem to "fix" it.
Please go to this site: http://s266460223.onlinehome.us/shop
On FF and Safari, everything is fine. But on IE (both IE 6 and 7), if you move your cursor from "Lighting" down to "Garden & Outdoor", you will see that the menu shift up and down a little. I've looked at every possible settings..
Can anybody tell me what I missed?
Any help will be appreciated. Thank you in advance.
Checked your site, you didn't miss anything.
It's just the behavior of IE.
My advice is to stop worrying about petty things, nobody will notice.
It is a known bug, recurrent in this thread.