Support for CSS Flyout Menu

cevans73:

Thanks Ckosloff for the update...I just noticed the flaw from IE6 and your update works great, thanks for sharing!

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Here is my link......
http://www.bizmug.com/zencart/

Thanks again for your help!
Chris

I see what you mean.
When hovering on a cat. that has subcats. then the image becomes slightly bigger in the bottom and displaces the rest of the menu down.
Please note that this doesn't happen with FF, only occurrences are with IE6 and 7.
The answer is that FF is a much more standards-compliant browser.
I am not embarrased to admit that I don't know of a fix for IE, it is a goofy browser, this error happens in my site too.
On the bright side, it is barely noticeable, I wouldn't worry about it.
Better eliminate that blank image in your menu, instructions are in this same thread, just look back a few pages.

My earlier post with instructions on how to dynamically size the flyout menu had a couple of errors!

Sorry about that -- it turned out I missed a couple of additional alterations to the php. For those who are interested, I'm attaching an archive which should be a little easier to work with.

Hello I am trying to figure out if it is possible to use the css flyout menu for categories as well as regular links. What I would like to do is have PRODUCTS as a button and add all my "product categories" in there which makes those subcategories. I got all that working but now I would like to also have like a HOME link Contact Us, and so forth on this same menu. Isn't there a way to accomplish this. I know I have done this with the css flyout menu which went horizontal. I was able to edit the php file but this one is a little different.

The site to look at is

http://www.wpc-consulting.com/~stxmill/

Thanks for the help!

EDIT...

I am trying to get something like this
http://www.thepecanbarn.com/PecanBarnProducts.php

Please note that the site where your solution is implemented is not Zen Cart.
There are many fly-out menus out there, this thread deals specifically with the one designed for ZC.
It would take extensive editing to accomplish what you want in Zen Cart, navigation is simply set a different way in ZC, with sideboxes, etc.
If you can do it, please post here.

I surely don't know how I am very new but I do know that someone was able to help me get my css drop down menu with actual links and it works GREAT. It looks kind of weird on the website now because I am trying to remove it because I would like this on the left side. To check out my css drop down menu in its half way condition go here

http://www.wpc-consulting.com/~stxmill/

Please note that none of the guys posting here are the original author or the last updater.
Both are AWOL.
We are just trying to help each other the best we can.
If someone would like to tackle your problem, be my guest.
I am unable, just wanted you to know that your posts are being read.

If you check out the PHP source of the drop-down CSS menu, you'll notice a place where the author uses the replace function to shift each of the categories listings one level down in the CSS hierarchy. Adapting that PHP and the matching CSS to work horizontally would be the majority of the work. Adding in links to the other parts of the site over or under the categories listing will be relatively straightforward after that.

ckosloff:

Please note that none of the guys posting here are the original author or the last updater.
Both are AWOL.
We are just trying to help each other the best we can.
If someone would like to tackle your problem, be my guest.
I am unable, just wanted you to know that your posts are being read.

I am sorry I am not sure how to do this I wouldn't be able to understand it. However it sounds like you are on the right track. I can't see why the css drop down menu can't just be converted into a vertical menu and put into a sidebox. I mean the css drop down menu I can add everything I need and it works like a charm just by editing the php code which I was able to research and kind of follow what was already there. I have tried this with the vertical css flyout menu but was unsuccessful. Maybe I am missing something. At least I hope so because the client I am working with REALLY wants this menu. If any one has any tips of how i can get this working I would be EXTREMELY THANKFUL. Thanks for the tip Mark I am just too new to even attempt that.

welchyboy:

I am sorry I am not sure how to do this I wouldn't be able to understand it. However it sounds like you are on the right track. I can't see why the css drop down menu can't just be converted into a vertical menu and put into a sidebox. I mean the css drop down menu I can add everything I need and it works like a charm just by editing the php code which I was able to research and kind of follow what was already there. I have tried this with the vertical css flyout menu but was unsuccessful. Maybe I am missing something. At least I hope so because the client I am working with REALLY wants this menu. If any one has any tips of how i can get this working I would be EXTREMELY THANKFUL. Thanks for the tip Mark I am just too new to even attempt that.

I'm pretty new to PHP myself -- honestly it would take me several hours to try and put something like this together (and as you can see from my recent posts, it would take a few tries to get it working smoothly!).

You might consider getting some estimates from a paid coder. Since you know exactly what you're looking for and have all the pieces to the puzzle, it might not be very expensive.

When I say that I am unable I mean that, in my present circumstances, I can't afford to engage in a complicated fix.
There are mods. for sideboxes available in the downloads area, I use Editable Sidebox quite a lot, you can put links in there, disable borders via CSS, etc.
Just a suggestion.

