Support for CSS Flyout Menu

css_flyout_menu_1-3-9b

Added both modules "CSS Flyout Header 1.5" and "css_flyout_menu_1-3-9b" header menus are working fine but categories side box menus are not working,
is it compatable, or what will be the problem...

is there any thing to add or modify at admin?

please help me to work out this...

just for info, i saw these modules have same file at icludes\classes..(categories_ul_generator)

Rashu

I installed the menu in my left column my problem is the menu moves at the middle of the page when i select a link....

how can i stop this?

Thanks:cool:

You got a link for us to look at this?

No link, the site is local on my computer and it bothers me as I don't want to go live with this problem.

I already installed your menu here and it's working fine:

http://www.bijouxpierres.com

On the site having menu trouble I use specific add ons that i don't use on the other like:

Fast easy check out which requires Css_javascript_loader

and I wonder if the Css loader is the reason of the problem, this is my best bet as your menu and this add on are both CSS related.

:yuck:

i forgot to add, viewing the page with Explorer 6 the menu doesn't move, it does move with Firefox 1.3.9...

Great mod, but I have one issue, probably of my own making. In short, I want to use a background gradient image instead of a solid color on the menu items. I'm noticing in Safari and Internet Explorer, the background image seems to get "offset". I'm sure it's a padding or margin issue, but I'm stumped.

I've attached a screenshot and my CSS. If you can spot the problem, please let me know. I'm going in circles on this one.

#categoriescss.leftBoxContainer { 
   background-color: transparent;
   width: 175px; 
   padding-bottom: 10px;
   margin-top:0px;
}

#categoriescssHeading.leftBoxHeading {
   background: url(../images/blue-background.jpg); background-repeat:repeat; 
   border-bottom: 1px solid #000; 
   margin-bottom: 1px;
}

#nav-cat {
   width: 175px; 
   margin: 0 0 0 0px;
   background-image: url(../images/arrows/grey-button.jpg); 
   background-repeat:repeat;
   font-weight:bold;
}

#nav-cat ul {
   margin: 0; 
   padding: 0; 
   width: 175px; 
   background: url(../images/arrows/grey-button.jpg); 
   background-repeat:repeat-x;
}

#nav-cat ul.level2 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level3 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level4 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level5 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level6 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}

#nav-cat li {
   position: relative; 
   list-style: none; 
   margin: 0;
   margin-top: 0px; /* change this to put space between buttons*/
   border-bottom: 1px solid #000;
   background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;
}

#nav-cat li li {
   margin: 0; /* overrides the margin-top above */
}
 
#nav-cat li:hover {
   z-index: 1000;
   color:#FF0;
}

#nav-cat li a:hover {
   color: #FF0;
   background-image:url(../images/arrows/hover-button.jpg);
   background-repeat:no-repeat;
}

#nav-cat li.submenu {
   background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
   background-repeat:no-repeat;
   background-position:right;
}

#nav-cat li.submenu:hover {
   	background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
	background-repeat:no-repeat;
   	background-position:right; 
}

#nav-cat li a {
   display: block; 
   padding-top: 0.25em; /* Originally .25em */
   padding-right:0em;
   padding-bottom:.25em; /* Originally .25em */
   padding-left:.5em;
   text-decoration: none; 
   width: 100%; 
   color: #fff;
   
}

#nav-cat>ul a {
   width: auto;
}

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

#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
   display:block; 
   border-left: 2px solid #d3d3d3;
   background: url(../images/arrows/hover-button.jpg);
   background-repeat:repeat;
}

viewing the page with Explorer 6 the menu doesn't moveIE6 had a ton of CSS bugs and shortcomings. The only reason to still be using that version is if you have a Windows 2000 operating system which is unable to run any newer IE (other modern browsers work fine on it), or you work for a company that requires all of its computers to use IE6.

I can't troubleshoot a screenshot. If you can't let us see the site directly, you'll have to wait for Get Em Fast (who knows the mod thoroughly) to show up.

Sure, the site's a work in progress, but you can check out what I'm trying to achieve at:

http://store.ruggedradios.com

Thanks for the help!

I'm getting a lot of end tag for "ul" which is not finished warnings with the WC3 Markup Validation Service. Is this normal?
Thanks

I meant:

I'm getting a lot of "end tag for "ul" which is not finished" warnings with the WC3 Markup Validation Service. Is this normal?
Thanks

https://www.test.soundfactory.nu

For whatever it's worth — I believe I solved my problem. I'm now getting background images to work across the different browsers, so we can consider this issue a done deal and ignore my previous post.:clap:

Soniccc:

I meant:

I'm getting a lot of "end tag for "ul" which is not finished" warnings with the WC3 Markup Validation Service. Is this normal?
Thanks

www.test.soundfactory.nu

Hmmm................Yep..........there WAS a time when I got that, as well, but I though I had worked all of that out before uploading..........Hmmmmm.........maybe not?

Are you still seeing this?
You go a URL of the site with this problem?

I'm curious - it seems there was some discussion about Category Dressing being able to work with this mod http://www.zen-cart.com/forum/showpost.php?p=985750&postcount=590 but I'm not clear on the final outcome. Was this achieved? I'd hate to tweak a working flyout menu system if Category Dressing doesn't work.

Ultimately, I'm just looking to add headers in the menu system.

It's not that Categories Dressing can work with this mod, but that you can get flyout functionality in CD with a few style rules added to it. There is more detail in the CD support thread.

Awesome to hear and thank you for taking the time to answer. It clears it up a bit for me. I'll do a little more digging and playing with these and see where it goes. :-)

picaflor-azul:

Hi! If this has already been asked, then I apologize ahead of time :smile:

I love this mod and it is so useful, so thank you very much!

I would like to change the background image for the current category. Is there a way to do this?

Thanks,

Anne

Hi does anyone know how to do this?

Thanks

Thank you for the mod. I installed it and while it works well - I do have a couple of questions. I'm running the latest version of ZC 1.3.9h.

1. I have a large list of categories that fills the page. When you get closer to the bottom of the page, the menu flies out as it should, but you have to scroll the whole page down to view the contents. Is there a way to get the menu to fly **up **so the menu is on the same screen?

2. When some of my subcategories that do not have a sub-sub category, the subcategory name is highlighted. Is there a way to not do that? I played with the CSS but can't figure it out.

The site that I'm currently working on is an adult novelty toy site. I don't know the rule to the forum with regards to such sites so I'm not sure if I should include a link or not.

Any help would be appreciated.

kman55, You may include a link to the site as long as you ALSO post an Adult Content warning right next to it...............and seeing exactly what you're talking about and trying to accomplish would be helpful.

Get Em Fast:

kman55, You may include a link to the site as long as you ALSO post an Adult Content warning right next to it...............and seeing exactly what you're talking about and trying to accomplish would be helpful.

Thank you for your reply. The link is (remove spaces from the url) www.k i n k y k u p i d . com / zencart. PLEASE NOTE: This is an ADULT novelty toy site. Please do not log onto the site above if you think you will be offended by the contents.

As I had mentioned, if you look at the categories that are closed towards the bottom of the page, the menu flies out (which is what I want) but the a lot of the contents hide under the screen. So you have to stop hovering, scroll the screen down and then hover of the category to be able to view the flyout menu.

Also, there's a grey highlight in many subcategories that does not have additional category. How do I remove that highlight? I've tried tinkering with the CSS and it did not help.