Support for CSS Flyout Menu

scottrdj:

Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?

Please just ignore that found in an earlier thread

Get Em Fast:

Same place. Just add........."font-size: 0.5em;" , or whatever you need your size to be.

wow thanks. i have been trying to figure that out for days.

Get 'em Fast,
Thanks for continuing support.
The color for the active link remains unchanged after your mod.
FYI, text-align: center or left works, what doesn't work is vertical-align: middle.
The Specials link to the blank page is always there, and I have tried changing settings in the database to no avail. Still doesn't show in the normal Categories menu.
To prevent further confusion I am enclosing my stylesheet, I know some settings are redundant.

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

div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: left;
vertical-align: middle;
line-height: 20px;
}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
/border: 2px solid tan;
background-repeat: no-repeat;/
}

div#nav-cat ul.level2 {margin: 0; padding: 0; width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level2 {background-color: transparent;
}
div#nav-cat ul.level3 {background-color: transparent;
}
div#nav-cat ul.level4 {background-color: transparent;
}
div#nav-cat ul.level5 {background-color: transparent;
}
div#nav-cat ul.level6 {background-color: transparent;
}
div#nav-cat li {background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0;
margin-top: 0;
z-index: 20;
height: 20px;
width: 150px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues /
div#nav-cat li li {
margin: 0px;
/ this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {background-image: url(../images/b1_over.gif);
}
div#nav-cat li.submenu {

background-color: transparent;

}
div#nav-cat li.submenu:hover {background-color: transparent;

}

div#nav-cat ul {background-color: transparent;
}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 150px;}
/border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}/
}
div#nav li a:hover {border: none;
}
div#nav-cat>ul a {width: 150px;
}
div#nav-cat ul ul {position: absolute; top: 0; left: 155px;
display: none;
}
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;
}
/* beginning of Get 'em Fast's mod /
h3 #categoriescssHeading .leftBoxHeading {
color: #FFFFFF;
}
/ end of Get 'em Fast's mod */

Ahhh! got the Specials link out of the menu.
Admin --> Configuration --> Layout Settings --> Categories Box - Show Specials Link, set to false.
One thing less for Get 'em Fast to worry about.

scottrdj:

Thanks for that it worked great. The only thing is that the arrows are still at the end of the boxes, how do i remove these?

Remove any call to "arrow.gif" (or whatever it's called) in you stylesheet_categories_menu.css, and remove the images from your images folder. That should do the trick.

ckosloff:

Get 'em Fast,
Thanks for continuing support.
The color for the active link remains unchanged after your mod.
FYI, text-align: center or left works, what doesn't work is vertical-align: middle.
The Specials link to the blank page is always there, and I have tried changing settings in the database to no avail. Still doesn't show in the normal Categories menu.
To prevent further confusion I am enclosing my stylesheet, I know some settings are redundant.

Vertical-align is only for inline and table elements - doesn't work on block elements. You might try adding "display: inline;", since you've got a "line-height:" set. Other than that, you might just try using padding: settings to align it vertically. Sorry, I missed the "vertical" part in the previous posts. I've been trying to read too much, too fast. Gotta slow down a bit, I guess. :smile:

Hope this helps.

Get Em Fast:

Gotta slow down a bit, I guess. :smile:
Are you saying that you ought to change your handle to Get Em Slow? Har, har.
This is how the relevant part of the stylesheet looks:

div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: left;
vertical-align: middle;
line-height: 20px;
}

Adding display: inline doesn't help, creates an empty cat, without even an image there.
Adding padding-bottom: 3px; doesn't help either, doesn't modify anything.
Does this thing have padding-top or margin-top somewhere?
Thanks.

Hi,

I have installed Css Flyout Menu 1.3.0.3.2. Menu works good in Firefox but doesn't work in IE6. My zencart version is 1.3.7. Some ideas?

Site:
http://rampc.pl/

Here's another problem for Get Em Fast.
I don't have any new products or featured products under the separator line, but I still need to show All Products.
Now, when in Admin --> Configuration --> Layout Settings I set **Categories Box - Show Featured Products Link **to false the Featured Products disappear, but when I set Categories Box - Show Products New Link to false everything disappears, including All Products, which is set to true.
I suspect this behavior is controlled by tpl_categories_menu.css and the line is:

if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true'){
```I tried to change this line by adding an additional or statement (or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'), with the result that the whole site blacked out.
So I need help with this.
Thanks.

Darkhijacker:

Hi,

I have installed Css Flyout Menu 1.3.0.3.2. Menu works good in Firefox but doesn't work in IE6. My zencart version is 1.3.7. Some ideas?

Site:
http://rampc.pl/

first off, your site link isn't showing anything. You must have taken it down since you posted. i have had this working for quite a while. you may want to install the newest version of zencart to 1.3.8. IE6 has all kinds of problems with zencart. i have a few things that are really flaky with IE6.

I repaired CSS Flyout Menu on my site, and everything works good.

Congrats, but it would be interesting to know what you did.

ARGHHH!
I got it fast.
Replaced the aforementioned line by this one:

 if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'){

and everything works.
Obviously, you can't put three or statements in a row.
I just replaced NEW by ALL and got rid of the New link.

Hi

I have just installed CSS flyout and thanks for this great modules

However, the preset flyout image really does not fit my website design, and some how the image is not long enough for my category names

Please let me know how I could enable the fly out without images
Here is my site for your info:
http://www.locomolife.com/zen/

I would like to have the effect as the following site:
http://www.dealextreme.com/

As you can see, the flyout in above site does not use any image, but just a table like blocks. To summarize, below are the effects I want:

1. Do not use flyout image
2. When mouseover the category, either the words or backgrounds of that category will change color

I know it must be very easy to do but I really have no idea. Any help will be appreciated! thanks a lot!!

Get Em Fast published a menu without any images, just look back in the thread.
For your information, the images are provided for your convenience only, you can use any image you like.
Back in the thread I show how I got the buttons I use with a free online generator.
There are other options, both online and offline.
I just named the buttons the same as in the menu, and replaced them in the appropriate folders.
Then you set the size in the stylesheet, which I also published.
Very easy deal.

ckosloff:

Get Em Fast published a menu without any images, just look back in the thread.
For your information, the images are provided for your convenience only, you can use any image you like.
Back in the thread I show how I got the buttons I use with a free online generator.
There are other options, both online and offline.
I just named the buttons the same as in the menu, and replaced them in the appropriate folders.
Then you set the size in the stylesheet, which I also published.
Very easy deal.

thanks ckosloff

I have edited the stylesheets accordingly. It works perfectly in FF!!

However, when I test in IE7, problem comes out. In FF, I only have to point to the background of the category and it will change the background color and show the subcategory list. However, in IE7, I have to point to the words to show the subcategory list. This makes me impossible to choose from the subcategory as the subcategory will disappear when the cursor leaves the main category wordings!

Besides, for the styles of the flyout menu, I managed to change the colors. But I want to have a border around the whole flyout menu, pls let me know how I should code it. I am really green to it.

Thanks for your ongoing support!

me again, I have found how to add the border for subcategory, thanks!

But I still can't solve the problem of IE, please help, thanks!!

besides, I would like to know the use of the following codes:

div#nav-cat ul.level2 {background-color: #dddddd; width: 180px;}
div#nav-cat ul.level3 {background-color: #dddddd;}
div#nav-cat ul.level4 {background-color: #dddddd;}
div#nav-cat ul.level5 {background-color: #dddddd;}
div#nav-cat ul.level6 {background-color: #dddddd;}

I tried to change the background color but nothing seems changed.

Thanks

Much as I would like to help you, I'm afraid that I am very limited here.
I am not the author of the imageless menu, Get Em Fast is, but he's a difficult guy to find.
I have never tested it myself.
However, I will give it a shot, do you have it up somewhere I can look at it?
Or is it only on a local test site?
div#nav-cat, etc. obviously refers to the different levels of categories and subcategories, the higher number the deeper.
Do you have the Web Developer toolbar for Firefox installed?
This will tell you exactly what you need to modify in the stylesheet to get the border you want.
Information --> Display Element Infomation
There is something similar for IE, but I never tried that one.
By the way, which IE are you testing on?
IE6 is a pain in the ########.

find #categoriescss in your stylesheet and put a border around it, like so:

#categoriescss {
border: etc;
}

ckosloff:

Much as I would like to help you, I'm afraid that I am very limited here.
I am not the author of the imageless menu, Get Em Fast is, but he's a difficult guy to find.
I have never tested it myself.
However, I will give it a shot, do you have it up somewhere I can look at it?
Or is it only on a local test site?
div#nav-cat, etc. obviously refers to the different levels of categories and subcategories, the higher number the deeper.
Do you have the Web Developer toolbar for Firefox installed?
This will tell you exactly what you need to modify in the stylesheet to get the border you want.
Information --> Display Element Infomation
There is something similar for IE, but I never tried that one.
By the way, which IE are you testing on?
IE6 is a pain in the ########.
thanks for your reply, my site is as follow:
https://www.locomolife.com/zen

meanwhile I will test with the method in your second msg, btw, I am using IE7

thanks again!