Menu déroulant et changement de page

Version imprimable

Bonjour à tous,

j'ai récupérer un menu accordéon jquery que j'ai mis en place sur mon site. Mon problème est que j'aimerai, lors d'un changement de page, que le menu garde l'aspect qu'il avait avant ce changement ( qu'il reste déplier dans la position avant le changement de page). J'ai bien du mal à trouver une solution.

Voici mon menu en html :

Code:

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
<ul class="container">
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="green"> </a></li>
			<li class="dropdown">
                <ul>
                   <li><a href="?p=page1.php">Retour accueil</a></li>
				</ul>
			</li>
 
          </ul>
 
      </li>
 
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="orange"></a></li>          	
 
            <li class="dropdown">
                <ul>
                   <li><a href="?p=page6.php">page6</a></li>
                   <li><a href="?p=page7.php">page7</a></li>              
	           <li><a href="?p=page8.php">page8</a></li>		
                </ul>
			</li>
 
          </ul>
 
      </li>
 
 
      <li class="menu">
 
          <ul>
		    <li class="button"><a href="#" class="blue"> </a></li>
 
            <li class="dropdown">
                <ul>
                    <li><a href="?p=page10.php">Page10</a></li>
                    <li><a href="?p=page11.php">Page11</a></li>
                    <li><a href="?p=page12.php">Page12</a></li>        
                </ul>
			</li>
 
          </ul>
 
      </li>

Voila maintenant le code js qui déclenche l'ouverture ou la fermeture du menu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */
 
	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeInOutQuad";
 
	/* Binding a click event handler to the links: */
	$('li.button a').click(function(e){
 
		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();
 
		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
 
		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})
 
});

Voilà, si quelqu'un a déjà eu ce problème ou a une solution je suis preneur :)

merci d'avance

Bon finalement j'ai trouvé en bricolant un peu, je donne ma solution pour ceux que ca pourrait intéresser.

Code:

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
<ul class="container">
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="green"> </a></li>
			<li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==1) echo "activ";}?>">
                <ul>
                   <li><a href="?p=page1&valeur=1">Retour accueil</a></li>
				</ul>
			</li>
 
          </ul>
          
      </li>
      
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="orange"></a></li>          	
 
            <li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==2) echo "activ";}?>">
                <ul>
                   <li><a href="?p=page6&valeur=2">page6</a></li>
                   <li><a href="?p=page7&valeur=2">page7</a></li>              
	           <li><a href="?p=page8&valeur=2">page8</a></li>		
                </ul>
			</li>
 
          </ul>
          
      </li>
 
      
      <li class="menu">
      
          <ul>
		    <li class="button"><a href="#" class="blue"> </a></li>
 
            <li class="dropdown <?php if(isset($_GET['valeur'])){if( $_GET['valeur']==3) echo "activ";}?>">
                <ul>
                    <li><a href="?p=page10&valeur=3">Page10</a></li>
                    <li><a href="?p=page11&valeur=3">Page11</a></li>
                    <li><a href="?p=page12&valeur=3">Page12</a></li>        
                </ul>
			</li>
 
          </ul>
          
      </li>

En vert mes modifications. Dans mes liens dans les différents sous-menu j'ai ajouter une variable dans l'url qui indique quel sous menu est ouvert. (ex: &valeur=3). Ensuite j'ai rajouter un bout de code php dans chaque sous-menu qui teste la valeur envoyée, et si elle correspond on rajoute une class "activ" au sous-menu.

Il m'a donc suffit ensuite de rajouter une ligne en début de script js pour faire déplier le sous-menu qui contient la class "activ"

Code:

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
$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
	$.easing.def = "easeInOutQuad";

	
	$("li.activ").slideToggle('slow');

	
	$('li.button a').click(function(e){
	
		/* Finding the drop down list that corresponds to the current section: */
		var dropDown = $(this).parent().next();
		
		/* Closing all other drop down sections, except the current one */
		$('.dropdown').not(dropDown).slideUp('slow');
		dropDown.slideToggle('slow');
		
		/* Preventing the default event (which would be to navigate the browser to the link's address) */
		e.preventDefault();
	})
	
	
	
	
});

Je l'ai sûrement mal expliqué, mais si ca peut servir à quelqu'un...sait-on jamais, bien que ca ne doit pas être une bonne solution :)

à bientôt

02/03/2011, 17h29
ABCIWEB

Citation:

Envoyé par bast292

... bien que ca ne doit pas être une bonne solution :)

à bientôt

Si si, quand c'est simple, fonctionnel et que cela répond à tes besoins, c'est souvent une bonne solution :)

Juste tu pourrais simplifier un peu la ligne

Code:

<?php if(isset($_GET['valeur'])){if( $_GET['valeur']==1) echo "activ";}?>

par

Code:

<?php if(isset($_GET['valeur']) && $_GET['valeur']==1) echo "activ";?>

mais bon c'est un détail et les deux codes sont équivalents.