Support for CSS Flyout Menu

[Get Em Fast]

I can't believe you are back. Is it really you?

Yep, it's me. Been a while, huh? Moved into a town with a bunch of family.............boy!, did that ever change my life style!

[Caralyn]

reply for css help....www.realridertack.org/version3

[ckosloff]

reply for css help....www.realridertack.org/version3

OK, this has been the tie-breaker.
I want to re-write this mod, offering a CSS for non-image and another for image-driven.
At present, my menu is purely CSS, based on Get 'em Fast post.
We need to add the latest version of ccshover.htc (it's already at version 3) and update the navigation script too (suggested by lankeeyankee).
If Get 'em Fast is willing to review I will rewrite it and submit to the Zen Cart Olympus.
I hope this will solve many problems, as the one exposed in this last post.
What do you say, Get 'em Fast?

[ethical]

great mod! i have been working a bit from the code another user posted that had better commenting (i need all the help i can get) and have figured it out mostly except for one one small issue

how do I set the width of the submenu items without affecting the main level width. The problem is I have several items the go past the sub menu background but they dont seem to go over enough to make the word wrap to the next line.

this happened with both the first version of the css and the one with comments below as well.

any guidance would be appreciated. Cant send link since the site is live and just testing off and on.

here is my code

body  {
behavior: url(./csshover.htc);
/* WinIE behavior call */}

/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 200px; /* 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: #FFFFFF; /* 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 */
font-size: 1.2em;
}
 
/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 20px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 200px; /* 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: #FFFFFF; /* 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: #FFE295; /* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
border: none;
}
 
/* 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: 0px 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 */
font-weight:bold;
}
 
/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
/* background: url(../images/arrow.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 display normally with no unwanted effects - Applies throughout menu system */
width: 200px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
/* color: ;  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: 205px; /* 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 */
}

[Get Em Fast]

OK, this has been the tie-breaker.
I want to re-write this mod, offering a CSS for non-image and another for image-driven.
At present, my menu is purely CSS, based on Get 'em Fast post.
We need to add the latest version of ccshover.htc (it's already at version 3) and update the navigation script too (suggested by lankeeyankee).
If Get 'em Fast is willing to review I will rewrite it and submit to the Zen Cart Olympus.
I hope this will solve many problems, as the one exposed in this last post.
What do you say, Get 'em Fast?

That sounds like a winner. I have been meaning to re-write everything, myself, but I just haven't had the time.
The images that I included in there had to have a lot of "tweeking" from the non-image version, and they was actuall just for my personal site at the time (I've also got one made for a parts store or something that has "moving" pistons!), but they have seemed to cause a lot of problems, and the code need a lot of housekeeping way back then, and again, I just didn't have time to clean it up.
I'm actually starting a new site (same old URL) that I'm planning on putting a non-image version on, and I'm gonna have to clean up the css, anyway, but please go ahead.....I might use yours, instead.

So, there ya' go, folks.......if anybody is having problems with the flyout menu, give it a day or two, and there will be at least one, maybe two menu's released.

I wasn't planning on doing it this soon, but what the hey, I need a new one too! Starting work tomorrow on a non-image release. Maybe update on the existing one to include images, but make them small 15x2px gradients, so no specific image size has to be defined.
But, sleep now, work tomorrow.



Cheers, everybody

[ckosloff]

That sounds like a winner...

OK, quick and dirty.
This is exactly what I use on my site.
It works fine and cross-browser, and it has all the latest enhancements.
However, it is tailored to my use.
All the customizations I used are in the thread, so customization shouldn't be a problem.
Nevertheless, there is still a small glitch, and it comes from the navigation in categories_ul_generator.php (so I think).
It is the version I got from lankeeyankee, it fixes all the breadcrumbs navigation problems, but when you click on a master category, the sub-cats show duplicated: one for the text and the other one for the image you can input.
Inputting the image will not solve the problem, it still shows both.
Minor problem, though.
The image hovers if you have IH2 installed.
PS. Get 'em Fast: your review is welcome, feel free to use in upcoming version.
Forget the credit, I just want $$$ ;-)

[Get Em Fast]

You cheated......you got more free time than I did......

Looks good, though. I just installed on a local test site, and it seems to be working perfectly, but I don't have any other mods installed on the test site, yet, so I'll install IH2 on there, and see if I can duplicate the problem.

Found a type-o in the css.....line 51 reads:

div#nav-cat>ul a

and should read:

div#nav-cat ul a

Just from a quick glance, that's the only probem I've seen with it. I'll let you know if I have any problems after while when adding mods and images.

[Get Em Fast]

reply for css help....www.realridertack.org/version3

For now, try using the mod in post #266. Get it installed, and let me know what you need changing (background colors). If you need background images, let me know.

[ckosloff]

You cheated......you got more free time than I did...

I did cheat, precisely because I am hard-pressed.
What I did is zip files from my test site, which replicates approximately what is online, there is no readme, changelog, etc.
Thanks for the correction on the CSS, already tuned it up.
The problem I mentioned is not really one, actually I like the way it works.
You can see it in action in the Estetica Designs part of the site, I didn't have time to upload images for the Revlon part yet, working on it.
Just click on a master cat, and, after the description, you will be able to hover on the images of the sub-cats.
Glad to that you liked it.

[Get Em Fast]

great mod! i have been working a bit from the code another user posted that had better commenting (i need all the help i can get) and have figured it out mostly except for one one small issue

how do I set the width of the submenu items without affecting the main level width. The problem is I have several items the go past the sub menu background but they dont seem to go over enough to make the word wrap to the next line.

this happened with both the first version of the css and the one with comments below as well.

any guidance would be appreciated. Cant send link since the site is live and just testing off and on.

Your site "Live" so we can take a look at it?