Bonjour à toutes et tous,
je suis en train de faire un site et je voudrais faire en sorte que mon menu de gauche reste bloqué sur la partie du menu sur laquelle j'ai cliqué lors du changement de page.
Voici mon js :
Le site en question se trouve ici : http://www.la-grange-sardieres.fr/si...ab/contenu.php
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 function afficheMenu(menu) { // generation du nom du sous menu que l'on veut gerer (afficher / cacher) var sousMenu='sous' + menu; // on recupere son etat var etatSousMenu=document.getElementById(sousMenu).style.display; // on cree un array de tous les menus de niveau 1, donc ceux qui ont la classe 'menu_niv1' var listeNiv1=document.getElementsByClassName('menu_niv1'); // on boucle sur ces elements for (var i=0; i<listeNiv1.length; i++) { // on recupere l'id du menu courant var idCourant=listeNiv1[i].id; // si l'id courant est le meme que le menu que l'on a clique alors on traite le sous menu // sinon on le cache et on passe au suivant if (idCourant==menu) { if (etatSousMenu=='block') { document.getElementById(sousMenu).style.display='none'; } else { document.getElementById(sousMenu).style.display='block'; } } else { // attention, si on cache, on doit cacher le sous menu du menu courant, il faut donc creer une nouvelle variable pour cacher celui-ci var sousMenuTemp='sous' + idCourant; document.getElementById(sousMenuTemp).style.display='none'; } } }
Par exemple, lorsque je clique sur "théâtre", je voudrai faire en sorte qu'au changement de page, le menu reste déroulé sur la partie que j'ai cliqué, c'est-à-dire pour cet exemple le menu principal "écrits" avec les sous-menus déroulés.
Si besoin, voici également le code HTML de la page :
Pensez-vous que cela est réalisable ?
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="robots" content="index, follow" /> <meta name="keywords" content=" "/> <meta name="description" content=" "/> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" /> <link rel="stylesheet" href="css/contenu.css" type="text/css" /> <script type="text/javascript" src="js/copie_functions.js"></script> <script type="text/javascript" src="js/functions_contenu.js"></script> <style type="text/css"> <!-- body { margin-top: 0px; } --> </style> </head> <body bgcolor="#333333"> <table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;"> <tr> <td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td> </tr> <tr> <td width="183" valign="top"><div id="menu"> <div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br> <div id="sousmenu1" style="display:none"><br> <div class="sousmenu"><a href="contenu.php?num=6&lib=théâtre">théâtre</a></div><br><div class="sousmenu"><a href="contenu.php?num=7&lib=enfance et jeunesse">enfance et jeunesse</a></div><br><div class="sousmenu"><a href="contenu.php?num=8&lib=poésie">poésie</a></div><br><div class="sousmenu"><a href="contenu.php?num=9&lib=traduction">traduction</a></div><br><div class="sousmenu"><a href="contenu.php?num=10&lib=inédits">inédits</a></div><br><div class="sousmenu"><a href="contenu.php?num=11&lib=autres publications">autres publications</a></div><br></div> <div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br> <div id="sousmenu2" style="display:none"><br> <div class="sousmenu"><a href="contenu.php?num=12&lib=saison 2010-2011">saison 2010-2011</a></div><br><div class="sousmenu"><a href="contenu.php?num=13&lib=saison 2009-2010">saison 2009-2010</a></div><br><div class="sousmenu"><a href="contenu.php?num=14&lib=archives">archives</a></div><br></div> <div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br> <div id="sousmenu3" style="display:none"><br> <div class="sousmenu"><a href="contenu.php?num=15&lib=lacoop">lacoop</a></div><br><div class="sousmenu"><a href="contenu.php?num=16&lib=projets pour la scène">projets pour la scène</a></div><br><div class="sousmenu"><a href="contenu.php?num=17&lib=enseignement/Ateliers">enseignement/Ateliers</a></div><br><div class="sousmenu"><a href="contenu.php?num=18&lib=radio">radio</a></div><br></div> <div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br> <div id="sousmenu4" style="display:none"><br> <div class="sousmenu"><a href="contenu.php?num=19&lib=à l'affiche">à l'affiche</a></div><br><div class="sousmenu"><a href="contenu.php?num=20&lib=nouvelle publication">nouvelle publication</a></div><br><div class="sousmenu"><a href="contenu.php?num=21&lib=impromptus">impromptus</a></div><br></div> <div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br> <div id="sousmenu5" style="display:none"><br> <div class="sousmenu"><a href="contenu.php?num=22&lib=presse">presse</a></div><br><div class="sousmenu"><a href="contenu.php?num=23&lib=liens">liens</a></div><br><div class="sousmenu"><a href="contenu.php?num=24&lib=contact">contact</a></div><br></div> </div></td> <td width="800" valign="top" style="width: 665px;"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="47%" valign="top" bgcolor="#FFFFFF" class="titre_lien"> <br> <br><a href="#" onclick="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')" class="lien">nom_lien</a></td> <td width="2%"> </td> <td width="51%" bgcolor="#FFFFFF"><div id="textDiv"><div class="texte_lieu">lieu</div> <br /> <div class="texte_titre">Titre</div> <br /> <div class="texte_dateetnbrepage">dateetnbrepage</div> <div class="texte_editeur">editeur</div> <br /> <div class="texte_contenu">texte</div><br /> </div></td> </tr> </table></td> <td width="17" style="background: #000;"> </td> </tr> </table> </body> </html>
Je pense qu'il faut ajouter des paramètres dans mon js, mais je ne sais pas où exactement. (ce n'est que mon avis)
Merci beaucoup pour votre aide et bonne soirée.
Partager