jQuery - меню LavaLamp с несколькими изображениями?

Question

Я пытаюсь использовать jQuery Lavalamp menu, и я пытаюсь изменить его и понять, как он работает в одно и то же время. Дело в том, что все примеры, которые я нашел, состоят в основном из двух изображений.

Фон и левое изображение. Это нормально, но я хочу создать меню, в котором он состоит из трех изображений. Фон, средний и левый. А середина должна реагировать так же, как и левая, всегда располагаться посередине пункта меню.

Кто-нибудь имеет представление о том, что нужно сделать, чтобы это произошло? Мне просто нужно как-то вставить статический div 15px между структурой.

Answer 1

Ну, что они делают это:

• Установите внешний DIV по списку
• Дайте ему изображение правого и средний
• Добавить вложенный DIV, то есть 100% от ширины
• Дайте этому левому изображению выравнивание влево.

Что вы хотите сделать, это использовать 3 вложенных div.

• Наружный div с центром/bg с фоном: центральная вершина;
• Внутренний div с левым изображением с левым верхним
• Самый внутренний div с правильным изображением, background-position: right top;

Я показывают, что в настоящее время ...

[править]
Новая разметка в файле JS:

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

Новый 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; 
} 

[другое редактирование] Я не понимал, что вам нужна статичная вещь посередине. Поскольку у вас есть 2 вложенных divs прямо сейчас, будет ли работать над добавлением третьего, как указано выше? Только на этот раз назначьте самый внутренний div шириной 15px и добавьте margin: 0 auto; Оставьте другие 2, как есть. Поскольку остальные 2 divs заполняют 100% свободного места, это должно разместить третий div в середине.