Css Flyout Categories Menu troubles

[keylesslocks]

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

[chuck]

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.

[keylesslocks]

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!

[SirenK]

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

[Stenrique]

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.

[fsicody]

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

[solucionoproblemas]

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

$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0); 

replace with

$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

foreach ($this->data[$parent_id] as $category_id => $category) { 

and replace with

foreach ($this->data[$parent_id] as $category_id => $category) {
    if( (!CSSFLYOUT_SKIP_EMPTY) || (CSSFLYOUT_SKIP_EMPTY && $category['count']>0) ){ 

finally, around line 101, search

$result .= $this->child_end_string; 

and replace with

$result .= $this->child_end_string;
} //closing if CSSFLYOUT_SKIP_EMPTY 

hope that helps.

[Boggled]

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.

[Cattom]

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.

[manfer72]

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