Support for CSS Flyout Menu

[gee38l]

ckossloff,

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

Thanks,

gee38l

[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.

[preman]

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

[gee38l]

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....

[preman]

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, , could u pls give me some advices ?

[ckosloff]

Hi,I don't know how to change the colours, , 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.

[preman]

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

[preman]

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;
}

[ckosloff]

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.

[preman]

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 www.youtoimport.com
Thank you very much