Support for CSS Flyout Menu

[zubenubi]

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.

[Get Em Fast]

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.

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

[rbarbour]

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

[Get Em Fast]

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.

[zubenubi]

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

[Get Em Fast]

zub, you have a link to this site?

[zubenubi]

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.

[kamelion0927]

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.

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

[kamelion0927]

Sorry. I forgot that in document_categories_css.php, you need to change

$title = BOX_HEADING_CATEGORIES;

to

$title = BOX_HEADING_DOCUMENT_CATEGORIES;

so you can change the title of the box.