z-index question i.c.w. lavalamp menu

[Judith]

Hi there,

I try to make my lavalamp menu work like this:
http://tinyurl.com/cwrxyg5

but then to have the container bg in the middle like this
http://tinyurl.com/crk4hol

as you can see in the second example the border from the menu disappeared and is now hidden in between the body and the container bg. Does anybody know how I can fix this?
If I change the #nav li.back to a positive z-index the submenu is not working anymore….

Thanks so much in advance!!!!!!

Judith

[JoniGiuro]

I don’t know how the lavalamp works but I created a version that should be easy to set up

http://jsfiddle.net/jonigiuro/MLbYW/8/

[Paulie_D]

I assume this is due to all the absolute positioning of the container.

I don’t know if all this is a requirement of the effect but that’s the issue AFAICT.

[Judith]

hi JoniGiuro & Paulie_D,
Thanks for your comments!

@JoniGiuro I like the example but what I miss is that it’s not visible what the ‘active’ menu button is. In my example the home is now active, if you stop hovering over the other menu items, go below the nav, the button style will fly back to the active button, in my case “home”…

@Paulie_D yes it’s due to the absolute positioning but how will I get the container to not be absolute, like in example link 2, and still have the nav functioning on top like it does in example link 1. …

[Paulie_D]

My question, I suppose, is..

“Is the absolute positioning fundamental to the ‘lavalamp’ effect?”

[Judith]

Oh, I’m sorry :)
well, not fundamental for lavalamp. In example link 2 (http://tinyurl.com/crk4hol) , where there is no absolute positioning of the container, the lavalamp works fine, only it’s moving behind the container bg so we won’t see it now.
If I leave out the container div altogether, it works perfectly :) But I like the bg image to be in the middle, moving with the content.

the “#nav li.back” has a negative z-index, I tried changing the #nav li.back z-index of -1 to a positive number or static, but it will cause the submenu to disappear as soon as you hover over it…
I don’t really understand why though..

[Paulie_D]

Well, I guess, the first thing to do is fix the effect so change the z-index of

#nav li.back

to 1.

My guess is that the .back (or however this is achieved) is sitting on top of the hovered element and so the hover comes off.

Hmmm.

[Paulie_D]

Aha…on

#nav li.back

add

pointer-events: none;

[Judith]

WOW, great it works! :)))
http://tinyurl.com/crk4hol

[Judith]

Thank you @Paulie_D

[Author]

Posts