Css Flyout Categories Menu troubles

Nice post Chris!,

Looked at your CSS and your site..tried putting the 1px bottom border on menu but not working for me. I'm posting my css to see if you can spot anything a miss..I've been looking at it so long I'm begining to wonder if the problem is with this file or elswhere.

body  {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {width: 150px;
margin: 3px 0 0 0px;
background-color: #ffffff; font-weight:bold; font-size:12px;
text-align: center;
line-height: 23px;

}

/* Overall Settings for CSS Flyout Menu Area */  	
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: #ffffff;
background-repeat: no-repeat;
	}

/* 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 {margin: 0px; padding: 0px; width: 150px; 
background-color: #ffffff;
border: none;
	}
	


/* Sets Category Text Background Options */
div#nav-cat li {background-image: url(../images/b1.gif); 
 position: relative;
 list-style: none;
 margin: 0px;
 z-index: 20; 
 height: 23px;
 width: 150px;
 border-bottom: 1px solid #D2DDF4; /* 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 Category Text Background for categories with subcats */
div#nav-cat li.submenu {background-color: #ffffff;
}

/* Sets Currently Hovered Category and it's parent category to dark blue background */
div#nav-cat li:hover {background-image: url(../images/b1_over.gif);
 
}


/* Settings for Category Text */
div#nav-cat li a {display: block; padding: 0em 0em 0em 0em;
font-family: arial,Helvetica,sans-serif;
color: #666666;
text-decoration: none; width: 150px;
}


/* Settings for the display of submenu blocks */
div#nav-cat ul a {width: 150px;
}

/* Settings for position of submenu blocks */
div#nav-cat ul ul {position: absolute; top: 0; left: 152px;
display: none;
}

/* 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;margin: 0 0 0 -2px; 

}

By the way your site is one of the best looking zen sites i've seen. I noted though you have the same issue with the 'sorter' showing through the menu flyout in ie6. I've still not solved this though.

Cheers

Nigel

get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.

I've got your CSS working on my test rig in all three browsers !!!

See if that helps.

P.S. Thank you for your kind comments regarding my handiwork and if your after any motoring essentials, don't forget about us !!

It works!!..would never have guessed to change those lines. Thanks :smile:

cmwoods:

get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.

Do you have any thoughts about the problem with the 'product sorter' showing through the flyouts?..tried z-index but no joy :(

Maybe the thing to do is mod the css to move the sorter away from the menu.

will post if I can fix.

cheers

I just installed this and it just lists all the links and subcategories like a site map, any suggestions?

keylesslocks:

I just installed this and it just lists all the links and subcategories like a site map, any suggestions?

Sounds like you've forgotten to upload the included stylesheet file.

would it go into css folder for classic or template_default?

the reason why i put them in template_defualt is because this folder has the other subfolders such as common, sideboxes - but classic doesn't have those folders...

let me know... thanks!

cmwoods:

get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.

I've got your CSS working on my test rig in all three browsers !!!

See if that helps.

P.S. Thank you for your kind comments regarding my handiwork and if your after any motoring essentials, don't forget about us !!

I did as you suggested - and I also had the above-referenced height and width settings, I removed them and it broke for IE7 (the pull out feature doesn't work) and still didn't fix IE6 (pull out feature still doesn't work) and put a bit of a space between the top button and second button, though Firefox still works fine. Oh and another thing, the "roll over" effect is now broken. I have two images, one for roll out and one for roll over -

Here's my CSS

body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

div#nav-cat {
width: 150px;
margin: 0px 0 0 0px;
background-color: transparent;
font-weight:bold;
font-family: veranda, arial, sans-serif;
}

div#nav-cat ul {
margin: 0;
padding: 0;
padding-top: 0;
width: 150px;
background-color: transparent;
border: 0px solid #E0E8EF;
background-repeat: no-repeat;
}

div#nav-cat ul.level2 {margin: 10; padding: 2; width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level2 {background-color: transparent;
}
div#nav-cat ul.level3 {background-color: transparent;
}
div#nav-cat ul.level4 {background-color: transparent;
}
div#nav-cat ul.level5 {background-color: transparent;
}
div#nav-cat ul.level6 {background-color: transparent;
}

div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0px;
margin-top: 0px;
height: 23px;
width: 150px;
z-index: 20;
border-bottom: 1px solid ##E0E8EF;
/* change it to whatever space you want to put space between buttons*/
}
/* <---this line may help or hinder IE menu shifting issues */

