Discussion :

[rems033]

salut à tous,
Je viens d'implémenter pour mon site le menu suivant : http://devthought.com/cssjavascript-...er-fancy-menu/
Par contre, je ne vois pas du tout comment "coincer" la bubulle sur le menu courant...
J'ai bien essayé de mettre une classe current dans mon css mais ca me décale tout !
Voici des bouts de mon code :
CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
.lavaLampWithImage {
    position: relative;
    width: 590px ;
    height:81px ;    
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
.lavaLampWithImage li {
    float: left;
    list-style: none;
}
.lavaLampWithImage li.back {
    background: url("../images/lava.gif") no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
}
.lavaLampWithImage li.back .left {
    background: url("../images/lava.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage li.current {
    background: url("../images/lava.gif") no-repeat right -30px;
    width: 9px; height: 30px;
    z-index: 8;
    position: absolute;
}
.lavaLampWithImage li.current .left {
    background: url("../images/lava.gif") no-repeat top left;
    height: 30px;
    margin-right: 9px; /* 7px is the width of the rounded shape */
}
.lavaLampWithImage 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;    
}
.lavaLampWithImage li a:hover {
    border: none;
    color:#FFCC00;
}
.lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
    border: none;
}

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<ul class="lavaLampWithImage" id="menu">
 <li><a href="index.php" onclick="window.location.replace('index.php')">Accueil</a></li>
        <li><a href="index.php?cat=annonces" class="current" onclick="window.location.replace('index.php?cat=annonces')">Licences</a></li>
        <li><a href="index.php?cat=metier&mode=statuts" onclick="window.location.replace('index.php?cat=metier&mode=statuts')">Le M&eacute;tier</a></li>
        <li><a href="index.php?cat=reglementation&mode=preambule" onclick="window.location.replace('index.php?cat=reglementation&mode=preambule')">R&eacute;glementation</a></li>
        <li><a href="index.php?cat=liens&mode=preambule" onclick="window.location.replace('index.php?cat=liens&mode=preambule')">Liens</a></li>
        <li><a href="index.php?cat=contact" onclick="window.location.replace('index.php?cat=contact')">Contact</a></li>                       
</ul>

Merci pour votre aide

[Bovino]

Si c'est un problème javascript, c'est un peu ballot de pas mettre le code javascript...
Sinon, tout ce qui me saute aux yeux, c'est

LavaLamp menu (using JQuery)

alors que le lin que tu donnes utilise mootools !

[rems033]

C'est une erreur de ma part...
Voici le lien original : http://www.gmarwaha.com/blog/?p=7

En fait je me demande si ce n'est pas plutôt un problème de css et dd'initialisation du javascript...

Merci pour votre aide

Voici le code javascript qui permet de gérer la classe current qui est pourtant implémentée dans mon HTML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
(function($){$.fn.lavaLamp=function(o){o=$.extend({fx:"linear",speed:500,click:function(){}},o||{});return this.each(function(){var b=$(this),noop=function(){},$back=$('<li class="back"><div class="left"></div></li>').appendTo(b),$li=$("li",this),curr=$("li.current",this)[0]||$($li[0]).addClass("current")[0];$li.not(".back").hover(function(){move(this)},noop);$(this).hover(noop,function(){move(curr)});$li.click(function(e){setCurr(this);return o.click.apply(this,[e,this])});setCurr(curr);function setCurr(a){$back.css({"left":a.offsetLeft+"px","width":a.offsetWidth+"px"});curr=a};function move(a){$back.each(function(){$(this).dequeue()}).animate({width:a.offsetWidth,left:a.offsetLeft},o.speed,o.fx)}})}})(jQuery);