Support for CSS Flyout Menu

Hi all,

i figured it out, had to add the last 'li' that i'd not realised i'd need in this. And bingo.

div#nav-cat ul ul ul li {
   display:block;
   width: 161px;
}

There's still one small glitch though. When the third depth of 'ul' has a submenu too, on mouse over it shows a 2px gap between itself and the next menu item below it. Any idea why? All margins are set to 0px.

Cheers, bod

How can I change the color from "grey" to an actual 6 digit hex code? When I change it to a code, it turns everything white.

Thanks!

mary4c:

How can I change the color from "grey" to an actual 6 digit hex code? When I change it to a code, it turns everything white.

Thanks!

dont forget to add the # before the hex code

background-color: green;
background-color: #101010;

should post css here

Thank You! Thank You! I guess I had forgotten it.

If you have any ideas on why the word "blank" shows up multiple times in my EZ pages bar let me know.

https://www.southerngenealogybooks.com.

mary4c:

Thank You! Thank You! I guess I had forgotten it.

If you have any ideas on why the word "blank" shows up multiple times in my EZ pages bar let me know.

www.southerngenealogybooks.com.

search includes\templates\YOUR_TEMPLATE\common\tpl_header.php for the word blank

mary4c:

Thank You! Thank You! I guess I had forgotten it.

If you have any ideas on why the word "blank" shows up multiple times in my EZ pages bar let me know.

www.southerngenealogybooks.com.

downlaod contents of server files on computer and search through them with http://www.baremetalsoft.com/baregrep/
search ' "blank"

peachblossomhouse:

Hi

I am now sat in my office with a number of PC's and have got your site in IE6 on XPSP2 on show with your CSS on a test installation here too looking similar to how you have it on your live site

Once again, I'm pretty certain your csshover.htc is NOT being found. Change that top line to includes/csshover.htc and ensure the file is present and accessible and not restricted in anyway. I can make your CSS hover work just by changing that line. The relative path is too confusing so lets get rid of it and eliminate it.

If you can confirm that you have done that, I'll continue to sort out the display as it is very similar to the problem I had originally.

HTH
Hi,I 'm a new guy about zencart,Now I haove the same problem about my Css flyout categories,can you tell me how to resolve it ?In your post,you suggest change the top line ,what is that?

The csshover.htc file that the flyout menu calls for IE6 compatibility doesn't seem to work at all in zencart 1.39x. In fact, you may as well delete the call to csshover.htc at the top of stylesheet_categories_menu.css, so at least the css will validate. I think the horizontal drop-down menu has the same incompatibility with IE6, since it uses csshover.htc also.

Everything is working great, but why do I have Specials and Featured Products showing up in the CSS flyout menu and then below as well? How do I delete them in the CSS flyout menu?

mary4c:

Everything is working great, but why do I have Specials and Featured Products showing up in the CSS flyout menu and then below as well? How do I delete them in the CSS flyout menu?

You can turn them both off from the Admin panel. Go to Configuration > Layout Settings. Set the 8th and 11th entries, Categories Box - Show Specials Link and Categories Box - Show Featured Products Link, to "false".

You can turn them both off from the Admin panel. Go to Configuration > Layout Settings. Set the 8th and 11th entries, Categories Box - Show Specials Link and Categories Box - Show Featured Products Link, to "false".

Thank You! I am still figuring all this out!

Is there any way to only show the category and sub category? I don't want the sub sub category and the sub sub sub category showing. I hope that makes sense. Georgia has 96 counties and I am afraid it will look too busy. Thanks!

Hey there,

I've spent the last couple of days trying to get this menu working as I want. I've read through this thread pretty much completely and I know there's issues with IE6 and some have given up and just accepted the fact that IE6 is sh1te and will probably continue to plague us for years to come.

But... all I want is to have the category text link to have a little 10px margin. If I put a 10px padding-left into into div#nav-cat li a, then that works fine on everything else but not ie6 which increases the horizontal size of the sidebox and means that the pop up menu disappears as you approach it with the mouse.

All I want is to not have the text hugging the left margin...

Is there absolutely no way to just make that happen? After that all I want to do is to insert images as the backgrounds and I'm good to go. I'm fairly sure that's easy enough.

mary4c:

Is there any way to only show the category and sub category? I don't want the sub sub category and the sub sub sub category showing. I hope that makes sense. Georgia has 96 counties and I am afraid it will look too busy. Thanks!

