Support for CSS Flyout Menu

ckosloff:

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

:D 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! :ohmy:

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

Caralyn:

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?

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

ckosloff:

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. :wink:

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.

:lamo:

Cheers, everybody

Get Em Fast:

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 $$$ ;-)

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

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.

Caralyn:

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.

Get Em Fast:

You cheated......you got more free time than I did...:D
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.

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.

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

hey get em fast, well the site is live but I have the mod off since I don't want it live until I figure out the problem. pretty sure its something in the css, perhaps the main css? that is probably causing the issue. i guess its hard to tell what it might be from just looking at the css huh?

Hey thanks, I will try that- you have a "fund" right? =)

Hey, If I can get it to work, got a coffee fund? =)

Hi, Getm fast and www.ladywig , I think I have got it now =) the new version out of 266 was very easy to follow and made changes instantly from/on my server. Boy I did not know I would be leaning so much by the seat of my pants! But when you get the one that will reference images (buttons.gif) let me know, but this current form will work great. I will adjust the colors to make it "purty" and see what happens. Coffee funds? Can't wait to see it live on my "real store" I am now using www. realridertack.org /version4

Does anyone know if there is a mod for a pos/barcode system to use with a scanner? Would be great for those walkin customers...I may be able to pay someone for the mod

Caralyn:

Does anyone know if there is a mod for a pos/barcode system to use with a scanner?
No offense meant, but please don't post irrelevant questions in this thread.
Check the downloads area for the mod, if it aint there, well, it aint.

ethical:

i guess its hard to tell what it might be from just looking at the css huh?

Nope. That IS when you find things.....while it's running on a live server. If we can't see it "live", then we can't tell you what the problem is. Almost everybody in this forum that's been here any time at all, has FF (FireFox) and the Web Developer add-on, which allows us to look, and edit your css "on the fly"...ie "live". When we get it fixed, we will then either tell you the small piece of information that's causing your problem, or will send you a whole new css (if there's several problems). That's why when you ask a question, everyone's first response is "Got a URL for us?"

Hope that clears things up a bit.

Caralyn:

Hey thanks, I will try that- you have a "fund" right? =)

A fund?......:smile: Yea, in my signature.

Caralyn:

But when you get the one that will reference images (buttons.gif) let me know

Actually, I think I WILL put out one with images, but that's what caused all the problems to begin with, due to having to specify an exact image size, and that to match the level to the image, to match the sidebox size, and that to match the column size.............get the picture? And if the site changes the left column at all, everything usually has to be re-configured. So I think it to be best to build them one at a time per request from the user needing them, and with the user supplying the images and background colors they want used. Otherwise, it'll be the same ole' problems all over.

That's the reason I haven't submitted a new one with images, yet, as I was planning on doing.

So, anybody that wants one custom built can just pm me with the details.

hey get em thanks. I decided to work with the new code that ckosloff posted and it works a lot better. I am just curious to know what code i need to add/edit to:

set a different hover and background colour for the submenu items then those that I have set for the top level menu items.

the menu is live at the moment http://mypumpkindoodle.com/store

thanks

John

ethical:

...I am just curious to know what code i need to add/edit to set a different hover and background colour for the submenu items then those that I have set for the top level menu items...
Not sure I understand your question because I think I have addressed it in the CSS I posted.
You will note that there are 3 background colors, they might not be your choice, so just change every instance of them to what you like.
A style editor would make this job in a breeze.
Make sure you correct line 50, as Get em Fast pointed out.
Check out the menu in my site (in the sig), and let me know what would you like to change.