Support for CSS Flyout Menu

kman............sorry so long. I've been pretty swamped, lately.

Well, the list length has been worked on before, using a scroll feature, and does just fine..........if you've only got Categories and Sub-Categories. Beyond that, it breaks the flyout.

I think the grays' you're wanting to change can be found in these lines of code in your stylesheet:

#nav-cat ul.level2 {background-color: #C9C9C9;}
#nav-cat ul.level3 {background-color: #C9C9C9;}
#nav-cat ul.level4 {background-color: #C9C9C9;}

Actually................for a site with as many Categories, Sub-Cats, Sub-sub-Cats, etc.............I wouldn't even recommend using this particular menu, as it DOES take up a LOT of 'real estate' on a site this size.

Personally, I WOULD recommend Glens' Categories Dressing, letting each Sub and Sub-sub-Cat slide DOWN instead of "flying" out. Or...........I'm working on a Mega-Menu............ .....but, I can't discuss that right here, at this time. Further discussion about that will have to be in the form of a pm, email, or contact via my site.

Of course, it's your site, and that's just my opinion about the menu, but I already know you agree on the 'real estate' part, and I'm sure you're customers aren't too thrilled with the current menu....................

Anyway...........I hope this helped SOME, anyway.

Get Em Fast...... Lovely mod by the way, just wondered if i could quickly pick your brain about something and point me in the right direction.

The template for my site sideboxes indents everything by 25px except my categories box on the left and information box on the right. Now how do I stop this category mod indenting like my current non css category box?

.box {}

