Support for CSS Flyout Menu

[Get Em Fast]

I installed this mod without a problem, and it works fine.
However, I noticed that it loaded a blank tab, and after that, the tabs for "Specials...", "New Products...", etc.
I would like to get rid of this blank tab and introduce in its place some nice-looking separator.
How do I do that?
Also, I noticed that "Featured Products..." is too long and overlaps on the image. Maybe I could fix this by adding a > instead of the ...
How do I do that?
Thanks.

ckosloff, First of all, nice to see you're still around. Been a long time.

Now, go to includes/templates/YOUR_TEMPLATE/templates/tpl_categories_css.php and find this line (around 27-28):

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
    $content .= '<ul class="level1"><li><a href=""> </a></li></ul>';

Now, take out the (---<ul class="level1"><li><a href=""> </a></li></ul>----) to make this whole section look like this:

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
    $content .= '';

And, there ya' go........blank tab gone! You also mentioned putting something else there? Sure you can. Anything you want. Want a link saying "Zen-Cart Rules!" with a link leading to Zen-Cart? just put it in your code, like this:

 if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
    $content .= '<ul class="level1"><li><a href="http://www.zen-cart.com">Zen-Cart Rules!</a></li></ul>';

That will give you a nice little link to ZC that reads Zen-Cart Rules!
Note: If you don't add the "http://" to the URL, it will be treated as an internal link, and not be resolved.

Yes, you can also put an image in there, if you like.

Hope this helps.

[ckosloff]

Thanks for all the help.
Sure been a long time, but your post comes in right on time.
I am planning to send online the updated site (1.3.8a) this weekend.
After that, I will certainly have to look into more advanced customization, including a better menu.
I will play around with your suggestions and see what I can come up with.
Actually I wasn't thinking of a link nor an image, but an HTML or CSS horizontal ruler to put in between.

[nightwolff]

Hello, I have run into a strange problem with the flyout menu on our cart. If you hover on a subcategory and move off the edge of the menu it dissapears correctly but when you hover on the first level of the menu all the flyouts you had out previously re-appear. They also show up blank until you once again hover over them. Any thought on what I may have done wrong?

-Shawn

[cmwoods]

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

* 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: #1D4DA1; /* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
font-weight: bold; /* Set sidebox to bold text - Applies throughout entire sidebox and 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: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD BLue - 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: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD Blue - 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 #1d4da1; /* 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: #FF9900; /* Sets the background color of a line item which is being hovered over to WD Orange - 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: #FF9900; /* 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 */
color: #FFFFFF; /* 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 */
}

[nightwolff]

Great! I will try that and post my results as soon as I can. Thank you!

-Shawn

[ckosloff]

I tried Get 'em Fast's fix and it worked fine, the blank tab disappeared, thanks for that.
For the sake of accuracy, let me state that I am testing on a demo site, a ZC install with the demo products.
The tpl_categories_php file is in includes --> templates --> custom (in my case classic) --> sideboxes.
Now, I need help with more advanced customization.
I would like to get rid of the image altogether and work with CSS: customize the font, the box holding the category and the background color.
Also, it would be nice to have different settings for subcategory level, e.g. sub category with different background color, and sub-sub-category with yet another different background color.
I am using TopStyle Pro for CSS, so I don't need help with the settings, all the options are in the program, just need to know where to look...
Thanks in advance.

[ckosloff]

Yikes! Posted too early.
Will try the fix recommended for Nikolay and be back here.
Sorry.

[nightwolff]

I have been hashing over this submenu block problem for the past week. I did clean up the CSS a bit and even tried your css without success. The differing widths does not seem to create a problem but I did not completely remove the width lines from my css, I only changed them all to 150 to test it. I have checked the site with the IE Dev Toolbar and everything looks clean from what it is reading. However somehow it always shows the ul set to display:block and the li set to display:none. I am not sure if that's because it only takes a snapshot or if it's actively reading the state of the script. Somehow I doubt that it's that intelligent though.

I found some references to other people having trouble when building hover scripts with more than two ul levels and it may be a bug within IE7. Does anyone have a working site with more than 2 levels on the menu that I can look at? If you got it to work was there anything special you had to do to get rid of the display: bug? One method I saw used a left: -999em to "hide" the menu but that didn't seem to help either. I have run out of ideas so any help is appreciated.

Thanks,

-Shawn

I had this problem too with the CSS Flyout. It's to do with the display of the submenu blocks which doesn't get cleared when you leave the menu with a submenu displaying. If you leave the menu by coming back towards the left, you don't get the problem. It also only appears to affect IE as FF is fine.

Tidy up the stylesheet for the CSS Flyout first as there are bugs/extra settings there which you do not need and you'll be able to get a better idea of which setting needs changing.

The following is the stylesheet for my CSS Flyout menu, which will give you an idea of what is actually needed and also gives a clearer explanation of what each line affects.

I think your issue may also be to do with having different widths on your second/third column than on your first.

HTH

[poosk]

Can I somehow add manufacturer drop down to the menu as well?!?!?!

[ckosloff]

Can I somehow add manufacturer drop down to the menu as well?!?!?!

That's not a supported feature.
You will need custom PHP programming for that.
ZC is open source, so good luck.