jQuery - 具有多個圖像的LavaLamp菜單？

我正在嘗試jQuery Lavalamp menu，我試圖改變它，並瞭解它是如何在同一時間工作。事情是，我發現的所有例子基本上包含兩個圖像。jQuery - 具有多個圖像的LavaLamp菜單？

背景和左圖像。那好，但我想創建一個由三個圖像組成的菜單。背景，中間和左側。中間部分應該和左邊部分一樣，只能在菜單項的中間位置。

有沒有人有什麼想法應該做什麼來實現這種情況？我只需要以某種方式在結構之間插入一個靜態的15px div。

來源

2010-01-21 Kenny Bones

那麼，他們在做什麼是這樣的：

位置列表下的外層div
給它的右圖像和中間
添加一個div嵌套，即100％的寬度
給左邊的圖像，左對齊。

你想要做的是使用3個嵌套的div。

與中心/ bg與背景位置的外部div：center top;
內部div與左上方的圖像
最右邊的div與正確的圖像，背景位置：右上方;

我會說明在某一時刻...

[編輯]
在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個嵌套的div，它會工作添加第三個像上面一樣嗎？只有這次分配最內部div的寬度爲15px並添加邊距：0 auto; 將其他2保留原樣。由於其他2個div填滿了可用空間的100％，因此應該將第三個div放在中間。

來源

2010-01-26 19:54:19 Pepijn

太棒了！這很棒！工作就像魅力立即:) 從來沒有想過標記是那麼簡單:) – 2010-01-26 22:06:42

jQuery - 具有多個圖像的LavaLamp菜單？

回答

相關問題