Onglet actif menu déroulant

TeeZor Messages postés 23 Statut Membre -  
 Utilisateur anonyme -
Bonjour,

j'ai un menu vertical pour mon site basé sur celui-ci: https://css.developpez.com/galerie/demo/menus/verticalderoulant2/


Mon code php est le suivant: 

<div class="menu">
	<?php
	$i = 0;
	$query = $db->prepare("SELECT * FROM rubrique WHERE idCategorie = :id");
	$query->execute();
	while($rubrique = $query->fetch(PDO::FETCH_OBJ)){
	$i++;
	echo"

	<div class=\"menu\" id=\"menu".$i."\" onclick=\"afficheMenu(this)\">
		<a href=\"#\">{$rubrique->nomRubrique}</a>
	</div>

	<div id=\"sousmenu".$i."\" class=\"sousmenu\">";

		$query = $db->prepare("SELECT * FROM page WHERE idRubrique = :id");
		$query->execute(array('id' => $rubrique->idRubrique));
		while($ligne = $query->fetch(PDO::FETCH_OBJ)){
			echo "		
			<a href=\"/rubrique/".$ligne->idRubrique."/page/id/{$ligne->idPage}/".$ligne->titre.".html\">{$ligne->titre}<a/>
			<br />";
		}
		echo"</div>";
	}
	?>			 
</div>


et voici le code js: 


function afficheMenu(obj){
	
	var idMenu     = obj.id;
	var idSousMenu = 'sous' + idMenu;
	var sousMenu   = document.getElementById(idSousMenu);
	$sousMenu = $(sousMenu);

	$(".sousmenu").each(function() {
		if($(this).attr("id") != idSousMenu) {
			$(this).hide();
		}

	});

	if($sousMenu.is(':hidden')) {
		$sousMenu.show();
	} else {
		$sousMenu.hide();
	}	
}


Ma question c'est: comment garder le menu déroulé lorsque je suis sur une des pages lui correspondant ? Dans l'url je récupère l'id de ma rubrique, je peux certainement m'en servir mais je ne sais pas comment?

Merci

3 réponses

Réponse 1 / 3
Utilisateur anonyme
 
salut, je vais peut être dire une bêtise, mais je la dis tout de même.

dans le code original, les sous menu sont en display:none dans la balise même.

j'imagine que dans ta class sousmenu tu a fait la même chose.

Si tu récupère un id dans ton url qui est égale a ta variable $i, alors tu peu facilement faire ceci: 

<?php if(isset($_GET['id']) && $_GET['id'] == $i){ echo 'style="display: block"'; } else{ echo 'style="display: none"'; } ?>


de cette manière si tu récupère un id par la method get et que celui ci est égale a ta variable $i le sous menu sera affiché
׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
0
TeeZor Messages postés 23 Statut Membre
 
Bonjour,

merci pour la réponse.

Oui c'est bien ce que j'ai fais pour ma class sousmenu, je la display none par défaut.

Où dois-je insérer exactement le code que tu m'as fourni?

J'ai tenté: 

if(isset($_GET['id']) && $_GET['id'] == $i){ 
    
 echo " <div id=\"sousmenu2".$j."\" class=\"sousmenu2\">"; 

} 
else{ 
        echo " <div id=\"sousmenu".$j."\" class=\"sousmenu\">"; 
}


avec la class sousmenu2 qui display en block, mais sans succès.

Ne devrais-je pas plutot intervenir dans le code js ?
0
Réponse 2 / 3
Utilisateur anonyme
 
J'ai fait 4 pages ou les menu sont gérer grâce a des boucles

voici le code de l'une d'entre elle 


<body>
  <h1>page1</h1>
   <div id="menu">
  <?php 
  for($i=1; $i<5;$i++){
   ?>
   
   <div class="menu" id="menu<?php echo $i;  ?>" onclick="afficheMenu(this)">
    <a href="#">Menu <?php echo $i;  ?></a>
   </div>
   <div id="sousmenu<?php echo $i;  ?>" <?php if(isset($_GET['id']) && $_GET['id'] == $i){ echo 'style="display: block"'; } else{ echo 'style="display: none"'; } ?>>
   
   <?php 
   
     
  for($a=1; $a<5;$a++){
   
 
    ?>
    <div class="sousmenu">
     <a href="index<?php echo $i.".php?id=".$i;  ?>">Sous-Menu <?php echo $i.".".$a;  ?></a>
    </div>
   <?php
   
  }
    echo '</div>';
  
  } ?>
  </div>
  <script type="text/javascript">
   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 <= 4; 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";
     }
    }

   }
  </script>


voici le code en action

http://pour-ccm.zz.mu/index1.php


si tu comprends pas ce que j'ai fait dis le moi mais c'est tout simple




׺°"~'"°º×]|I{*------» m3a745p10!7 «------*}I|[׺°"~'"°º×
0
Réponse 3 / 3
Utilisateur anonyme
 
et alors ?
0
TeeZor Messages postés 23 Statut Membre
 
Hey, merci pour ta réponse, cependant je n'ai pas encore eu le temps de re-tester tout ça.
Mais là tu as repris le code js original qui est limité à 4 sous-menus. Pour ma part j'aurai n sous-menu, j'imagine que c'est tout de même possible de garder mon prore code js/jquery ?
0
Utilisateur anonyme
 
si ton jquery fonctionnait, il devrait fonctionner aussi là car je n'ai pas modifier javascript
0

Discussions similaires

messenger " actif il y X minutes " n'apparait pas
Ola -
Mimi -

3 réponses
Suppression listes déroulantes
Archa -
Sam -

5 réponses
Supprimer liste déroulante Excel
SamAlex -
b@bd -

8 réponses
Effacer liste déroulante
gabrielle -
jmps -

3 réponses
Que signifie "actif il y a x minutes" ?
Utilisateur anonyme -
Anne -

11 réponses