Support for CSS Flyout Menu

[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.

[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.

[ckosloff]

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.

[Get Em Fast]

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.

[ckosloff]

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!

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

[airbag]

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

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.

Thanks for your posting, this version of CSS above really helped with some IE6 and IE7 issues when using version 1.3.8a of zencart. I suggest anyone who has issues with IE6 does a compare with the built in CSS and the above to get ideas on how to limit these.
airbag

[ckosloff]

Thanks for answer.
I will give it a shot.
In fact, I have prepared a virtual machine with nothing in it except 2KPro and IE6.
It also has the XAMPP server installed, so I can test locally instead of disturbing my live site all the time.
In fact, I only need to butcher those IE6 quirks, everything looks fine in IE7 and Firefox.