[Menu] Changement d'image et SlideToggle associer a un click

**Sefoun** · 18/05/2009, 18h35

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 :

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

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 :

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

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 :

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
 
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

**Kerod** · 18/05/2009, 21h21

Ceci pourrait être une idée :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script type="text/javascript">
$(document).ready(function () {
    $('img.menu_head').click(function () {
        if(!$(this).hasClass("open"))
        {
            $(this).attr("src","./images/parchemin_haut.gif");
            $(this).addClass("open");
        } else {
            $(this).attr("src","./images/parchemin_rouler2.gif");    
            $(this).removeClass("open");
        }            
        $('ul.menu_body').slideToggle('medium');
    });
});
</script>

**Sefoun** · 19/05/2009, 01h27

merci merci merci merci !

ça marche nickel

[Menu] Changement d'image et SlideToggle associer a un click

jQuery

Vue hybride

Discussions similaires

Partager

Partager