[résolu] Menu dépliant reste pas déplié

Salut à tous,

merci pour cet excellent site.

J'utilise un script pour un menu déroulant qui fonctionne très bien, la page html appelle un fichier JS avec ce code dedans:

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 <= 6; 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";
		}
	}
	
}

Le menu lui même dans le php (chargé depuis un fichier externe php) est de la forme:

<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">type de médias</a>
	</div>
    <div id="sousmenu3" style="display:none">
		<div class="sousmenu">
			<a href="nevil_story_accueilB.html">publicités télévisées</a>
		</div>
		<div class="sousmenu">
			<a href="nevil_story_accueilC.html">publicités internet</a>
		</div>
       
	</div>

là par exemple le menu principal enroulé "type de médias" et quand on clique dessus, apparaissent deux sous-menus "publicités télévisées" et "publicités internet", qui envoient vers les pages html correspondantes qui contiennent le contenu afférent.

Seul petit soucis, lorsqu'on clique sur un des liens de sous menu, après le chargement de la page liée, le menu revient en position fermée.
Est-il possible de faire en sorte que le menu reste en position "ouverte" dans laquelle on a cliqué (sans tricher si possible en le forçant à rester ouvert page par page via html) ?

J'ai cru comprendre qu'il fallait utiliser la fonction "php echo ($_SERVER["PHP_SELF"]" mais j'avoue ramer un brin. Si quelqu'un pouvait m'aiguiller.


merci !
Modifié par jpthali (19 Jan 2010 - 00:32)

Salut,

Peut être devrais tu te pencher sur cette solution :
Créer un menu déroulant “accordéon” avec jQuery

En fait, le tuto précise la façon de faire pour des pages statiques avec un menu par page et en forçant le dépliage des sous-menu.

Mais il précise «il est aussi possible de générer cette classe, en fonction d'une variable $_GET['page'] ou autre.», ce qui m'intéresserait c'est de trouver la méthode pour appliquer cette technique, avec des pages dynamiques.

merci

En fait j'ai fini par trouver une solution qui fonctionne très bien et qui me permet de garder le menu installé.
Dans chaque page ciblée par les sous menus, j'ai défini deux variables:

<?php $nav_ouvert = 'rubrique0'; ?>
<?php $nav_en_cours = 'rubrique1'; ?>

la première pour définir la position du menu, qui doit rester déplié et la seconde pour définir la classe qui correspond au sous menu dans un état "actif".

Ensuite dans le code html du menu luis même, j'ai appliqué les changements correspondants:

<div class="menu" id="menu3" onclick="afficheMenu(this)">
		<a href="#">type de médias</a>
	</div>
    <div <?php if ($nav_ouvert == 'rubrique0') {echo ' style="display:block"';} else {echo ' style="display:none"';} ?> id="sousmenu3">
		<div class="sousmenu">
			<a href="#">longs métrages</a>
		</div>
		<div <?php if ($nav_en_cours == 'rubrique1') {echo ' class="sousmenuON"';} else {echo ' class="sousmenu"';} ?>>
			<a href="nevil_story_accueilB.php">publicités télévisées</a>
		</div>
		<div <?php if ($nav_en_cours == 'rubrique2') {echo ' class="sousmenuON"';} else {echo ' class="sousmenu"';} ?>>
			<a href="nevil_story_accueilC.php">publicités internet</a>
		</div>
       
	</div>

Si la page qui contient à la fois les deux variables s'ouvre, les deux actions correspondantes au menus et sous menu choisis sont appliquées, menu ouvert et sous menu en position "actif".
Modifié par jpthali (19 Jan 2010 - 00:32)

Salut,
Je viens de découvrir ce post avec intérêt car j'ai exactement le même type de menu que j'essaye de mettre au point sur mon site !
Et même problème : mes sous-menus se referment à chaque chargement de page...
J'ai essayé la solution de jpthali, mais j'avoue que je suis un peu perdu : l'arborescence de la solution ne correspond pas à celle du début (page "longs métrages" en plus...), du coup je ne sais plus comment coder ma page de menu.
Pouvez-vous m'aider et me donner quelques explications complémentaires ?
D'avance merci beaucoup !

salut,

quels sont tes menus et sous menus que je t'explique comment les adapter ?

Merci pour ta réponse rapide !
Voici une partie du code du menu :

<div id="menu" style="display:table-cell; vertical-align:middle;">
  <div class="menu" id="menu1" onclick="afficheMenu(this)"> <a href="#">Notre village</a> </div>
  <div id="sousmenu1" style="display:none">
    <div class="sousmenu"> <a href="temp1.php">page 1</a> </div>
    <div class="sousmenu"> <a href="temp2.php">page 2</a> </div>
    <div class="sousmenu"> <a href="temp3.php">page 3</a> </div>
    <div class="sousmenu"> <a href="temp4.php">page 4</a> </div>
    <div class="sousmenu"> <a href="temp5.php">page 5</a> </div>
  </div>
  <div class="menu" id="menu2" onclick="afficheMenu(this)"> <a href="#">Notre région</a> </div>
  <div id="sousmenu2" style="display:none">
    <div class="sousmenu"> <a href="temp6.php">page 1</a> </div>
    <div class="sousmenu"> <a href="temp7.php">page 2</a> </div>
    <div class="sousmenu"> <a href="temp8.php">page 3</a> </div>
    <div class="sousmenu"> <a href="temp9.php">page 4</a> </div>
    <div class="sousmenu"> <a href="temp10.php">page 5</a> </div>
    <div class="sousmenu"> <a href="temp11.php">page 6</a> </div>
  </div>
</div>

Pour le reste je crois que c'est comme toi, j'ai une page index.php qui appelle le 'menu.php' avec :

<?php include("menu.php"); ?>

et mes pages, appelées ici temp1,2,3,etc., avec ton code :

<?php $nav_ouvert = 'rubrique0'; ?>
<?php $nav_en_cours = 'rubrique1'; ?>

Mais là, je ne sais pas trop où les mettre... + est-ce qu'il faut incrémenter rubrique1,2,3,etc. selon les pages ?
Voilà, voilà, j'espère que je suis clair, et merci d'avance.

en fait c'est assez simple car c'est la même structure, tu prends le code que j'ai mis pour un sous menu et tu remplaces par tes titres de rubrique/sous-rubrique.

<div class="menu" id="menu3" onclick="afficheMenu(this)"> 
        <a href="#">Notre village</a> 
    </div> 
    <div <?php if ($nav_ouvert == 'rubrique0') {echo ' style="display:block"';} else {echo ' style="display:none"';} ?> id="sousmenu3"> 
        <div class="sousmenu"> 
            <a href="temp1.php">page 1</a> 
        </div> 
        <div <?php if ($nav_en_cours == 'rubrique1') {echo ' class="sousmenuON"';} else {echo ' class="sousmenu"';} ?>> 
            <a href="temp2.php">page 2</a> 
        </div> 
        <div <?php if ($nav_en_cours == 'rubrique2') {echo ' class="sousmenuON"';} else {echo ' class="sousmenu"';} ?>> 
            <a href="temp3.php">page 3</a> 
        </div> 
        
    </div>

C'est dans les pages cible de ce menu précis, il y aura à chaque fois

<?php $nav_ouvert = 'rubrique0'; ?>

Et changer à chaque fois le code qui permet de laisser "sélectionné le sous-menu"

<?php $nav_en_cours = 'rubrique1'; ?>

<?php $nav_en_cours = 'rubrique2'; ?>

Modifié par jpthali (02 Jul 2010 - 13:59)

oui en effet, l'aspect visuel est indépendant du php si tu les as géré via un fichier css séparé.