Onglet actif menu déroulant

TeeZor Messages postés 18 Date d'inscription Statut Membre Dernière intervention -
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

A voir également:

Onglet actif menu déroulant
Menu déroulant excel - Guide
Excel menu déroulant en cascade - Guide
Menu déroulant google sheet - Accueil - Guide bureautique
Raccourci rouvrir onglet fermé - Guide
Onglet disposition excel - Forum Excel

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

TeeZor Messages postés 18 Date d'inscription Statut Membre Dernière intervention

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 ?

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

Réponse 3 / 3

Utilisateur anonyme

et alors ?

TeeZor Messages postés 18 Date d'inscription Statut Membre Dernière intervention

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 ?

Utilisateur anonyme

si ton jquery fonctionnait, il devrait fonctionner aussi là car je n'ai pas modifier javascript

Discussions similaires

Suppression listes déroulantes

messenger " actif il y X minutes " n'apparait pas

Supprimer liste déroulante Excel

Effacer liste déroulante

Que signifie "actif il y a x minutes" ?

Votre réponse

Discussions similaires