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; }
Partager