Création du menu lavalamp avec jquery

Résolu/Fermé
tipi75 Messages postés 680 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 16 avril 2015 - 10 nov. 2009 à 22:34
 mimille-41 - 16 mars 2010 à 10:46
Bonsoir,

J'essaye de faire le menu lavalamp:

http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

Mais j'ai un soucis parce que mon animation se déplace bien sauf qu'il y a un autre carré orange qui reste sur le premier lien. J'explique comme je peux mais ce n'est pas évident. Je vous passe un lien que montre à peut près le problème:

http://mbox.tuxfamily.org/slider/

Sur ce lien vous voyez qu'il y a un carré bleu qui ne bouge pas et bah.. moi c'est pareil. ATTENTION: ne faite pas attention au design.

Voici ma partie html:

<div id="menu">
	        <ul class="menu_dessus" id="1">
			 <li class="current"><a href="/">Lien1</a></li>
			 <li><a href="http://blog.arnaud-k.fr">Lien2</a></li>
			 <li><a href="mes-projets.html">Lien3</a></li>
			 <li><a href="http://photos.arnaud-k.fr">Lien4</a></li>
			 <li><a href="http://photos.arnaud-k.fr">Lien5</a></li>
			 <li style="overflow: hidden; left: 90px; width: 100px; display: block;" class="back"><divclass="left"></div></li>
		</ul>
	    </div>



Voici la parti css:

div#menu{
background:#5f8137; 
margin-left:auto;	
margin-right:auto; 
width:100%; 
padding-top:20px; 
padding-bottom:20px;  
}

a, a:visited{ 
color: #5f8137;
outline: none;
text-decoration:none;
font-weight:bold;
}

a:hover{
color:#ef9e27;
}

.menu_dessus {
position: relative;
height: 29px;
width: 1024px;
background: url("../images/bg_2.gif") no-repeat top;
padding: 15px;
margin: 10px 0;
overflow: hidden;
padding-left:90px;
overflow: hidden;
margin:0;
margin-left:auto;
margin-right:auto;
}

.menu_dessus li {
float: left;
list-style: none;
}

.menu_dessus li.back {
background: url("../images/lava.gif") no-repeat right -30px;
width: 9px;
height: 30px;
z-index: 8;
position: absolute;
}

.menu_dessus li.back .left {
background: url("../images/lava.gif") no-repeat top left;
height: 30px;
margin-right: 0px; /* 7px is the width of the rounded shape */
}

.menu_dessus li a {
font: bold 14px arial;
text-decoration: none;
color: #fff;
outline: none;
text-align: center;
top: 7px;
text-transform: uppercase;
letter-spacing: 0;
z-index: 10;
display: block;
float: left;
height: 30px;
position: relative;
overflow: hidden;
margin: auto 10px;    
}

.menu_dessus li a:hover, .menu_dessus li a:active, .menu_dessus li a:visited {
border: none;
 }




Merci de votre aide
A voir également:

3 réponses

tipi75 Messages postés 680 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 16 avril 2015 27
10 nov. 2009 à 23:03
personne ne peut m'aider???


Merci d'avance
tipi75 Messages postés 680 Date d'inscription lundi 20 août 2007 Statut Membre Dernière intervention 16 avril 2015 27
10 nov. 2009 à 23:24
c'est bon j'ai trouvé mon problème
tipi75 bonjour,

Je souhaite créer moi aussi un menu lavalamp. Peux-tu me dire comment tu as fait?
Cela me rendrais un énorme service. Je souhaite le modifier à mon goût et ce que je veux réaliser n'est pas possible avec le module proposé par Julien.

Merci beaucoup