Support for CSS Flyout Menu

ckosloff:

find #categoriescss in your stylesheet and put a border around it, like so:

#categoriescss {
border: etc;
}

sorry I am really new to it

I couldnt find the #categoriescss in my stylesheet under CUSTOM

can you explain a little bit details?

thanks...

I have found a website which does not seem to use image flyout, it runs smooth on IE7 too, just for your reference:
http://www.lorindascandlesandmore.com/

Sorry about #categoriescss.
Just use this, it is already in your stylesheet_categories_menu.css
div#nav-cat {
border: etc;
}
You can make it solid, double, etc., you need a style editor to see all the options.

musicfreer:

I have found a website which does not seem to use image flyout, it runs smooth on IE7 too, just for your reference:
http://www.lorindascandlesandmore.com/

I finally figured out what the prob is....
I set the background color as transparent, it works perfect for FF
but IE simply treat it as it is really transparent, as it is disappeared!

when I added colors to it, I can mousover the category properly in IE!

cheers

musicfreer:

I finally figured out what the prob is....
I set the background color as transparent, it works perfect for FF
but IE simply treat it as it is really transparent, as it is disappeared!

when I added colors to it, I can mousover the category properly in IE!

cheers

oh, I found it has still a minor problem

in IE7, now I can enable the flyout menu when I mouseover the background of the main category, however, it is not clickable, I still need to point to the words in order to click the main category

it is a minor problem, but it will be great to eliminate it, any idea? thanks!

ckosloff:

Sorry about #categoriescss.
Just use this, it is already in your stylesheet_categories_menu.css
div#nav-cat {
border: etc;
}
You can make it solid, double, etc., you need a style editor to see all the options.

hi, sorry that I missed your msg

I have added ```
border: thin;

what is it used for? 

pls visit my site again:
<https://www.locomolife.com/zen>

pls test with IE7, I can show the flyout menu by a mouseover of anywhere of the main category (no more restricted to the words)

however, if I want to visit the categoies, I still have to click on the words instead of the whole bar

any idea?

thanks again for your support

I don't know why you want to put a border around your categories, I just showed how it's done.
You can use thin, medium, thick, solid, dotted, double, etc. You can also put colors and different colors top, bottom, right, or left.
I tested your site with IE7, making sure to click on bars, not on words, and it worked fine.

ckosloff:

I don't know why you want to put a border around your categories, I just showed how it's done.
You can use thin, medium, thick, solid, dotted, double, etc. You can also put colors and different colors top, bottom, right, or left.
I tested your site with IE7, making sure to click on bars, not on words, and it worked fine.

thanks for your reply, i mus post too many mesage that made you sick, my bad

actually I have post a msg saying that I have solved the border problem before

for the lickable prob, I also solved it yesterday by using the CSS from other sites while changing the colors to fit my webpage

it works perfectly

the last problem is that IE7 still shows problem at the status bar, it said line 28 needs a ';'

I checked it should be talking about the rewriteengine on of the csshover.htc

though it does not affect the functionality, but any idea how to solve it?

Look at line 28 of the reported file, the semicolon means the end of a statement, if it is missing, the browser can interpret strange things.
Glad you got things working.

ckosloff:

Look at line 28 of the reported file, the semicolon means the end of a statement, if it is missing, the browser can interpret strange things.
Glad you got things working.
thanks a lot
just strange that even I added the semicolon, IE7 still show the exclamation mark at the left bottom corner, though it is working fine, buyer may lose confidence if they see a problem occurring at the site

I am still trying to get rid of it, any idea will be helpful!

musicfreer:

thanks a lot
just strange that even I added the semicolon, IE7 still show the exclamation mark at the left bottom corner, though it is working fine, buyer may lose confidence if they see a problem occurring at the site

I am still trying to get rid of it, any idea will be helpful!

ok, now I deleted the comment

# Force the plain domain name if came in with extra (www, etc)

everything is fine now, thanks!

Get Em Fast:

Vertical-align is only for inline and table elements - doesn't work on block elements. You might try adding "display: inline;", since you've got a "line-height:" set. Other than that, you might just try using padding: settings to align it vertically. Sorry, I missed the "vertical" part in the previous posts. I've been trying to read too much, too fast. Gotta slow down a bit, I guess. :smile:

Hope this helps.

Get Em Fast,
If you are still alive:
I was stumped on the links aligning bottom and couldn't get vertical-align: middle to work.
Tried your suggestion and it didn't work either, so I decided to get logical: fired up Web Dev toolbar, checked what the hell was that link thing and "discovered" it was an a.
So I went to this selector in the related css:

div#nav-cat li a {
    display: inline;
    padding: 0.25em 0 0.25em 0.5em;
  text-decoration: none;
  width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
    }  
```Replaced "block" by "inline" and it works great.
I was fumbling around in the wrong selector.
Duh!!
Thanks.

