Bloquer le menu lors du changement de page

**quaresma** · 24/10/2010, 23h13

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 :

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

Le site en question se trouve ici : http://www.la-grange-sardieres.fr/si...ab/contenu.php

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 :

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&eacute;&acirc;tre">th&eacute;&acirc;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&eacute;sie">po&eacute;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&eacute;dits">in&eacute;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&egrave;ne">projets pour la sc&egrave;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=&agrave; l'affiche">&agrave; 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%">&nbsp;</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;">&nbsp;</td>
</tr>
</table>
 
</body>
</html>

Pensez-vous que cela est réalisable ?
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.

**quaresma** · 28/10/2010, 22h25

Personne pour m'aider ??

A savoir que j'ai changé mon js :

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
function afficheMenu(obj){
 
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
 
	/*****************************************************/
	/**	on cache tous les sous-menus pour n'afficher    **/
	/** que celui dont le menu correspondant est cliqué **/
	/** où 4 correspond au nombre de sous-menus         **/
	/*****************************************************/
	for(var i = 1; i <= 5; i++){
		if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
			document.getElementById('sousmenu' + i).style.display = "none";
		}
	}
 
	if(sousMenu){
		//alert(sousMenu.style.display);
		if(sousMenu.style.display == "block"){
			sousMenu.style.display = "none";
		}
		else{
			sousMenu.style.display = "block";
		}
	}
 
}

**Spirit 203** · 28/10/2010, 23h27

Bonjour,
Ton problème vient du fait que tu n'empêches pas le comportement par défaut du lien sur lequel tu cliques, et qui consiste à changer de page.

Remplaces donc

Code :

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

1
2
3
4
5
 
$("a.lien").click(function() { 
      loadContent( $(this).attr('href') ); 
      return false; 
    });

par

Code :

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

1
2
3
4
5
6
 
$("a.lien").click(function(e) { 
      e.preventDefault();
      loadContent( $(this).attr('href') ); 
      return false; 
    });

Et je pense que cela marchera.

Pour être plus détaillé, si tu regardes ton url après avoir cliqué sur un lien, tu verras qu'elle change, ce qui signifie que ton "return false" n'est pas suffisant pour empêcher le comportement par défaut. Pour peu que tu aies une erreur dans ta fonction loadContent ou autres, cela déclenchera une exception qui arrêtera l'exécution de ta fonction de callback, et donc cela ne désactivera pas le comportement du lien, ce qui fait que la page changera, donc que le tout se rechargera et que non seulement cela fait disparaître l'erreur, mais également cela perd l'information du menu selectionné.

PS, au passage, il serait plus propre d'utiliser <ul><li></li></ul> pour tes menus et sous menus, le tout bien imbriqué. Prenons un exemple :

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
 
<ul class="Menu">
  <li><h3>Menu1</h3>
      <ul>
          <li>Sous-menu 1</li>
          <li>Sous-menu 2</li>
      </ul>
   </li>
   <li><h3>Menu2</h3>
      <ul>
          <li>Sous-menu 1</li>
          <li>Sous-menu 2</li>
      </ul>
   </li>
</ul>

Ensuite, dans ton css, tu fais

Code :

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

1
2
3
4
5
 
/* Cache par défaut les sous-menus */
.Menu ul {
 display: none;
}

Et dans ton js, tu fais

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
 
// Cette fonction est automatiquement exécutée onload
$(function() {
  $('.Menu h3').bind( 'menu-open', function() {
       $(this).addClass( 'Opened' );
       $(this).next().slideToggle();
  } );
 
  $('.Menu h3').bind( 'menu-close', function() {
      $(this).removeClass( 'Opened' );
      $(this).next().slideToggle();
  } );
 
  $('.Menu h3').click( function() {
     $(this).closest( '.Menu' ).find( '.Opened' ).triggerHandler( 'menu-close' );
     $(this).triggerHandler( 'menu-open' );
  } );
 
});

Je n'ai pas testé ce code, mais théoriquement, il est bon.

**quaresma** · 28/10/2010, 23h32

Euh...ce code est pour afficher le texte dans la zone de droite lorsque je clique sur un lien de la zone du milieu.

Rien à voir avec ce que je veux faire.

Mais merci quand même et bonne soirée

**Spirit 203** · 28/10/2010, 23h51

D'après ce que j'avais compris, c'était que tu voulais que le menu à gauche reste ouvert sur les sous-menus lorsque tu cliques sur un des sous-menus.

Ma solution consiste à dire : ne recharges pas ta page, utilises ajax.

Essayes déjà d'ajouter ce code dans tes headers

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$(function() {
  $('#menu .sousmenu a').click( function(e) {
      e.preventDefault();
      $('#contenucel1').load( $(this).attr( 'href' ) );
  });
} );
</script>

Il faudra que tu fasses quelques modifs pour que cela n'affiche que le contenu de ta cellule et non toute ta page.

**quaresma** · 29/10/2010, 00h02

Envoyé par Spirit 203

D'après ce que j'avais compris, c'était que tu voulais que le menu à gauche reste ouvert sur les sous-menus lorsque tu cliques sur un des sous-menus.

Ma solution consiste à dire : ne recharges pas ta page, utilises ajax.

Essayes déjà d'ajouter ce code dans tes headers

Code :

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

1
2
3
4
5
6
7
8
9
 
<script type="text/javascript">
$(function() {
  $('#menu .sousmenu a').click( function(e) {
      e.preventDefault();
      $('#contenucel1').load( $(this).attr( 'href' ) );
  });
} );
</script>

Il faudra que tu fasses quelques modifs pour que cela n'affiche que le contenu de ta cellule et non toute ta page.

En fait oui, je voudrai que lorsque je clique sur un lien du sous-menu appartenant au menu "écrits" (le premier menu), lorsque j'arrive sur l'autre page le menu en question reste ouvert.

J'ai essayé de mettre le script entre les <head>, mais lorsque je clique sur un lien du sous-menu, il m'ouvre une page entière dans la même page.
Ce qui fait qu'elle se superpose à la première page.

Bloquer le menu lors du changement de page

JavaScript

Vue hybride

Discussions similaires

Partager

Partager