Support for CSS Flyout Menu

ckosloff:

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.

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.

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

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 */
}

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

-Shawn

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.

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

All right, tried the fix for Nikolay, but no luck.
Still getting the image roll-over effect.
Replaced the whole stylesheet_categories_menu_css.
Please help.
Thanks in advance.

Wow, seems I'm the only guy posting.
I worked on the menu, the stylesheet and the .php and am quite pleased with the results achieved so far.
Got the separator by simply inserting an <hr /> there.
The buttons are from buttongenerator dot com, please note that the screenshot does not reflect the behavior of the menu.
Actually, upon hovering the button flips to a red edge to match the hover effect, the flyout is separated 5px. from the main.
If anybody interested, I'll post my stylesheet and .php here.
Forget about my previous rant about css buttons, I don't think the full effect can be achieved with CSS only, you still need image flip.

Now, I also have some questions:

1. How can I change the color of the active link from blue to something else? I know this comes from the main stylesheet but a change there will be site-wide and I don't want that. I tried changing in the category_css stylesheet but it didn't work.
2. How do I get text inside the buttons to be vertical-align = middle? I tried in the stylesheet and it doesn't work. However, text-align = left works.
3. There is a programming glitch somewhere. Underneath the separator, I get the Specials... category, which I wasn't getting in the ZC original menu.
   I don't have any specials configured and when clicking on that link it takes to a blank page.
   Is it possible to have that link appear only when specials are configured?
   Thanks.

Can this be applied to the horizontal header instead of the side boxes?
Like on the category tab?

There is another contrib for that, look in the Downloads section, type menu in the searchbox.

ckosloff:

All right, tried the fix for Nikolay, but no luck.
Still getting the image roll-over effect.
Replaced the whole stylesheet_categories_menu_css.
Please help.
Thanks in advance.

Hmm. with that css that I posted, you should be getting NO imges. I've actually got a more recent css that I worked on for a client that has NO images in it. The css looks like this:

body {  
         behavior: url(includes/csshover.htc);
} /* WinIE behavior call */
div#nav-cat {
     margin-top: 0em;
     background-color: #838367;
     width: 95%;
     margin-left: auto;
     margin-right: auto;
     font-weight: bold;
     font-size: 1.0em;
}
div#nav-cat ul {
         margin: 0; 
         padding: 0; 
         width: 100%; 
         background-color: #838367; 
         z-index: 1000;
/*  border: 1px solid #AAA;*/
}

div#nav-cat ul.level2 {background-color: #c65928; width: 180px;}
div#nav-cat ul.level3 {background-color: #c65928;}
div#nav-cat ul.level4 {background-color: #c65928;}
div#nav-cat ul.level5 {background-color: #c65928;}
div#nav-cat ul.level6 {background-color: #c65928;}

div#nav-cat li {
    z-index: 1; 
        position: relative; 
        list-style: none; 
        margin: 0;
    margin-top: 2px; /* 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 */
}
div#nav-cat li li {
    margin: 0; /* this overrides the margin-top in the declaration above */
} 
div#nav-cat li:hover {background-color: #c65928;}
div#nav-cat li.submenu {background-color: #838367;}
div#nav-cat li.submenu:hover {background-color: #c65928;}
div#nav-cat li a {
        display: block; 
        padding: 0.25em 0 0.25em 0.5em;
    text-decoration: none; 
        width: 99%; 
        color: #CDB38B;
}

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

div#nav-cat ul ul {
        position: absolute; top: 0; left: 100%;
    display: none; z-index: 1000;
}

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; 
        background-color: #756783;
} 
```That should make it look EXACTLY like the attached thumbnail:



Though, I see you have been working on it, but you STILL got those images that you initially DIDN'T want. Change to this css (no images), then you can edit the colors the way you want. If you've decided you want images, and need help, just let me know. I'm sorry I haven't been around like I said I would, but I've been VERY busy with a 7-day a week job, 3 boys, 1 wife, 1 dog, 24,000 chickens, a website for a client that I'm already late on, and living on no sleep (3-4 hrs/night) to do it all. But, I DO still check in when I can, so don't give up. 
I'll answer your other questions as soon as you know for sure if you want the images, or not.

Hope this helps.

Get 'em Fast,

Thanks for reply, even if it wasn't "fast".
I am working with just two images for now, because I find that the effect is more stunning and the load is minimal.
The questions are in a previous post, and basically they boil down as to why the stylesheet doesn't override the main stylesheet.
This defeats the purpose of CSS, which should be "cascading".
I would like to have the hyperlink text be vertical-align = middle, but this doesn't work, however, as I said previously, text-align = left does.
Very intriguing.
Cannot change color either.
Also, why is the Specials link showing in this menu, whereas it doesn't show in the original ZC menu?
Another mystery.
These are the questions I am dealing with now.
Will of course give a spin to the purely CSS menu you so kindly posted, I will test it and let you know.
I don't have 24,000 chicken, just half in the fridge, and a dog, but hey, everybody has a tough life and lots of things to do.
Cheers!

Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?

im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't

scottrdj:

Hi, I have had this on my site for a while now and am currently redoing the site. I like th look of this but I would like it just to show the main product category without the fly out bit ie remove the arrows, how do I do this?

Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):

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;
}

and change "display: block;" to "display: none;" (no quotes).

Hope this helps.

fusionsp:

im trying to just change the font for the top header of the cat menu? i changed font sizes and colors and its not taking effect for the flyout? where is this controlled? it must be seperate since some things change and this doesn't

Fusion and ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:

h3#categoriescssHeading.leftBoxHeading {
        color: #FFFFFF;
}

Hope this helps.

ckosloff, Also, try using "text-align: center;" instead of "middle".

Get Em Fast:

Fusion and ckosloff, Try adding this line to your stylesheet_categories_menu.css to control your color:

h3#categoriescssHeading.leftBoxHeading {
color: #FFFFFF;
}

> 
> 
> Hope this helps. 
> 
> 
> ckosloff, Also, try using "text-align: center;" instead of "middle".

well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.

fusionsp:

well, i got the color changed but the font size still seems stuck somewhere? is there a override place that i can change every header font to match? i tried it a few different places but only a few changed.

Same place. Just add........."font-size: 0.5em;" , or whatever you need your size to be.

Get Em Fast:

Scott, find this section of code in the stylesheet_categories_menu.css (at the very bottom):

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;
}

> 
> 
> and change "display: block;" to "display: none;" (no quotes).
> 
> Hope this helps.

Thanks for that it worked great.  The only thing is that the arrows are still at the end of the boxes, how do i remove these?