Support for CSS Flyout Menu

Quote:

---

Originally Posted by 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):

Code:

---

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:

Code:

---

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:

Code:

---

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

Code:

---

* 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?