bonjour,

j'ai suivis les tutoriels du site pour avoir un système de menus reactifs à l'aide de jQuery, le problème c'est que au lieu que le sous menu s'ouvre sous le menu correspondant, il s'ouvre toujours à la même place.

voyez par vous mêmes (boutons GSP, dossiers, et résultats)
http://www.gamer-certified.fr/accueil.html

merci de votre aide.


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="menu_head">
    <img src="images/menu_dossiers.png" alt="image du menu dossiers" width="150" height="50"  id="menu_dossiers" />
 
		<ul class="menu_body" id="dossiers" ><!-- sous-menu -->
        	<li><a href="#">Dossiers techniques</a></li>
   	</ul>
</div>
 
<div class="menu_head">
    <img src="images/menu_gsp.png" alt="image du menu des GSP" width="150"  height="50" id="menu_GSP"  />
        <ul class="menu_body" id="GSP">
        		<li><a href="gsp.html">Palmarès utilisateur Ete 2008</a></li>
                <li><a href="#">Comparatif des offres des GSP</a></li>
   	</ul>


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
$(document).ready(function() {
 
   	$("ul.menu_body li:even").addClass("alt"); // permet de switch les couleurs du sous menu
 
    $('img#menu_dossiers').click(function () {
        $('ul#dossiers').slideToggle('medium');
    });
 
	$('img#menu_GSP').click(function () {
        $('ul#GSP').slideToggle('medium');
    });
 
	$('img#menu_resultats').click(function () {
        $('ul#resultats').slideToggle('medium');
    });
 
    $('ul.menu_body li a').mouseover(function () {
        $(this).animate({ fontSize: "14px", paddingLeft: "20px" }, 50 );
    });
    $('ul.menu_body li a').mouseout.(function () {
        $(this).animate({ fontSize: "12px", paddingLeft: "10px" }, 50 );
    });
});
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
#menu {
	margin-left:30px;
	}
 
.menu_head {
	position:relative;
	display:inline;
}
 
 
.menu_body {
 
	width:150px;
	display:none;
	position:absolute;
 
}
 
 
ul, li{
    margin:0;
    padding:0;
    list-style:none;	
}