Css Flyout Categories Menu troubles

Seems to be working for me as well on 1.2.7

Thank you very much!

I just wanted to update my post from above. The space is fine when view in Internet Explorer, but not in FireFox. Also, Firefox displays the width of the rows perfectly, but in Internet Explorer, not all the widths are the same. Any ideas?

You can take a look at what I mean by clicking on the link below.

Thanks.

Ok I fixed the problem I had about the width of the rows. I modified the following line in the file includes => templates => YOURTEMPLATE => css => stylesheet_categories_menu.css. I decreased the pixel value from 150px to 146px.

div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 146px; color: white;}

Now all the rows have the same width and line up perfectly both in IE and FireFox.

I also fixed the problem with the extra line in the menu (between my categories and the default All Products, Special Products, etc) that didn't go anywhere. I commented out the following line in the file includes => templates => YOURTEMPLATE => sideboxes => tpl_categories_css.php

$content .= '<ul class="level1"><li><a href=""> </a></li></ul>'; // insert a blank line/box in the menu

I hope this helps anyone else who has the same problem. However, I still have two problems. There is no room between my flyout menu and the sidebox underneath that. This only occurs in FireFox, there is enough space when its displayed in IE. But I also have a light blue line at the bottom of my flyout menu. Any ideas?

Thanks

I too had this problem and I found it was due to the database prefix not in the code.

I got it figured out...I went into mysql and found out what my database prefix was in this case:

zen_

I then opened up the original tpl_categories.php and edited lines (be sure to back up the original)
17 & 40 I added the zen_ in front of the categories

original line 17
$querydrop = "select parent_id,categories_id from categories";

corrected line 17

$querydrop = "select parent_id,categories_id from zen_categories";

I did the same on line 40

original line 40

$querydrop = "select categories_name,categories_id from categories_description";

corrected line 40

$querydrop = "select categories_name,categories_id from zen_categories_description";

now my catagory menu is working like a charm! now if only I can figure out how to get the menu to sort the catgories by sort order and not by catagory id and I'll be golden!

I hope this helps ya'll

VJ

ps remember if your database prefix is something else like xyz_ , remember to put that in instead of the above example zen_

Just in case someone gets confused by the above post, the code vjsibley is talking about is unrelated to the CSS Flyout menu contribution being discussed here. However, the point about using the proper database tablename is valid, if you aren't using standard Zen Cart constants to reference tablenames.

So whats he's talking about in the above post wont fix the problem everyone here is having?

duckydoodles.com:

However, I still have two problems. There is no room between my flyout menu and the sidebox underneath that. This only occurs in FireFox, there is enough space when its displayed in IE. But I also have a light blue line at the bottom of my flyout menu. Any ideas?

I had the same issue with css flyout in firefox, but it worked flawlessly in IE.
After hunting for days for missing divs or errors in the code (being a new Zen hacker myself), I seem to have found a cure in the css:
Look for

div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}

and simply change to:

div#nav-cat {width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}

It worked for me. Can anyone explain to me why it works? :) DrByte?

f.

I can't seem to get the css flyout menu to work using IE6. There is no cascading on mouseover.

Works fine in Firefox.

Any ideas?

cf

[Update: I forgot to install the csshover.htc]

Not sure if this is best placed here or in the css flyout thread, guess I'll try both.

Since installing IH2, my flyout css categories show up underneath the pictures...see here: http://www.divaknitting.com/testzenstore/index.php?main_page=index&cPath=18_65_66

How can I correct this so that the menu shows on top?

In your stylesheet_menu.css, you have a line that says:```
div#nav-cat li {position: relative; list-style: none; margin: 0;

z-index: 1;

Thank you! I new it had to be something simple :)

Ok, I'm having a somewhat minor issue with this as well.

I'm also using tabbedproducts lite and the issue is the css menu places under the tabbedproducts lite thus the flyout is part hidden under the tabbed display.

Any clues on this?

Great contribution and it works great in both IE and Firefox. Just have one question about the posiblity of putting all the code genrated by this into a .js file. I have a long list of links generated by this flyout menu and it is adding a lot (and i mean a lot) of code to the page. This is causing the relevant part of my page down more that 47Kb from the tope of the page.
The resulting situation is that my listing in Google is suffering. I have found it to be true aht if you can have the relevant content start with in the first 5Kb of the page then it can and will really help you in the organic listings and also reduce your cost in PPC.

Anyone have any idea if it would work to put this all in a .js file so that it will reduce my page size by 40-50KB and allow my real content to be closer to the top of the hmtl page when spidered by Google, Yahoo etc.

Any comments are geatly welcomed

Site is at http://www.labgeardirect.com/catalog

schatzy:

Just have one question about the posiblity of putting all the code genrated by this into a .js file. I have a long list of links generated by this flyout menu and it is adding a lot (and i mean a lot) of code to the page. This is causing the relevant part of my page down more that 47Kb from the tope of the page.
....
Anyone have any idea if it would work to put this all in a .js file so that it will reduce my page size by 40-50KB and allow my real content to be closer to the top of the hmtl page when spidered by Google, Yahoo etc.]

It's producing raw HTML code. Thus, a .js file is inappropriate.

If you wanted to get creative, you could try working on a way to use some advanced CSS techniques to position the code where you want it, but have the code appear in the browser much lower in the source.

You could also rearrange your page...

Hi,
I have problems with the style of such menu. Take a look here:

http://www.mozaika.org/

when using IE6, the menu is displayed correctly but when used FireFox, there is no bottom margin.. whats wrong??

thanks for help

CzechBoy:

Hi,
I have problems with the style of such menu. Take a look here:

http://www.mozaika.org/

when using IE6, the menu is displayed correctly but when used FireFox, there is no bottom margin.. whats wrong??

thanks for help

I have found the problem... it was in wrong css file..

IntelCos:

Ok, I'm having a somewhat minor issue with this as well.

I'm also using tabbedproducts lite and the issue is the css menu places under the tabbedproducts lite thus the flyout is part hidden under the tabbed display.

Any clues on this?

Having the same problem, was there a solution to this problem?

its a download on the first few pages.

Changed z-index: 1 to z-index: 1000 for priority over the tabbed lite pics.

G'day,

Has anyone worked out how to get this great sidebar to show the count of the number of products in the categories?

Also, has anone worked out how to get this sidebar to not display a category / sub-category if there are no products in the category / sub-category?

I tried to work out how to achieve these changes, but it would seem to be more complicated than my current level of understanding of Zen Cart and PHP would allow.

Best Regards, Lloyd Borrett.