LavaLamp menu (using JQuery)
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:
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:
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étier</a></li>
<li><a href="index.php?cat=reglementation&mode=preambule" onclick="window.location.replace('index.php?cat=reglementation&mode=preambule')">Ré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
