Rollover menus - bring to front?

[jon180]

Hi

I have designed a javascript rollover menu bar using Fireworks (yes I know I'm cheating). When I import the rollover menu into Dreamweaver (to edit my html document), the menu's don't cascade over the other content on the page. Ie when rolling over the menu buttons, the cascading menu rolls out behind the content.

Does anyone know how to bring the menu's to the front?

Cheers

[JackTheTripper]

You have to make the z-index greater than the content on the page.

Without code I'm assuming that the menu's are div layers. On each div you need to add... <div style= "z-index: 10">

Now, the question is whether the div's are located nicely in your code or are generated dynamically in a .js file.

Good luck.

[jon180]

Thanks. I've just looked at my html code, but can't see any div's in the code. If I assume that the div's are in the .js file, how do I edit this file, and what would I edit?

PS What is a div?!!! Excuse my ignorance!

[JackTheTripper]

Check out www.smcu.org If your menu's are anything like that maybe I can help.

The JavaScript that writes these menu's is kept in a file called fw_menu.js. I just pulled it up and looked at it.

Do a search or find for the word "index". You should find some code that reads "z-index:1" or some other number. Just put a big number in there like 10 or whatever.

Explaination: In case you're wondering, ad Div can be made into a floating layer that can be positioned "over" the page pretty much anywhere. It's used alot in DHTML which is kinda what these menu's are. the z-index is what order the layers go in. The higher the number, the higher the level of the div or object over the page. usually the whole body and content of an html doc is 0 (zero) or 1 can't remember. but if two objects have the same z-index it put's whatever is made first.... well..... first, then the next thing on top of it. So if your menu's are being created before the page that could be causing it. But if you tell it the menu's should be "on top" by giving a z index of something higher than the body you'll be OK.

Make sense?

[jon180]

"Check out www.smcu.org If your menu's are anything like that maybe I can help. "

Yep, that's it! I would like my menu's to appear like smcu.

I opened up the fw_menu.js file, and did a search on the word "index". The first line is below:

<DIV ID="menuLayer'+ countMenus +'" STYLE="position:absolute;z-index:1;left:10;top:'+ (i * 100) +';visibility:hidden;">\n'+

Should I just change the "z-index:1" to "z-index:10"? I notice that this phrase appears a regularly throughout the fw_menu.js file. Should I change it each time it appears, or just the first time?

Thanks.

[JackTheTripper]

Yup. Change them all and that should do it. You need to change them all because there are a lot of if statements to make the menu's work in many different browsers.


Hope that works for you.

[jon180]

Great! Thanks for all your help!