jQuery - LavaLamp menu with multiple images?

Question

Hi, I'm trying out the jQuery Lavalamp menu and I'm trying to alter it and understand how it works at the same time. Thing is, all examples I've found consist of basically two images.

The background and the left image. That ok, but I want to create a menu where it consists of three images. The background, the middle and the left. And the middle should react in the same way as the left one, only be positioned in the middle of the menu item at all times.

Does anyone have any idea on what should be done to make this happen? I just need to somehow insert a static 15px div in between the structure.

Answer 1

Well, what they are doing is this:

• Position the outer div under the list
• Give it the image of the right and middle
• Add a nested div, that is 100% of the width
• Give that the left image, aligned left.

What you'll want to do is use 3 nested divs.

• The outer div with the center/bg with background-position: center top;
• The inner div with the left image with left top
• The innermost div with the right image, background-position: right top;

I'll illustrate that in a moment...

[edit]
New markup in the js file:

<li class="back"><div class="left"><div class="right"></div></div></li>

New css:

.lavaLampWithImage li.back {
     background: url("middle.jpg") no-repeat center top; // could be repeat-x
     width: 9px; height: 30px;
     z-index: 8;
     position: absolute;
 }
 .lavaLampWithImage li.back .left {
     background: url("left.jpg") no-repeat left top;
     height: 30px;
}
.lavaLampWithImage li.back .right {
     background: url("right.jpg") no-repeat right top;
     height: 30px;
}

[another edit] I did not realize you wanted a static thing in the middle. Since you have 2 nested divs right now, would it work to add a third, like above? Only this time assign the innermost div a width of 15px and add margin: 0 auto; Leave the other 2 as they are. Since the other 2 divs are filling up 100% of the free space this should place the third div in the middle.