[Menu] Changement d'image et SlideToggle associer a un click
Bonjour, j'espère que mon titre est assez explicite.
Alors voila, j'ai un menu (inspiré d'un tuto de ce site justement) qui se déroule avec un click sur l'entête sur menu. Comme c'est un menu que je voudrais personnaliser j'ai changer l'image de l'entête du menu et (c'est la ou je bloque) je voudrais que pendant que le menu se déplie ou se replie l'image de l'entête change.
J'ai 2 images pour l'entête : une quand le menu est replier, et l'autre quand il est déplier et je voudrais donc alterner l'affichage de ces 2 images en fonction de l'état du menu (replier ou déplier)
Le script en jquery que j'ai pour l'instant effectue ce changement d'images quand je déplie le menu puis quand je le replie mais cette action ne s'effectue qu'une seule fois... quand je reclick pour déplier le menu celui-ci se déroule normalement mais l'image de l'entête ne change plus.
Passons au code :
jquery code :
Code:
1
2
3
4
5
6
7
8
9
10
11
| <script type="text/javascript">
$(document).ready(function () {
$('img.menu_head').click(function () {
$("img.menu_head").attr("src","./images/parchemin_haut.gif");
$('ul.menu_body').slideToggle('medium');
$('img.menu_head').click(function () {
$("img.menu_head").attr("src","./images/parchemin_rouler2.gif");
});
});
});
</script> |
html :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
| <body>
<img src="images/parchemin_rouler2.gif" width="176" height="36" class="menu_head" />
<ul class="menu_body">
<li><a href="#">Géographie</a></li>
<li><a href="#">BlaBla</a></li>
<li><a href="#">BliBli</a></li>
<li><a href="#">BloBlo</a></li>
<li><a href="#">BluBlu</a></li>
<li><a href="#">Gallerie</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body> |
et le 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
|
body{
font-family:Arial, Helvetica, sans-serif; font-size:12px;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0 0;
}
ul, li{
margin:0;
padding:0;
list-style:none inside;}
.menu_head{
border-style: solid;
border-width: 0;
}
.menu_body {
background-image: url(../pad_tranche1.gif);
background-repeat: no-repeat;
background-attachment: inherit;
position: absolute;
top: 38px;
left: 14px;
display:none;
width:176px;
height: 192px;
}
.menu_body li{ background-position: 0 0; }
.menu_body li.alt{ background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 0; }
.menu_body li a{ color:#000; text-decoration:none; text-align: left; padding:5px; }
.menu_body li a:hover{font-weight:bold;}
.menu_body li:hover{font-weight:bold;} |
Voila, voila, donc le soucis doit bien sur se situer au niveau du jquery mais comme je débute et que je comprend pas encore tout je galère un peu avec ce changement d'image...
merci d'avance
