Création du menu lavalamp avec jquery
Résolu
tipi75
Messages postés
723
Statut
Membre
-
mimille-41 -
mimille-41 -
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:
Voici la parti css:
Merci de votre aide
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:
- Création du menu lavalamp avec jquery
- Creation compte gmail - Guide
- Menu déroulant excel - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide