Support for CSS Flyout Menu

I am sorry I did not realize that part. Is already working.

Thank

Hi there,

I just installed the flyout menu, which is awesome. I really want to keep things simple... no color changes in the hover background colors. But I would like to add a bold text hover effect to the menu when the category's submenu is open.

Is this possible from the flyout css, or do I work that out in the template stylesheet?

And, if possible, can anyone tell me where, and what to add to the css?

very best to all,
ilsita

ilsita:

And, if possible, can anyone tell me where, and what to add to the css?
It is better to make all changes in the menu's stylesheet.
Please get a free text editor, since there are many ways to render bold text, some are static and some dynamic.
Do a search on .em, this is a dynamic thing relative to your base font.
If you just want a small increase you should use something like font-size: 1.1em; on div#nav-cat li:hover
This is relative to the font-size in div#nav-cat, if it is set to 1.3, you should NOT set your hover to 1.4, just set it to 1.1.
Entendiste?

ckosloff:

Entendiste?

Oddly enough, I think I do. I'll go in and see what I can pull off.

Gracias!

1.1 is just an example, you can use 1.05, etc.

Thanks, ckosloff.

I think all the emphatic messages in the flyout menu css are freaking me out a little. Do I touch or not? Multimple exclamation points make me nervous :blink:

I see that some elements must be edited in the template, and some in the flyout, but I am at a loss as to what to edit where. Is there some rule of thumb about this?

What I want, specifically, is to make my flyout menu subtle, clear, functional and pretty. So, I want light shades, bold text hover effects (rather than bright background color changes). I'd like to be able to include a small arrow or gif to indicate that a subcategory has a submenu.

So, I want to be able to use hex colors, and image files, etc. Can all this be accomplished in the flyout file? Supposed I wanted to change the solid border to a tiny dotted gif?

Very best,
ilsita

ilsita:

Thanks, ckosloff.
Supposed I wanted to change the solid border to a tiny dotted gif?
This is of course possible with css, but, like I said, get a style editor, that will give you all the options.
Regarding emphatic messages, I don't know what you are talking 'bout, cause I never read the last incarnation of this menu.
Regarding the small arrow, transparent .png, etc. I am working on a new version of this menu, which will have two modes: with images (transparent .png, etc.), and pure css.
Either you wait for it, or you get a style editor and dive right into it.
If you want a preview of what I am working on:
http://www.cssplay.co.uk/menus/anywidth-flyout.html
That site is awesome.

Goodmorning ckosloff,

Oh, awesome, thanks for that link. That's exactly the kind of thing I have in mind. Very nice. I will both wait and dive in with a style editor.

I have just installed 1.3.8 zen cart and I am trying to install the drop down menu CSS Flyout Header 1.5. I have installed all the files in the correct directories in my over ride, double checked them all.

Do note I am creating this site on a dedicated IP address because the domain is live on another server.

I commented out the .htaccess file where it point to the different formats of domain addresses. Not sure if that is the issue. Did add the last line to the .htaccess file

I do not see the ezpages_drop_menu.php in my Layout Boxes controller... :no:

any ideas to what this problem could be? All help is appreciated.

http://64.202.170.199/ is the url.

Thank you for any help.

Need to get this up ASAP!

Just to be a little more specific, this is the type of emphatic message I was talking about (and have a question about):

div#nav-cat li a {background-color: transparent; /*<---This will set the background color of the WHOLE MENU, EVERY LEVEL, SYSTEM WIDE!!! If you want different colors, DON'T CHANGE THIS!!! /
display: block;
padding: 0.25em 0 0.3em 0em;
text-decoration: none;
width: 100%;
color: white; / sets the font color of the menu, SYSTEM WIDE!! In order to over-ride the font colors for the menu, and have different
colors for each level, such as font color changing when you hover, you need to remove any MENU colors referred to in your
stylesheet.css, as they over-ride this stylesheet! (includes/templates/YOUR_TEMPLATE/css/stylesheet.css) */

Now, when I look at the flyout menu, as it appears on my website, unedited, the text is indeed white. Whatever colors I had sepcified in my template stylesheet seem to have been overridden, despite what it says here.

When I look in my template css, I know where to find the column text color, but I'm wondering if this is different from "menu colors." The template I'm using doesn't seem to have any "menu" item color options. I don't want to de-activate the wrong thing.

Also, I'm not sure how to "remove any MENU colors." Do I simply delete the line altogether? Just the color line, or also the text-decoration and size lines? I mean, everything to do with the text?

Thanks for any insight into this.

Also, ckosoff, I got a css editor (I had no idea! holy cow...). Very good suggestion. Thanks.

ilsita

thanks I fixed it!

MaxBodine:

thanks I fixed it!

Oh good, I was just looking at your page, wondering what the problem was :) How did you fix it?

Edited to add that when I was looking at your page, I noticed that you might want to lighten up the color of the breadcrumbs text.

ilsita:

When I look in my template css, I know where to find the column text color, but I'm wondering if this is different from "menu colors." The template I'm using doesn't seem to have any "menu" item color options. I don't want to de-activate the wrong thing.

Also, I'm not sure how to "remove any MENU colors." Do I simply delete the line altogether? Just the color line, or also the text-decoration and size lines? I mean, everything to do with the text?

ilsita

I think the author picked very bold and clashing colors so it'd be easier to track them down in the stylesheet. It's a matter of experimenting.

I wouldn't delete any menu colors, just change them to be the same color once you've decided on the colors you want.

You asked about making text bold. You'd add:

 **font-weight: bold;**

under the particular menu level you want bold text for. Try putting it in different places to figure out the right spot.

I think you also asked about adding images. Yes, you can add images or even use images for the entire menu. I recently added little arrows to each category on my menu; you can see it in my signature. I'd leave the images for last, though, after you get everything else worked out. However, I don't think you can add images to the border itself.

slomojojo:

I think the author picked very bold and clashing colors so it'd be easier to track them down in the stylesheet. It's a matter of experimenting.

Yeah, I figured that... I've been able to figure that stuff out, but haven't changed anything, really. Actually, I did change to a background image, but found that I couldn't edit anything after that, so I went back to the default.

I wouldn't delete any menu colors, just change them to be the same color once you've decided on the colors you want.

That makes sense. I'm still not sure which file, exactly. Are the menu items the same as the sidebox or column box? I'm a little stymied on this...

You asked about making text bold. You'd add:

 **font-weight: bold;**

Where would I put that if I wanted to make the hover-in-the-event-of-submenu?

under the particular menu level you want bold text for. Try putting it in different places to figure out the right spot.

menu in the flyout or in my template?

I think you also asked about adding images. Yes, you can add images or even use images for the entire menu. I recently added little arrows to each category on my menu; you can see it in my signature. I'd leave the images for last, though, after you get everything else worked out. However, I don't think you can add images to the border itself.

I just checked out your flyout menu, and it looks beautiful. That is the sort of thing I'm going for.

Thank you so much!

ilsita

All the changes should be done in the stylesheet_categories_menu.css file. You shouldn't have to mess with the template for anything.

I was fooling around with the bold type. You can add

font-weight: bold;

to the div#nav-cat li:hover statement. Unfortunately, it will make all the submenus bold too.

You should try Firefox and install the Web Developer addon. Among many other useful things, it will allow you see all the css files for any site.

slomojojo:

All the changes should be done in the stylesheet_categories_menu.css file. You shouldn't have to mess with the template for anything.

I was fooling around with the bold type. You can add

font-weight: bold;

to the div#nav-cat li:hover statement. Unfortunately, it will make all the submenus bold too.

You should try Firefox and install the Web Developer addon. Among many other useful things, it will allow you see all the css files for any site.

I seem to be having some trouble with this. Perhaps I'm entering it incorrectly? Here's what I have, to no effect whatsoever:

div#nav-cat li.submenu {background-color: white;
font-weight: bold;}

Am I doing it wrong?

ilsita

I just wanted to add that it works just fine if, instead of "bold" I use "text-decoration: underline"

Underline works, bold doesn't.

Hm.

People searching through this forum wondering why this mod its not working; stylesheet_categories_menu.css code gets messed up when you upload it; open this file on your server and you will see
/includes/templates/classic/css/stylesheet_categories_menu.css
or
/includes/templates/YOUR_CUSTOM_TEMPLATE_NAME/css/stylesheet_categories_menu.css

you need to open stylesheet_categories_menu.css on your computer copy the CSS it and go your to FTP or filemanager and edit the file on your server and past it into the file, deleting the scrambled code in it.
Or recreate the file from scratch by copying the CSS in to notepad or something and saving the note pad file as stylesheet_categories_menu.css and upload it again.

Someone could add an update with the correct coding for stylesheet_categories_menu.css

Hello,
I have a internet explorer bug; on some pages the menu disappears when hovering over the sub links
If you go to http://www.bubs2grubsknitting.com.au/index.php?main_page=index&cPath=35_37_38
and hover over the Categories > Sirdar Baby Wool > 2 Ply (in the white area next to the word "2 Ply")

I have seen this before and it had something to do with removing the main background colour; in this case I kind of needed to.
I am a bit new to CSS Flyout Menus so I posted here in case anyone knows what the problem is.

Note that this problem does not happen on the homepage; dont know why

vandiermen:

Hello,
I have a internet explorer bug; on some pages the menu disappears when hovering over the sub links
If you go to http://www.bubs2grubsknitting.com.au/index.php?main_page=index&cPath=35_37_38
and hover over the Categories > Sirdar Baby Wool > 2 Ply (in the white area next to the word "2 Ply")

I have seen this before and it had something to do with removing the main background colour; in this case I kind of needed to.
I am a bit new to CSS Flyout Menus so I posted here in case anyone knows what the problem is.