Try adding this to your stylesheet_categories_menu.css:

#nav-cat ul.level3 li {
  display: none;
}

Anything after level 2 should not display.

Hope this helps.

@zub...........try adding your margin to:

div#nav-cat li

like this:

margin: 0 0 0 10px;

That should do the trick.

Hope this helps.

any way to disable categories without product so they are not clickable

rbarbour:

any way to disable categories without product so they are not clickable

To disable a Category you must do that in Admin>Categories/Products. By the Category you want disabled, you'll see a little green box. Click on that box, then click update on the next screen. Your product will then be disabled, and that little green box will now be red.

But, if you're just asking about making the link in the menu still show up in the menu and NOT be able to be clickable.........NO, you cannot do that. A link is a link, is a link....... and ALL links ARE clickable.

Get Em Fast:

@zub...........try adding your margin to:

div#nav-cat li

like this:

margin: 0 0 0 10px;

That should do the trick.

Hope this helps.

Hey there, thanks for the response. That did move things over to the right 10px but it seems to have moved everything which doesn't solve my problem.

basically in:
div#nav-cat li:hover
div#nav-cat li.submenu

etc etc... instead of having background-color: I want to have a background-image. However if I replace those commands with images there is no margin on the left. Anything I do to put a margin there might work in FF but causes the flyout sub-cats to break in IE, in that when you mouse towards them, as you get within a few pixels the pop up menu disappears.

I really appreciate your help in this, I don't suppose you could outline for me what I need to change to achieve this?

I've attached a pic for more clarity.

zub, you have a link to this site?

Hi, Get Em Fast. I don't have a link unfortunately as I'm testing on my local machine. I have however figured out what I'm supposed to do, or at least I've fiddled with it enough that I've done something that works for me.

For anyone who's interested, put your background images in:
div#nav-cat li
div#nav-cat li:hover
div#nav-cat li.submenu
div#nav-cat li.submenu:hover

then to push the text over a bit from the margin put the appropriate amount of padding in div#nav-cat li a

also in div#nav-cat li a, you need to change the width so that when you mouse over from left to right the pop-up menu doesn't disappear in IE. As default it's set to width:auto. My sidebox width is 200px, I put 10px of padding-left into that div so I set my width:190px and that worked for me.

hope that helps someone.

I wanted to add this mod to my Document Categories box but don't have the necessary coding skills. After a couple of hours of trying to figure out how to re-code, I finally had an epiphany - instead of changing the coding, I would duplicate the mod and just restrict it to my document categories using the fix below which was so kindly posted by vandiermen.

vandiermen:

someone helped me and fixed it; they said they fixed it by doing this

in categories_ul_generator.php between line 45 and 47 i add this:

and c.categories_id NOT IN(33)

it says select all items with the category id from the categories table
except id 33

in the future, to take out more categories (any, not just document, add another number after a comma, like this

and c.categories_id NOT IN(33, 34)

To duplicate this mod for your Document Categories Sidebox, open up each file in your editor and:

1. Rename all three files.

change categories_ul_generator.php to document_categories_ul_generator.php

change categories_css.php to document_categories_css.php

change tpl_categories_css.php to tpl_document_categories_css.php

2. Within the files, change all instances of categories_ul_generator.php to document_categories_ul generator.php

change all instances of categories_css.php to document_categories_css.php

and

change all instances of tpl_categories_css.php to tpl_document_categories_css.php

3. Use the fix posted by vandiermen. Go into document_categories_ul_generator.php and add

and c.categories_id NOT IN(33)

after this line (I added my exceptions on line 50 in the 1.3.8a version of this mod)

where c.categories_id = cd.categories_id

If you want to exclude more than one category, use

and c.categories_id NOT IN(33,1,2)

etc.

Load everything back up to your server and in your admin => Tools => Layout Boxes Controller turn on your document_categories_css.php box and make sure that your document_categories.php box is turned off.

I wanted my document categories box to be identical to my categories box so I didn't make a different stylesheet but if you want to style the document categories box separately from the categories box, I've seen fixes in this thread that may help.

BTW, I'm running Zen Cart v.1.3.9f and css fly out menu v.1.3.8a.

If you want a visual, www. theburningbutterfly.com/store. (You'll need to remove the space from the web address.)