Création du menu lavalamp avec jquery
Résolu
tipi75
Messages postés
680
Date d'inscription
Statut
Membre
Dernière intervention
-
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
- Menu déroulant excel - Guide
- Creation compte gmail - Guide
- Création site web - Guide
- Media creation tool - Télécharger - Systèmes d'exploitation
- Création compte google - Guide