Support for CSS Flyout Menu

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.

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.

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".:P
By the way......somehow, i just KNEW you'd be the first poster in this thread....:D

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.

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.

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.

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?

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.

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

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

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.

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;
}

Hi all.

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

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!

can this hack be used ot create a side menu as used here

http://www.cmldistribution.co.uk

notice each main category has an image, and when expanded it does not reload

I have a site that I am porting to Zen Cart (http://classygroundcovers.com -> http://classygroundcovers.com/cart/i...=index&cPath=1).
It needs categories to be displayed with both latin and common names (on separate lines for readability).

There are two Categories side boxes on the left of the ZC site presently:

• the one at the bottom works OK and displays multiple lines per category
• the one at the top is the css flyout version that I am trying to get working, it displays only the first line of each category when you mouseover All Types

Can anyone advise me how to get Css Flyout Categories to display categories on more than one line? (like the category box below)

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.

Hi,

I'm sorry to ask a question that I know has been raised a hundred times before - my problem is that none of the answers that I've seen posted have worked for me.

I'm using CSS Flyout Menu v1.3.0.3.2. I've installed it and it's working perfectly on Firefox, but the subcategories refuse to appear in IE6. So far I have:
a) copied csshover.htc into both my main directory and into includes
b) ensured that all references in includes/configure.php and admin/includes/configure.php to http(s)://www.possumbooks.com include the full "www.possumbooks.com" and not just the "possumbooks.com"
c) updated the first few lines of stylesheet_categories_menu.css to include the full path

*/body {
behavior: url(http://www.possumbooks.com/includes/csshover.htc);
/* WinIE behavior call */}

All with no success. If anyone out there has any ideas on what I should try next I'd REALLY appreciate it.

Thanks,

Possum
www.possumbooks.com

Hi again,

I've been struggling to get the same vertical spacing between the subcategory items as appeared for the main categories. Based on the screenshot that came with the download this no-vertical-space layout is the default.

I've been playing with the following code but with no luck.

This is the css I think I'm supposed to be updating.

div#nav-cat ul.level2 {margin: -1px 0 0 -1px; padding: 0; width: 150px;
background-color: transparent;
border: none;
}

Can anyone help out with suggestions?

Thanks,
Possum.

Hello.

How it is possible to change THIS design of menu

to this?

Thank you.

Nickolay.

So sorry, everyone. I was out of commission for a while, but I'm back, and stronger than ever. Everyone who has posted on this thread, let me know if you're still here and Zenning, and if you're still having these issues, or if you've got them resolved by now.

Thank you.

This is my current menu (i cant take a screen grab while hovering so i’ve photoshoped it, but you get the idea);
http://www.jameschetwood.com/css/men1.jpg

This is the menu Im trying to make;
http://www.jameschetwood.com/css/men2.jpg

How can i get the text for each link in the fly out menu to alight to the right of ‘More Gems’?

I made this with
css_horizontal_dynamic_menu_pauls_edition_1-1

I'm still here.

Nickolay, go to includes/templates/YOUR_TEMPLATE/css/stylesheet_categories_menu.css and over-write ALL the code in there with 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: white;
}

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 is one I just done with solid color backgrounds, so it won't give you the little arrows, as they are images. But it will give you solid background colors that will be a LOT easier for you to work with. If you do want those arrows, then just change images from the ones that's included to a couple of arrows. Then, you'll have to play with the margins, paddings, and such to make it work for you. That's the OLD-OLD version of the menu. I'm currently working on the next version for 1.3.8.

Hope this helps