/*div#nav-cat li li {
margin: 0px; /
/ this overrides the margin-top in the declaration above */
}

div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}

div#nav-cat li.submenu {
background-color: transparent;
}

div#nav-cat li.submenu:hover {
background-color: transparent;
}

div#nav-cat ul {
background-color: transparent;
}

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

/*border-left: 0.5em solid #BBB;
}

div#nav li a:hover {
border-left-color: red;}*/
}

div#nav li a:hover {
border: none;
}

div#nav-cat ul a {
width: auto;
}

div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
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;
}

Please advise, thanks so much!!!

Hi, I am encountering the following CSS validation error in stylesheet_header_menu.css:

 body  	 Property behavior doesn't exist :  url(csshover.htc)

Also in the stylesheet_hoverbox3.css file, the following errors were caught:

324  	* html #hoverbox  	 Value Error : margin-top  Lexical error at line 324, column 88. Encountered: "?" (63), after : ""  ? document.documentElement.scrollTop : 0) + 'px');
325 	margin-left 	Value Error : margin-top Parse Error margin-left: expression( -1 * this.offsetWidth / 2 + (document.documentElement ? document.documentElement.scrollLeft : 0) + 'px');
328 	margin-left 	Value Error : margin-top Parse error - Unrecognized }
331 	* html #overlay 	Value Error : height Lexical error at line 331, column 96. Encountered: "?" (63), after : "" ? document.body.scrollHeight : document.documentElement.scrollHeight) > document.body.offsetHeight ? (document.body.scrollHeight > document.documentElement.scrollHeight ? document.body.scrollHeight : document.documentElement.scrollHeight) : document.body.offsetHeight + 'px');
332 	width 	Value Error : height Parse Error width: expression((document.body.scrollWidth > document.documentElement.scrollWidth ? document.body.scrollWidth : document.documentElement.scrollWidth) > document.body.offsetWidth ? (document.body.scrollWidth > document.documentElement.scrollWidth ? document.body.scrollWidth : document.documentElement.scrollWidth) : document.body.offsetWidth + 'px');
333 	width 	Value Error : height Parse error - Unrecognized }

Any advise wld be greatly appreciated.

How do i put a border around the links? http://www.flowsolutions1.com

don't know if someone has wrote about this before. I have installed this contrib for testing purposes and didn't found how to skip empty categories (in the sidebox I use in production server, yahoo treemenu with ajax, it was in a configuration parameter). As I found it very usefull in my store (computer parts) I implemented it and want to share it for those who may need it.

-create a file named categories_css.php and place it in includes/extra_configures

<?php
  define('CSSFLYOUT_SKIP_EMPTY', true);
?>
```-edit includes/classes/categories_ul_generator.php and around line 58, search
```php
$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
```replace with
```php
$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => CSSFLYOUT_SKIP_EMPTY?zen_count_products_in_category($categories->fields['categories_id']):0);
```and around 72, search
```php
foreach ($this->data[$parent_id] as $category_id => $category) {
```and replace with
```php
foreach ($this->data[$parent_id] as $category_id => $category) {
    if( (!CSSFLYOUT_SKIP_EMPTY) || (CSSFLYOUT_SKIP_EMPTY && $category['count']>0) ){
```finally, around line 101, search
```php
$result .= $this->child_end_string;
```and replace with 
```php
$result .= $this->child_end_string;
} //closing if CSSFLYOUT_SKIP_EMPTY
```hope that helps.

I'm trying to use this on a site that includes 'Document Categories', but it doesn't appear to work on them.

My regular Categories are positioned on the left and the the Documents are positioned on the right.

Have I missed something or does it just not work for documents?

Edited to add: Something I just noticed...it's combining my document categories with my regular categories on the left side too. :(

I am spent all day today trying to enforce it work with hideCategories contribution but absolutely without success. My PHP knowledge too basic for that. May be somebody can help? Thank you.

Hi,

I've a little problem with css flyout menu.. see: https://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

manfer72:

Hi,

I've a little problem with css flyout menu.. see: https://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:// https://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]

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!!!

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

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

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

Thanks!!

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/

lankeeyankee:

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.

inf1niti:

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 :frusty: all night haha. Please help me out.

HDG:

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?

HDG:

I believe the IE6 problem is this:
http://www.zen-cart.com/forum/showpost.php?p=115159&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?:smile: