jQuery - Menu LavaLamp avec plusieurs images?

Question

J'essaie le jQuery Lavalamp menu et j'essaye de le changer et de comprendre comment cela fonctionne en même temps. Chose est, tous les exemples que j'ai trouvés consistent essentiellement en deux images.

L'arrière-plan et l'image de gauche. Ça va, mais je veux créer un menu où il se compose de trois images. L'arrière-plan, le milieu et la gauche. Et le milieu doit réagir de la même manière que le gauche, ne doit être positionné qu'au milieu de l'élément de menu à tout moment.

Est-ce que quelqu'un a une idée sur ce qui devrait être fait pour que cela se produise? J'ai juste besoin d'insérer une div 15px statique entre la structure.

Answer 1

Eh bien, ce qu'ils font est la suivante:

• position div externe dans la liste
• Donnez-lui l'image de droite et du milieu
• Ajouter un div imbriqué, soit 100% de la largeur
• Donne l'image de gauche, alignée à gauche.

Ce que vous voulez faire est d'utiliser 3 divs imbriqués.

• La div extérieure avec le centre/bg avec la position d'arrière-plan: sommet central;
• La div interne avec l'image de gauche avec le haut à gauche
• La div la plus interne avec l'image de droite, position de fond: en haut à droite;

Je vais montrer que dans un moment ...

[modifier]
Nouveau balisage dans le fichier js:

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

Nouveau 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; 
} 

[autre édition] Je n'avais pas réalisé que vous vouliez une chose statique au milieu. Puisque vous avez 2 divs imbriqués en ce moment, cela fonctionnerait-il pour ajouter un tiers, comme ci-dessus? Seulement cette fois assigner le div le plus profond une largeur de 15px et ajouter la marge: 0 auto; Laissez les 2 autres comme ils sont. Comme les 2 autres div remplissent 100% de l'espace libre, cela devrait placer la troisième div au milieu.