/    Sign up×
Community /Pin to ProfileBookmark

Rollover menus – bring to front?

Copy linkTweet thisAlerts:
May 06.2003

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

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@JackTheTripperMay 06.2003 — 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 [COLOR=blue]style= "z-index: 10"[/COLOR]>

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

Good luck.
Copy linkTweet thisAlerts:
@jon180authorMay 06.2003 — 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!
Copy linkTweet thisAlerts:
@JackTheTripperMay 06.2003 — 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?
Copy linkTweet thisAlerts:
@jon180authorMay 06.2003 — "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.
Copy linkTweet thisAlerts:
@JackTheTripperMay 06.2003 — 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.
Copy linkTweet thisAlerts:
@jon180authorMay 06.2003 — Great! Thanks for all your help!
×

Success!

Help @jon180 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...