Css Flyout Categories Menu troubles

[MrCCTV]

Hi,

I've a little problem with css flyout menu.. see: www.crazyanimals.it

When i pass through my menu with IE sometimes i loose the focus closing the menu..
Sometimes choose a second level category it's very difficult..
Someone can help me ??

Thanks !!

Best Regards

Ferruccio

I had similar problem, works fine as long as I’m at http://crazyanimals.it but not at http:// www.crazyanimals.it I had to add the following lines for each of my domains in the .htaccess file.

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www.crazyanimals.it$ [NC]
RewriteRule ^(.*)$ http://crazyanimals.it/$1 [L,R=301]

[MeltDown]

This is a great module - Thanks!! I've been able to fine-tune it for my site but there is one minor annoyance. The font type for the Css Flyout Categories Menu text is a bit different from the other fonts. (Take a look)

I can't seem to track down where the problem is! Could you folks take a look and see if you could spot it for me? This is my modified stylesheet_categories_menu.css:

/* WD CSS Flyout Menu Stylesheet - CMW 13/02/2008 */
/* WinIE Behavior Call */
body {
behavior: url(includes/csshover.htc);
}

/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 150px; /* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
margin: 0; /* Sets sidebox to no margin - Set margin below for the CSS Flyout */
background-color: #e8e9e9; /* Sets sidebox background colour, Set colour below for the CSS Flyout */
}

/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 18px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 150px; /* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */
margin: 0; /* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
padding: 0; /* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
background-color: #e8e9e9; /* Sets CSS Flyout List Area background colour - Applies throughout menu system unless overridden */
}

/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
background-color: #bababa; /* Sets CSS Flyout List Area background colour - Applies to all levels apart from the first one */
}

/* Sets Category Text Background Options */
div#nav-cat li {
position: relative; /* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
list-style: none; /* Sets the list to display without any indentation or markers - Applies thorughout menu system */
margin: 0; /* Sets each line item to no margin - Applies throughout menu system */
z-index: 1; /* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */
border-bottom: 1px solid #e8e9e9; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}

/* Sets Currently Hovered Category and it's parent category to orange background */
div#nav-cat li:hover {
background-color: #84A4C1; /* Sets the background color of a line item which is being hovered over - Applies throughout menu system */
}

/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}

/* Sets currently hovered parent category on the Main Menu to orange background */
div#nav-cat li.submenu:hover {
background-color: #84A4C1; /* Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}

/* Settings for Category Text */
div#nav-cat li a {
display: block; /* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
padding: 0.25em 0 0.25em 0.5em; /* Positions the text on each line item into a more central position - Applies throughout menu system */
text-decoration: none; /* Sets the text to disdplay normally with no unwanted effects - Applies throughout menu system */
width: 140px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
font-size:.850em; /* Set font size - Applies throughout entire sidebox and CSS Flyout */
color: #000000; /* Sets the text to be white - Applies throughout menu system */
}*/ /* This strange closing comment mark seems to be necessary to get this to work properly */

/* Settings for the display of submenu blocks */
div#nav-cat ul a{
width: auto; /* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}

/* Settings for position of submenu blocks */
div#nav-cat ul ul {
position: absolute; /* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
top: 0; /* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
left: 150px; /* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
display: none; /* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}

/* Settings for extra submenu blocks */
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; /* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}

Thanks!!!

[cmwoods]

Hi,

You have two font-size settings in your main stylesheet in two different appearances of .sideBoxContent. One sets the size to .850 em and another later on is setting it to .975em.

As you have set the font-size in the css flyout stylesheet to .850em I assume that is the size you think the rest of the sideboxes is displaying, but it isn't as it is getting overridden by the later .sideBoxContent declaration.

If you want the text on your menu to be like the rest of the boxes, than change the font-size in the css flyout stylesheet to .975em and get rid of the erroneous declaration in your main stylesheet.

HTH

[MeltDown]

Hi,

You have two font-size settings in your main stylesheet in two different appearances of .sideBoxContent. One sets the size to .850 em and another later on is setting it to .975em.

As you have set the font-size in the css flyout stylesheet to .850em I assume that is the size you think the rest of the sideboxes is displaying, but it isn't as it is getting overridden by the later .sideBoxContent declaration.

If you want the text on your menu to be like the rest of the boxes, than change the font-size in the css flyout stylesheet to .975em and get rid of the erroneous declaration in your main stylesheet.

HTH

Beautiful - As I hoped, a second set of eyes made all the difference. I kept staring and staring but obviously missing something...

Thanks!!

[welchyboy]

Hello I am having trouble with trying to figure out how to add links to the css flyout vertical menu. I would just like regular links that can go to my home page contact us page and so forth as well as have the products. An example of what I am looking to do for my menu bar is this...

http://www.thepecanbarn.com/index.php


My site is here

http://www.wpc-consulting.com/~stxmill/

[ckosloff]

Let me know if that works. I think that everyone using this will need to replace that file.
Matt

There is a bug in that file: when clicking on a parent cat in the breadcrumbs menu all items appear duplicated.

[Jerry5763837]

Someone pleeeeease explain how the heck i get this flyout menu to work in IE6. Ive noticed a few stores like performance-pcs.comand http://www.afrimusik.com/ work. How did they do it. Im tired of all night haha. Please help me out.

I'm also looking how to get the flyout menu to work on IE6. Thanks.

Also, disabled categories still show up on the menu. How can I fix this?

I believe the IE6 problem is this:
http://www.zen-cart.com/forum/showpo...&postcount=164

Still unsure about the disabled categories.

HI, everyone,

I came across the same problem in IE6, that is sub-cagetory won't appear when hover, but works fine in IE7 & FF3

Anybody come up with solution to fix this?

[Jerry5763837]

Can you post the specific problems that you have with ie6? link? I fixed this but I can't remember what I did, I think it might just be CSS fixes but when I see your problem(s) it is sure to jar my memory.

Matt

hello,lankeeyankee,

My problem is, when hover in IE6, the sub-category won't appear at all. but works fine in IE7 & FF3.

Is this problem same as yours? how did you fix it? Eager to get your help. thanks.

[ckosloff]

Are you guys aware that there is another thread
http://www.zen-cart.com/forum/showthread.php?t=68676
that deals with these problems?
IE6 questions are answered there.
Why not unify threads?
Please post your questions there.
Thanks.

[issy]

Hello,
Thanks for this great contribution.
ZC V1.3.8
I've been able to install mod but I have a problem with left vertical sub menus displaying behind right content, I've been going at it for days now and I can not figure out where I went wrong, could you guys please take a look at my site? maybe a second set of eyes will catch my error. I've tried 2 version of this mod!!! :)

Thanks in advance for all your help.
Here's the link to site hxxp://www.imagetech.us/shop/