Uh, oh.
Posted too fast.
Actually display:inline looks good but doesn't work that good, you need block to display deeper sub cats.
They do show but I was unable to access and click on them, so a little more work and got the final version of that selector.

div#nav-cat li a {
    display: block;
    padding-bottom: 8px;
    padding-left: 10px;
   text-decoration: none;
   width: 150px;
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
    }

I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.

I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.

Thanks,

-Shawn

cmwoods:

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

Can I somehow add manufacturer drop down to the menu as well?!?!?!

poosk:

Can I somehow add manufacturer drop down to the menu as well?!?!?!

That's not a supported feature.
You will need custom PHP programming for that.
ZC is open source, so good luck.

nightwolff:

I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.

I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.

Thanks,

-Shawn

Hi

You are welcome to look at www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.

I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.

HTH

cmwoods:

Hi

You are welcome to look at www.wilcodirect.co.uk, which is my handiwork and does work with numerous levels. You've already got the CSS for it and I suggest you need to go through yours again as it still seems far too complicated to me.

I'll have a proper look later today, but if you read this before I get chance to do, I'd print both your current menu CSS and mine, and cross off each line I have, that you have, then that will leave you with the lines which will be causing the problem.

HTH

Hi, I was able to get another borrowed script to work properly. It may have been that when I tried to use yours the browser never cleared all of mine from the cache and I may not have hit Ctrl-F5 when I tried it.

I went through my css and checked every line to see what was in it that was not in the other script. After some trial and error and a few Ctrl-F5s to clear cache I found the problem. It appears the offending line was under "div#nav-cat li" where I had somehow gotten a "height: 17px" in it. Once I commented that line out everything started behaving properly like the borrowed script. Thanks for your help!

-Shawn

Guys,

Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers:frusty:
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.

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

div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}

div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}

div#nav-cat ul.level3 {
background-color: transparent;
}

div#nav-cat ul.level4 {
background-color: transparent;
}

div#nav-cat ul.level5 {
background-color: transparent;
}

div#nav-cat ul.level6 {
background-color: transparent;
}

div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues /
div#nav-cat li li {
margin: 0px;
/ this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
}

div#nav li a:hover {
border: none;
}

div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
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,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}

ckosloff:

Guys,

Now is my turn to ask for help.
Below you will find the latest version of my stylesheet.
The menu works great in IE7 and FF.
However, IE6 renders it horribly and the hover doesn't even work.
Could anybody check why this is happening because I am about to go bonkers:frusty:
I cannot fix the stylesheet to work in IE6 without breaking the other browsers.
Thanks.

---

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

div#nav-cat {
width: 150px;
margin: 0;
background-color: transparent;
font-weight:bold;
text-align: left;
line-height: 20px;
}
div#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: transparent;
}

div#nav-cat ul.level2 {
margin-left: 5px;
padding: 0;
width: 150px;
background-color: transparent;
border: none;
}

div#nav-cat ul.level3 {
background-color: transparent;
}

div#nav-cat ul.level4 {
background-color: transparent;
}

div#nav-cat ul.level5 {
background-color: transparent;
}

div#nav-cat ul.level6 {
background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues /
div#nav-cat li li {
margin: 0px;
/ this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

div#nav-cat li a {
display: block;
padding-bottom: 8px;
padding-left: 10px;
text-decoration: none;
width: 150px;
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
}

div#nav li a:hover {
border: none;
}

div#nav-cat>ul a {
width: 150px;
padding-bottom: 3px;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
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,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}

Hi

I'm not able to get access to IE6 until Monday, but your hover problem will be because IE6 needs the csshover.htc file to work, whereas IE7 and FF don't.

Your stylesheet cannot find it. Change the top line of your CSS to includes/csshover.htc and put said file there too. As the mod is originally supplied, it assumes too much about how people follow instructions. You should have the file somewhere already, but it is not being found at the moment by the use of the relative path.

HTH