Css Flyout Categories Menu troubles

[reza]

Essentially this requires making stylesheet changes to position left instead of right, and using some negative left-margin settings.

thanks DrByte
I knew that I have to change some position or other parameters from left to right and vice versa, the problem is that I did not finf any position parameter in flyout stylsheet.css, and stylsheet_category_menu.css, look the last one, if here I should change , so where???

************

stylsheet_category_menu.css
--------------------
body { behavior: url(includes/csshover.htc);} /* WinIE behavior call */
div#nav-cat {float: left; width: 140px; margin: -1px 0 0 -1px;
background-color: #CE318C; font-weight:bold;}
div#nav-cat ul {margin: 0; padding: 0; width: 140px; background-color: #3C097A;
/* border: 1px solid #AAA;*/}
div#nav-cat ul.level2 {background-color: #3C097A;}
div#nav-cat ul.level3 {background-color: #3c097A;}
div#nav-cat ul.level4 {background-color: #3C097A;}
div#nav-cat ul.level5 {background-color: #3C097A;}
div#nav-cat ul.level6 {background-color: #3C097A;}
div#nav-cat li {position: relative; list-style: none; margin: 0;
margin-top: 5px; /* 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 */
z-index: 1;
}
div#nav-cat li li {
margin: 0; /* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-color: #CE318C;}
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat;
background-color: #3c097A;}
div#nav-cat li.submenu:hover {background-color: #CE318C;}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 140px; color: white;}
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
div#nav-cat>ul a {width: auto;}
div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
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;}
-----------------------------------------------------------------------

[DrByte]

div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}

change to:

div#nav-cat ul ul {position: absolute; top: 0; left: -140px;
display: none;}

[reza]

div#nav-cat ul ul {position: absolute; top: 0; left: 140px;
display: none;}

change to:

div#nav-cat ul ul {position: absolute; top: 0; left: -140px;
display: none;}

YOU ARE NICE DrByte
totally on zen 1.3.5 and now on 1.3.6, I spent more than 3 fulltime days(because I am very newbie) to solve this problem and I did not want disturb the zen peroples with my questions, and lastly I wanted to abandone it,
its okey now, although there is still no answer to the common question of some other peoples also me about putting the counts of products in flyout , I think there can not be done otherwise there came minimum one answer for it.

thanks again

[DrByte]

Displaying Category Counts

/includes/classes/categories_ul_generator.php
approx line 81 replace:

         $result .= $category['name'];
         $result .= '</a>';

with this:

         $result .= $category['name'];
         $catcount = zen_count_products_in_category($category_id);
         if (SHOW_COUNTS == 'true') {
           if ((CATEGORIES_COUNT_ZERO == '1' and $catcount == 0) or $catcount >= 1) {
             $result .= CATEGORIES_COUNT_PREFIX . $catcount . CATEGORIES_COUNT_SUFFIX;
           }
         }
         $result .= '</a>';

Category count settings in Admin->Config->Layout Settings will still be used to control display.

[reza]

Displaying Category Counts

/includes/classes/categories_ul_generator.php
approx line 81 replace:

         $result .= $category['name'];
         $result .= '</a>';

with this:

         $result .= $category['name'];
         $catcount = zen_count_products_in_category($category_id);
         if (SHOW_COUNTS == 'true') {
           if ((CATEGORIES_COUNT_ZERO == '1' and $catcount == 0) or $catcount >= 1) {
             $result .= CATEGORIES_COUNT_PREFIX . $catcount . CATEGORIES_COUNT_SUFFIX;
           }
         }
         $result .= '</a>';

Category count settings in Admin->Config->Layout Settings will still be used to control display.

ooooof
You are very rapid DrByte
I am still busy to change font color in flyout category sidebox about 2 hours without any results, and YOU in between wrote the new code for counts of category.
Let me say you Bravo.
very thanks

[GwaiTsi]

Hi

This is a great mode but i have a little problem with IE6.

- I have 3 top leave categories
- my sideboxes are 195px
- under IE7 everything works perfect with the CSS stylesheet. perfectly aligned, etc.

Under IE6, the subcategories of the top 2 categories only allow selecting once. Then they no longer open. Also, the right boarder is about 5px too wide.

Greatful for any assistance

[GwaiTsi]

Someone please help, i am going out of my mind with getting the CSS to work properly.

I am trying: IE6, IE7, Firefox, Netscape.

I finally got the menus to align almost on all four browsers.

Now i have two problems i can't seem to solve: -

1) In all browsers except IE6, the 2nd level categories appear transparent until the are highlighted.

div#nav-cat li a {
display: block;
text-decoration: none;
width: 185px;
color: white;
padding-bottom: .25em;
padding-top: .25em;
background-color: transparent;
margin-right: 0px
}

If i change the above background colour from transparent, i can see the menus but then the highlights are behind categories.

2) i have the rounded corners mode and the sidebox header of the next box is under the categories box footer which is under the categories list on netscape and firefox. They are fine on IE 6&7 though.

Lastly, slightly off topic i have transparent backgrounds for my images, in Firefox, Netscape and IE7 they appear transparent, but under IE6 the backgrounds appear grey.

Really appreciate any help you all can offer.

cheers

[GwaiTsi]

Please help. I have finalling got the menu stylesheet configured in a way that works with IE6, IE7, Firefox & Netscape.

except for one problem.

Under Netscape and Firefox the .leftBoxFooter appears directly under the .leftBoxHeader with the category menu over the top.

In IE6 & IE7 the .leftBoxFooter appears where it should, under the categories.

This obviously effects the next left side box which begins from under the footer and is therefore obscured by the menu in netscape and firefox.

my zencart css items are below if that is of any help.

.leftBoxHeading, .rightBoxHeading {
margin: 0em;
background-image: url(../images/boxtop.gif);
padding: 0.5em 0.2em;
background-repeat: no-repeat
}

.sideBoxContent {
background-color: transparent;
padding: 0.4em;
border-left-color: #00008B;
border-left-width: 1px;
border-right-color: #00008B;
border-left-style: solid;
border-right-style: solid;
border-right-width: 1px;
height: auto
}

.leftBoxFooter {
background-image: url(../images/boxbottom.gif);
background-repeat: no-repeat;
width: 195px;
height: 20px;
}

Appreciate your help, i am a newbie and struggling with this.

thanks

[rwoody]

I have an odd issue that was just brought to my attention. In IE6 if a user types in their browser http://mysite.com the menu doesn't work until the first click which the changes the browser to "www".mysite.com I've checked and the menu works fine either way in the other browsers but not in IE. I tried playing with the config and if you change the config to "lose" the www, then the problem occurs when the site is entered using www.

Is there a setting somewhere or something that can be added to the csshover.htc file or what to do here. Has anyone else seen this behavior?

My server is set to reach the site no matter how you type it in, but it does not force to www. and to be honest I'm not sure how to make it do that.

Thanks for any suggestions.

[Noutje]

I installed CSS flyout Categories and it worked perfect BUT.....

When i go to my products listing the menu that flies out is disappearing behind the images on the product listing.
I use Imgae Handler that popsup the image when hoovering maybe that causes the problem.

On my product_info page this problem does not occur.

Please take a look here an scroll through the categories and see what i mean:

http://www.hairdressersworld.nl/inde...ndex&cPath=183

Point your mouse on the category clippers or hairdressers furniture