Support for CSS Flyout Menu

[Get Em Fast]

I've been asked if there was a thread for support of this mod. I didn't start one because I didn't design this mod, just modified it to include images. The original author of this mod is DrByte, but since I modified it, I've inherited all the questions...........so go ahead, ask away. I'll do my best to answer any question you might have, but keep in mind that I didn't write this, so there may be some questions that I don't have an answer to. All I can say is, I'll do my best.

[chadderuski]

Cool! Looks like I have a new thread to haunt!

Sooo... my first though is to use a single image for the background and then use the "sliding door" method to change image's Position. This is actually faster than swapping out two images. I have actually done this quite a bit and it isn't hard to do, but will take a bit of study to make sure it fits in well with zencart and uses zencarts css identifiers.

[Get Em Fast]

Yea, sound nice. The thing is, if it just slides in or out, you won't have the rollover effect of seeing the change, other than from an image, to a plain background, will you? That's why I edited this mod to begin with, because someone wanted a rollover effect in their Flyout Menu. Let me show you one that I've done, although, it still uses 2 images. IF you're into cars, then you will really appreciate this menu, as it has moving pistons in it. Just the screenshot that I've included isn't NEARLY as much fun as moving your cursor up and down the menu just to watch the pistons "work".
By the way......somehow, i just KNEW you'd be the first poster in this thread....

Anyway, here's the screenshot of that menu. If anyone wants it, just pm me, and I'll pack it up for you. It requires a column width of 170px, though, just so everybody will know before they want it.

[Get Em Fast]

Yea, I know.......I'm getting old and senile. So HERE'S the screenshot.


Well, maybe not. Doesn't seem like the forum will let me show it.

[Get Em Fast]

Well.......this isn't working. Give me a few, and I'll have a test site ready for the looking. Then everybody can see it in action. That's probably better, anyway.

[chadderuski]

Yea, sound nice. The thing is, if it just slides in or out, you won't have the rollover effect of seeing the change, other than from an image, to a plain background, will you?

The image doesn't actually "slide" out, It is instantaneous. Only the position changes in the css. It is as quick as a color change on regular roll overs.

And example is here:

www <dot> chicagophoto <dot> net/sandra/ (sorry, don't want a link)

The horizontal menu uses this method.

The vertical menu has a styled <ul> with background image while the <li> links use a color change.

[deserted]

Hey Get Em Fast, having an interesting time with the CSS Flyout menu, for some reason I can't seem to change the font colour in the menu, due I suspect to my own ineptitude.

I initially tried to create a rollover change to switch the text to white, but had no luck, so moved on to trying it on all text in the menu, but no change.

I couldn't find anywhere in the comstock CSS files that may have been overiding this, but i could have easily overlooked something. Any suggestions on this are welcome, as I'm well and truly out of ideas

[Get Em Fast]

Hey Get Em Fast, having an interesting time with the CSS Flyout menu, for some reason I can't seem to change the font colour in the menu, due I suspect to my own ineptitude.

I initially tried to create a rollover change to switch the text to white, but had no luck, so moved on to trying it on all text in the menu, but no change.

I couldn't find anywhere in the comstock CSS files that may have been overiding this, but i could have easily overlooked something. Any suggestions on this are welcome, as I'm well and truly out of ideas

Those are actually controlled from your regular stylesheet: includes/templates/YOUR_TEMPLATE/css/stylesheet.css.
For the initial color, look for these lines of code:

a:link, #navEZPagesTOC ul li a {
    color: #3300FF;
    text-decoration: none;
    }

For hover color, look for these lines of code:

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

Hope this helps.

[deserted]

Thanks for that, I actually found the answer before I checked back here :)

also I was able to set it just for the CSS flyout menu, using the following in the stylesheet_categories_menu CSS sheet

#nav-cat ul:hover li:hover a:hover {color: #ffffff;
}

[Phaze679]

Hi all.

I'm new to this whole zen cart thing, but i must say, Nice Work!

i'm having trouble aligning my text on the buttons in this wonderful menu. Anybody can give me a hint?


furthermore i'd like to know how i can change the link names for this menu.


Give me a shout!

thx!