.box_head {padding:10px 0px 10px 38px; font-size:14px; font-weight:bold; line-height:normal; color:#000000; background:url(../images/h_ic1.jpg) top left no-repeat;}
.box_head a {color:#000000; text-decoration:none;}
.box_head a:hover {text-decoration:underline;}
[B].box_body {padding:10px 25px; margin:0; color:#000000;}[/B]
.box_body a {color:#000000; text-decoration:underline;}
.box_body a:hover {text-decoration:none;}
.box_body ul {margin:0; padding:0; list-style:decimal inside;}
.box_body ul li {padding:3px 0 3px 0; font-weight:bold;}
.box_body ul li a {text-decoration:none; font-weight:normal;}
.box_body ul li a:hover {text-decoration:underline;}
.box_body ol {margin:0; padding:0; list-style:decimal inside;}
.box_body ol li {padding:3px 0 3px 0; font-weight:bold;}
.box_body ol li a {text-decoration:none; font-weight:normal;}
.box_body ol li a:hover {text-decoration:underline;}

#categories {}
#categories .box_head {color:#363636;}
#categories .box_body {padding:0; margin:0; color:#3A3A3A;}
#categories .box_body a {color:#3A3A3A; text-decoration:underline;}
#categories .box_body a:hover {text-decoration:none;}
#categories .box_body ul {margin:0; padding:0; list-style:none;}
#categories .box_body ul li {padding:3px 0 3px 6px; border-bottom:1px solid #FFFFFF; background:#eeeeee;}
#categories .box_body ul li a {text-decoration:none; padding-left:5px; background:url(../images/arrow_1.gif) top left no-repeat;}
#categories .box_body ul li a:hover {text-decoration:underline;}


#moreinformation {}

#information {background:#545454;}
#information .box_head {background:none; color:#FFFFFF; padding:16px 0px 9px 0px; border-bottom:2px solid #4F4F4F; margin:0 9px 0 12px;}
#information .box_body {padding:0px 0px 18px 0px;}
#information ul {margin:0; padding:0; list-style:none;}
#information ul li {padding:2px 0 3px 6px; border:0; background:none;}
#information ul li a {text-decoration:none; color:#FFFFFF; padding-left:5px; background:url(../images/arrow_2.gif) top left no-repeat;}
#information ul li a:hover {text-decoration:underline;}

garethrooney, is this on the site in your signature? If so, if you'll enable the menu, I'll try to see just what margin/padding you're wanting/needing to adjust.
But, the styles you included......................have absolutely NOTHING to do with the flyout menu. It has it's own stylesheet.

Anyway..............I'll keep a look out for the menu to be turned on, then go from there. Okay?

Yes...

And enabled bottom left

Yeah i know ive tried messing with that and get no joy.

Regards

Gareth

Okay. Now that I can see it, I can ALSO see that it's been modified slightly to include a div that's not normally present in this menu.

Anyway, in includes/templates/theme025/css/stylesheet_categories_menu.css, add this line of code at the top of the page:

#categoriescss .box_body {padding: 0;}

And I think that's what you're looking for................:smile:

You legend....... Works perfectly. A couple of styling issues to sort then ill swap it out.

Never have a seen a zen module to quickly and efficiently supported.

Massive thanks

Gareth

Not a problem. Glad to help.

hello

How can i display only 2 levels: top categories + subcat without displaying any other levels, currently my menu displays up to 6 levels and it does take the whole page...

thanks

L.

:frusty:

Hi I'm using v1.3.9 and have the menu installed and v happy with it as is lovely menu. Have been searching tho for ways of adding custom pages to the menu titles. For example I really do not want information in the top menu, I have created a custom page and included this in menu but the menu dispaly HEADER_TITLE_CUSTOM_NAME, the link works but not sure how i can get rid of Header_title bit , any ideas??:flex:

jagall:

Hi I'm using v1.3.9 and have the menu installed and v happy with it as is lovely menu. Have been searching tho for ways of adding custom pages to the menu titles. For example I really do not want information in the top menu, I have created a custom page and included this in menu but the menu dispaly HEADER_TITLE_CUSTOM_NAME, the link works but not sure how i can get rid of Header_title bit , any ideas??:flex:

Look in includes/languages/english/extra_definitions/CUSTOM/headermenu.php

and add the language define in there..........something like:

define('HEADER_TITLE_CUSTOM_NAME','Your Custom Title Here');
```   Hope this helps.

Get Em Fast:

Look in includes/languages/english/extra_definitions/CUSTOM/headermenu.php

and add the language define in there..........something like:

define('HEADER_TITLE_CUSTOM_NAME','Your Custom Title Here');

thank you for getting back to me, I will try this, also if I want to add a submenu to this i.e. just another page really, will it work as when I tried based on the same code as the information lines, it seem to wrap the contact us, etc below it too.

I suppose what I am asking is it possible to have a custom menu item (i.e. Page) with submenu items (more pages) on the drop down menu,

Cheers:yes:

jagall:

thank you for getting back to me, I will try this, also if I want to add a submenu to this i.e. just another page really, will it work as when I tried based on the same code as the information lines, it seem to wrap the contact us, etc below it too.

I suppose what I am asking is it possible to have a custom menu item (i.e. Page) with submenu items (more pages) on the drop down menu,

Cheers:yes:

Solved, got it working was missing a bit of code so great.

I am using the define pages generator - and adding pages as needed but I also use the ez pages option, for menu and sideboxes just which is the best way to go, I suppose ez pages is more straightforward ??

Hello,

I am having the same problem as the person in post #601.. I verified the file locations shown in post #604.
I've included screenshots of the files and their locations.

Does anyone have any suggestions?

Thanks!

Here is a screenshot of my layout boxes controller too.

Hi I have searched through the thread for this but still cannot find a resolve, perhaps, Get Em Fast can answer this for me. I am trying to stretch my header, footer and css flyout menu to full browser width, just not sure best way to go about it or can it be done. Thanks

spiflifkin:

Here is a screenshot of my layout boxes controller too.

I couldn't figure it out so I went with a different flyout menu. No need to answer this anymore.

Get Em Fast:

Yes, there is. In the stylesheet_categories_menu.css, find this section of code:

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

> 
> Add:
> 
> ```
z-index: 1000;

to make that whole section look like this:

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;
z-index: 1000;
}

> 
> That should fix you right up.

I am also having the issue of fly out CSS categories menu hiding behind the slide show. I've followed these suggestion and read a lot yet I cant get the categories to show above the slideshow.

Please assist..

[View page](http://megasaveonline.com/)

hardwiredtemplates:

I am also having the issue of fly out CSS categories menu hiding behind the slide show. I've followed these suggestion and read a lot yet I cant get the categories to show above the slideshow.

Please assist..

View page

I've solved this issue and it actually feels good...:clap:

If anyone else stuck on the same boat this is what I added in my stylesheet.css file

#fadeshow1 {
z-index:0; }

this will put the fly out menu over the slideshow banners.

hardwiredtemplates:

I've solved this issue and it actually feels good...:clap:

If anyone else stuck on the same boat this is what I added in my stylesheet.css file

#fadeshow1 {
z-index:0; }

this will put the fly out menu over the slideshow banners.

hardwire...................that solution will ONLY work if a persons' slideshows' <div>' name is "fadeshow1", which controls your slideshow..............NOT the menu, so the chances of that helping anybody is pretty slim............sorry. I know you had good intentions.................

Now for YOUR particular case, it looks like (if you remove your above edit to your stylesheet.css) you need to edit your stylesheet_categories_menu.css, find this block of code:

#nav-cat li {
    display:block;
    z-index:1;
    position:relative;
    border-top:solid 1px #FEFEFE;
    border-bottom:solid 1px #EBEBEB;
}

and change your z-index to 1100. Sometimes you got to use higher numbers to get the menu on top of other elements. In your case..............the 1100 works just fine. Actually.............if you put in 1001, this moves the menus' flyouts' above your slider images, but below the sliders' captions. 1002 will get the menu's flyouts' above everything. So...............anywhere from 1002 on will work fine for you.

Hope this helps.

nanos203:

Has anyone had any success in getting the CSS Flyout Menu mod to work property with the Hide Categories mod? I use the Hide Categories mode to prevent certain categories from showing up in the category menu but the CSS Flyout Menu mod shows all categories (even the ones designated as hidden by the Hide Categories mod).

I'm sure it's just a matter of making CSS Flyout Menu "aware" of the Hide Categories attributes but I'm not sure where to do that.

Any tips are greatly appreciated!!

Hi, does anyone know a solution to this issue please? I'm having the same trouble.
Thanks in advance....