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