Yeah I am testing out some other things I guess the client won't get everything they want...I have put a blank sidebox on there and added some block test like HISTORY and made it a link. I am messing with that to see how it will look. Then I am thinking of just making the category menu look like this

http://diapercakesmall.com/

What kind of program can do this?

Once I got the categories setup looking nice like that I was going to add the blank box and have additional link "images" there but I am not sure. Not doing too good right now lol.

Where can i go to get experienced coders who could build me a menu that looks similar to this. Even if I have to pay I might have to go that route to get this done and the way the customer likes. Please any one have any suggestions I have wasted half the Saturday looking at other sites and trying to figure out which route to take. Any help is deeply appreciated!

http://www.thepecanbarn.com/index.php

cevans73:

One thing, however, that is a little annoying, maybe there's an easy fix...on my menu when you move curser over a link menu, the other links drop down slightly...is there any way to prevent this?

Yes, you can get rid of it. You need a small border on the bottom of each item, 1px will do it.

And also you seem to need a closing comment marker in the CSS too, which appers to fool IE into working properly, like FF does anyway.

My CSS has been quoted several times in this thread already so I won't quote it again, but if you look through that, you will be able to get it to work properly.

www.wilcodirect.co.uk is proof of this, unless something has gone wrong with it today.....

Mark Kidd:

I just wanted to say thanks to cmwoods and point out this great contribution from page two of the thread. For those of us who want to get right down to the basics of a CSS flyout menu in order to integrate it with the look and feel of their template, this stylesheet is a much better starting point.

Maybe it could even be included as an alternative in the next release of the contribution.

Thank you for your kind comments. In order to get my site working as I liked, a needed to alter the CSS so I tidied it up at the same time. Glad it provided some assistance to you.

NO NEED I got it :smartalec: LOL...Never used that icon before so i thought I would throw it in haha.

I was able to get the links added at the bottom of the css flyout menu by using the same code displayed earlier not sure why it didn't work in the first place...

$content .= '<a href="THE URL">' . 'THE NAME' . '</a>';

However I am trying to figure out what type of information i need to put into the stylesheet_categories_menu.css to be able to change the color and size of that link as well. I would like to be able to set different font sizes and colors than the actual menu. Is this possible. Thanks for the great work there is lots of info in this thread!!

The website is

http://www.wpc-consulting.com/~stxmill/

I am having another issue. I have some flash photo galleries on the website and whenever I am on the page and i go to the flyout menu the gallery hides the majority of the menu. Any way of preventing this?

htt://www.wpc-consulting.com/~stxmill/

Also can i disable or change the destination of the "product" link on the menu. For example if someone clicks the actual product button instead of going to a subcategory it will take them to the home page with links at the bottom of the page. How can i change this?

One last thing...I have added multiple links to the bottom of the menu but for some reason they are not going to their own lines. I can not figure out why. I have added a space after the 'Home ' just like that but didn't make a difference. I have spend time researching it but most of the google searches come up to this thread lol. Anyone know how to get this to work?

EDIT...

Sorry just figured out the answer.. adding this piece of code in between each link will create a space.

$content .= '<div id="test">';

Can anybody verify that the CSS Flyout Menu works with 1.3.8a? If so is there any modifications that need to be made?

Hello!

Would it be possible to remove the link to the first (top) Category, so basically when my client goes to my category sidebox and puts their curser over 'Ceramic Mugs' (CSS flyout installed) I don't want a link to that, I would want them to just be able to click or link directly to my subcategories, like 'Bistro style' or 'Barrel Style'.

Here is a link to my site...currently you can click on the top category and go to a page that is kind of redundant, so I want to prevent people from clicking on the top parent category link. (so there would be no link on 'Ceramic Mugs')
http://www.bizmug.com/zencart/index....index&cPath=65

I've looked and looked but can't figure it out.

Thanks in advance for any help!
Chris

cevans73:

Hello!

Would it be possible to remove the link to the first (top) Category, so basically when my client goes to my category sidebox and puts their curser over 'Ceramic Mugs' (CSS flyout installed) I don't want a link to that, I would want them to just be able to click or link directly to my subcategories, like 'Bistro style' or 'Barrel Style'.

Here is a link to my site...currently you can click on the top category and go to a page that is kind of redundant, so I want to prevent people from clicking on the top parent category link. (so there would be no link on 'Ceramic Mugs')
http://www.bizmug.com/zencart/index....index&cPath=65

I've looked and looked but can't figure it out.

Thanks in advance for any help!
Chris
That link returns a 404 error

jjgtrading:

Can anybody verify that the CSS Flyout Menu works with 1.3.8a? If so is there any modifications that need to be made?
Answer is yes, it does work.
I suggest that on top of the CSS you put this:
body {
behavior: url(includes/csshover.htc);
/* WinIE behavior call */}
instead of the standard body tag, to address bugs in IE6.
Read the thread for additional tips on CSS and other stuff.