Support for CSS Flyout Menu

[Get Em Fast]

I've got a problem on my website with the css category menu's being hidden behind a slideshow that I have running on the main page. See an example at http://www.shoptomlinsons.com/

Once you get 2-3 categories deep it is hidden behind the center image (which is actually a js slideshow). Is there any way I can make the categories always show up in front of anything else on the main page?

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.

[ajcannon]

You're awesome! Thanks so much...worked like a charm. Have a great day!

[Get Em Fast]

Not a problem. Happy Zenning!

[Guptyboy]

Lots of people say it ... "I love this place!" I'm not a programmer, have little networking skills and know even less about website etc .. but these forums make working with Zen Cart SOOO easy!

Usually dont post until I have a problem, most the time either I figure it out or the forums has some useful bits to help.

I have this running on my 1.3.9d site (www.battlebunker.com) but
I'm having an issue with the menu extending below and off screen making it fiddly to reach the bottom of the menu ... any suggestions?

I think I read something about a scrollbar that is added for long menus (may not have been for this mod) ... will have to go looking for that in the previous posts on this thread - I must admit I have not read all the pages ....

And I hate feeling obligated to say "I have a template monster theme", from what I have read on these forums I gather they dont go well together.

Cheers

[Get Em Fast]

Lots of people say it ... "I love this place!" I'm not a programmer, have little networking skills and know even less about website etc .. but these forums make working with Zen Cart SOOO easy!

That's what we're here for. Glad you found a "Home" with Zen-Cart. Happy Zenning.

Usually dont post until I have a problem, most the time either I figure it out or the forums has some useful bits to help.

Shame on you........if everybody done that, there wouldn't be any answers to all the problems in this forum. Every once in a while, just look through the new posts.....you'd be surprised at how many questions you can actually answer by the knowledge you've gained here. That's what this community is built on........the sharing of "learned knowledge"

I have this running on my 1.3.9d site (www.battlebunker.com) but
I'm having an issue with the menu extending below and off screen making it fiddly to reach the bottom of the menu ... any suggestions?

I think I read something about a scrollbar that is added for long menus (may not have been for this mod) ... will have to go looking for that in the previous posts on this thread - I must admit I have not read all the pages ....

Read, read, read......that's the key!
O.k., now to solve your problem. In your stylesheet_categories_menu.css, find this block of code (almost at the bottom):

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

And add this to it:

height: 200px;
overflow: scroll;

Making 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;
        height: 200px;
        overflow: scroll;
}

Adjust height (length of box before it starts to scroll) as needed.

And I hate feeling obligated to say "I have a template monster theme", from what I have read on these forums I gather they dont go well together.

Cheers

..............no words..............................

Hope this helps.

[Guptyboy]

Thanks for the fast response ... I've had so many late nights playing with Zen Cart - in fact, tonight has been a sleepless night - its almost time to go get my morning donut and coffee! NOICE!

Okay ... I applied those edits and it has given the scroll box .. some weird layout issues with the scroll box though. Can you see the excess white space when hovering over a category that cant fill the 200px It seems to limit the levels of expansion aswell

Any other suggestions?

PS - aye my friend, that it is ... sometimes you need to give your eyes a rest though and use your mouth to ask ... thats my excuse and I'm sticking to it!

I ordered a copy of the book just before the weekend, hopefully be here next week! Then I can become Totally Zenned! mwuwhaha.

[Get Em Fast]

That's due to the height of the box being set at 200px. But, I just noticed that when the menu is set to scroll, the next level doesn't show. I would take that back off leaving it as it was.

Right now, I'm pretty busy and don't have much time to do any testing on it. I WILL look into a better solution, as I am planning on re-doing the whole menu making it more "user friendly". But, I can't say how long it will be before I get the new version done because, like I say.....I'm pretty busy with clients at the moment.

So for now, my best suggestion would be to move your menu to the top of your page (where your calendar is), leaving more room for the menu items to appear without scrolling. Actually, with a sidebox menu system, that's where it should be in the first place so customers don't have such a hard time finding it. As of now, without scrolling down, a customer cannot even see your menu, which is one of the first things you should "stick in their face".

Robert

[bellamagia]

I am having a hard time figuring out the z-index or issue with my menu in IE7 for http://www.bellasurjewelry.com/

Seems to be working fine for IE8 and FF as well as Chrome, but IE7 is doing something weird. You can only click on the top subcategory. If you try to move to the subcategory below it, it jumps to the next categories subs. (try it...I know it might sound confusing lol).

Any help would be greatly appreciated! Site is almost done except for this and a few other loose ends.

[Get Em Fast]

bell, I'm not seeing any strange issues in IE7. Everything works as it should for me.
Is anyone else seeing this in bell's site?

[hardwiredtemplates]

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