Support for CSS Flyout Menu

[Get Em Fast]

Wow! Super fast work by the Dev Team. It's all good and can be downloaded now.

[WeFoundEm]

Ok I know this mod was originally designed to be 150px wide, it was easy enough to change to 200 px. However it threw the alignment of the sub cat menus off a by....wait for it....50 px. I KNOW I have looked at the entry I need to change about 200 times last night, and I changed one by one all the margins I thought would do it (and then changed them back when they didnt) and even though I came up with some rather interesting effects (and some REALLY odd ones as well). All I want to do is move the sub cat and sub sub cat etc menus over to line up.

The only other thing I want to change is the categories header image to match the rest, is that in the stylesheet as well??

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

[Get Em Fast]

@ WeFoundEm..............Yea, looks like you got your copy right before I caught a couple of mistakes I made, and submitted a revised version.......1.3.9b.

Anyway, looks like you got the width down. Now, to make your second level hover above the rest of the menu. Add a z-index to this block of code making it look like:

#nav-cat ul {
   margin: 0px 0px 0px 0px; 
   padding: 0; 
   width: 200px; 
   background-color: #6495ed;
   z-index: 1000;
}

There........now 2nd level is above 1st level and is readable. Now, let's push it over a bit so it don't cover up so much of the 1st level. Change the margin to 200 in this section of code like this:

#nav-cat ul ul }      
   position: absolute; 
   top: 0; 
   left: 200px;
   display: none;
}

Now, that makes it flush with the right side of the 1st level. If you want it to overlap just a little, then change that to 190, 180, or something to your liking.

Now, you wanted to change the Heading, right? You can change this block of code to include your image that I assume you're going to make to match the rest of your sideboxes:

#categoriescssHeading.leftBoxHeading {
   background: #87ceeb; 
   border-bottom: 1px solid #0000ff; 
   margin-bottom: 1px;
}

to something like:

#categoriescssHeading.leftBoxHeading {
   background: url(../images/yourimage.gif); 
   margin-bottom: 1px;
}

Of course, you'll have to play with the margin and maybe add a padding to get your desired results.


If you need any more help with this, don't hesitate to ask.

[WeFoundEm]

everything looks perfect except for the white text "categories".
Where can I delete that one, it is as persistent as my ex-wife lol.

Thanks again for all the help.

[Get Em Fast]

everything looks perfect except for the white text "categories".
Where can I delete that one, it is as persistent as my ex-wife lol.

Thanks again for all the help.

Answered in pm, but posting here as well, so others may benefit from this answer, as well:

That is controlled by the defines in includes/languages/english/YOUR_TEMPLATE/english.php

If you have never modified the english.php file, then it would just be in includes/languages/english/english.php

You will be looking in that file for:

define('BOX_HEADING_CATEGORIES', 'Categories');

Just change that to:

define('BOX_HEADING_CATEGORIES', '');

and it will leave the Heading blank, so your image will show without the text showing.

[WeFoundEm]

yep worked like a charm, thanks again.

[Get Em Fast]

Not a problem. Glad to help.

[Ashely]

Hi,

Thanks for another great module!

It works out perfect except on IE6. When I move mouse to a root category, its subcategory does not appear. Seemingly the hover function doesn't work on IE6.
So is it possible to make a small change to the stylesheet_categories_menu.css file to make it also workable on IE6?

Thank you for your time and patience in advance!

Regards,
Ashely

[Get Em Fast]

Ashely, did you read the "Readme" file that was included? In the very first paragraph of that file it states:
support for IE6 HAS BEEN DROPPED...WooHoo! This version has the csshover.htc file taken out, as calling it with the stylesheet caused problems with css validation, and still didn't work with IE6, anyway. So all support for IE6 has been dropped and this versions' css validates with w3c Validation services.

Do yourself a favor............forget about IE6. It's old news and most of the world has dropped ALL support for it, including Facebook (the worlds leading website at this time), Gmail, Youtube, Digg, Twitter Google, and even Microsoft themselves have dropped support for IE6, so let it die in peace, remembering the "good ole days" when that's all the MS BS we had to deal with.

If you have any problems with any IE browser version 7 or newer, I'll do my very best to help you find the problem.

Sorry, but IE6 is dead.
Robert

[shanesoine]

Love this mod and it works perfectly, would it be possible to do one of the following?
Install 2 or more instances of the menu to split concepts? assume that if this is possible I could give each its own colour

If not could I create a new category with its own colour?

Now I sell books but we need to take on different ranges of products and be able to give them a separate identity.
Thanks Shane