Onglet actif menu déroulant

TeeZor Messages postés 23 Statut Membre -
Utilisateur anonyme - 23 déc. 2013 à 06:13

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

Afficher la suite

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
1. 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

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|[×º°"~'"°º×

Réponse 3 / 3
Utilisateur anonyme

et alors ?
0
1. 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
2. Utilisateur anonyme
  
  si ton jquery fonctionnait, il devrait fonctionner aussi là car je n'ai pas modifier javascript
  
  0

Onglet actif menu déroulant

3 réponses

Discussions similaires

Newsletters