Bloquer le menu lors du changement de page

quaresma · 28-10-2010 21:27:48

Bonjour à toutes et tous,

je suis en train de faire un site et je voudrais faire en sorte que mon menu de gauche reste bloqué sur la partie du menu sur laquelle j'ai cliqué lors du changement de page.

Voici mon js :

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 <= 5; 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 site en question se trouve ici : http://www.la-grange-sardieres.fr/site% … ontenu.php

Par exemple, lorsque je clique sur "théâtre", je voudrai faire en sorte qu'au changement de page, le menu reste déroulé sur la partie que j'ai cliqué, c'est-à-dire pour cet exemple le menu principal "écrits" avec les sous-menus déroulés.

Si besoin, voici également le code HTML de la page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="robots" content="index, follow" />

<meta name="keywords" content=" "/>

<meta name="description" content=" "/>

<title></title>

     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

   <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />

     <link rel="stylesheet" href="css/contenu.css" type="text/css" />

   <script type="text/javascript" src="js/copie_functions.js"></script>

     <script type="text/javascript" src="js/functions_contenu.js"></script>

<style type="text/css">

<!--

body {

  margin-top: 0px;

}

-->

</style>

</head>

<body bgcolor="#333333">

<table width="1050" border="0" align="center" cellpadding="0" cellspacing="0" style="background: #000; height: 421px; min-height: 421px;">

<tr>

<td colspan="3" style="height: 50px; min-height: 50px; max-height: 50px;"></td>

</tr>

<tr>

  <td width="183" valign="top"><div id="menu">

<div class="menu" id="menu1" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br>

<div id="sousmenu1" style="display:none"><br>

<div class="sousmenu"><a href="contenu.php?num=6&lib=théâtre">théâtre</a></div><br><div class="sousmenu"><a href="contenu.php?num=7&lib=enfance et jeunesse">enfance et jeunesse</a></div><br><div class="sousmenu"><a href="contenu.php?num=8&lib=poésie">poésie</a></div><br><div class="sousmenu"><a href="contenu.php?num=9&lib=traduction">traduction</a></div><br><div class="sousmenu"><a href="contenu.php?num=10&lib=inédits">inédits</a></div><br><div class="sousmenu"><a href="contenu.php?num=11&lib=autres publications">autres publications</a></div><br></div>

<div class="menu" id="menu2" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br>

<div id="sousmenu2" style="display:none"><br>

<div class="sousmenu"><a href="contenu.php?num=12&lib=saison 2010-2011">saison 2010-2011</a></div><br><div class="sousmenu"><a href="contenu.php?num=13&lib=saison 2009-2010">saison 2009-2010</a></div><br><div class="sousmenu"><a href="contenu.php?num=14&lib=archives">archives</a></div><br></div>

<div class="menu" id="menu3" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br>

<div id="sousmenu3" style="display:none"><br>

<div class="sousmenu"><a href="contenu.php?num=15&lib=lacoop">lacoop</a></div><br><div class="sousmenu"><a href="contenu.php?num=16&lib=projets pour la scène">projets pour la scène</a></div><br><div class="sousmenu"><a href="contenu.php?num=17&lib=enseignement/Ateliers">enseignement/Ateliers</a></div><br><div class="sousmenu"><a href="contenu.php?num=18&lib=radio">radio</a></div><br></div>

<div class="menu" id="menu4" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br>

<div id="sousmenu4" style="display:none"><br>

<div class="sousmenu"><a href="contenu.php?num=19&lib=à l'affiche">à l'affiche</a></div><br><div class="sousmenu"><a href="contenu.php?num=20&lib=nouvelle publication">nouvelle publication</a></div><br><div class="sousmenu"><a href="contenu.php?num=21&lib=impromptus">impromptus</a></div><br></div>

<div class="menu" id="menu5" onclick="afficheMenu(this)"><a href="#"><img src="images/push1.gif" border="0" /></a></div><br>

<div id="sousmenu5" style="display:none"><br>

<div class="sousmenu"><a href="contenu.php?num=22&lib=presse">presse</a></div><br><div class="sousmenu"><a href="contenu.php?num=23&lib=liens">liens</a></div><br><div class="sousmenu"><a href="contenu.php?num=24&lib=contact">contact</a></div><br></div>

</div></td>

  <td width="800" valign="top" style="width: 665px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <td width="47%" valign="top" bgcolor="#FFFFFF" class="titre_lien">

  <br>

      <br><a href="#" onclick="afficheDescURL(' Contient mon C.V., entre autres [moimeme.fr] ')" class="lien">nom_lien</a></td>

    <td width="2%"> </td>

    <td width="51%" bgcolor="#FFFFFF"><div id="textDiv"><div class="texte_lieu">lieu</div>

      <br />

      <div class="texte_titre">Titre</div>

      <br />

      <div class="texte_dateetnbrepage">dateetnbrepage</div>

      <div class="texte_editeur">editeur</div>

      <br />

      <div class="texte_contenu">texte</div><br />

    </div></td>

  </tr>

</table></td>

<td width="17" style="background: #000;"> </td>

</tr>

</table>

</body>

</html>

Pensez-vous que cela est réalisable ?
Je pense qu'il faut ajouter des paramètres dans mon js, mais je ne sais pas où exactement. (ce n'est que mon avis)

Merci beaucoup pour votre aide et bonne soirée.

Dernière modification par quaresma (28-10-2010 21:28:36)

Pierrot · 29-10-2010 01:59:40

$("#contenucel1").append("Le contenu que tu veux")

a++

quaresma · 30-10-2010 11:19:33

Pierrot a écrit :

$("#contenucel1").append("Le contenu que tu veux")
a++

Bonjour,
et je dois le placer où ce code ??

Pierrot · 30-10-2010 12:13:32

au click dans ton menu
a++

quaresma · 30-10-2010 12:21:39

C'est-à-dire au clic dans mon menu ??

Dans la fonction javascript ou dans le code PHP ??

Par quoi dois-je remplacer "Le contenu que tu veux" ??

Merci encore et bonne journée

Pierrot · 30-10-2010 13:18:34

bon, pour la 1ere et 2ieme question, j'te laisse deviner.
pour la 3ieme, dis moi ce que tu veux mettre
a++

quaresma · 31-10-2010 14:52:08

Pierrot a écrit :

bon, pour la 1ere et 2ieme question, j'te laisse deviner.
pour la 3ieme, dis moi ce que tu veux mettre
a++

Ok, je vais voir sur un autre forum, si c'est pour jouer aux devinettes ^^

Pierrot · 31-10-2010 15:18:39

gros malin, que voulais tu que je réponde a ce genre de question ????

ce que tu veux mettre, y a que toi qui le sait, j'ai pas de boule de cristal

et ou le mettre ????
ou gère tu le click dans ton menu, c'est qd même toi qui a pissé ce programme.

d’ailleurs, le source que tu as posté ne correspond pas au source de ton site

a++

quaresma · 31-10-2010 22:45:17

Tu as raison "gros malin" (humour)

On repart du début :

je suis en train de faire un site et je voudrais faire en sorte que mon menu de gauche reste bloqué sur la partie du menu sur laquelle j'ai cliqué lorsque je change de page.
Par exemple, lorsque je clique sur le sous-menu "théâtre", j'aimerai que le menu relatif à théâtre reste ouvert (tu comprends ??) lors du changement de page.

Voici mon js :

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 <= 5; 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";

    }

  }

}

Ensuite le code pour le menu :

<div id="menu">

<?php

require("identification/connexion_sql.php");

// on attaque le php ici

// dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0

$req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête");

$rep1 = mysql_query($req1);

while($row1 = mysql_fetch_array($rep1)) {

// on affiche le menu de niveau 1

echo "<div class=\"menu\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this)\"><a href=\"#\">".$row1['lib_menu']."</a></div><br>";

// ensuite on fait une seconde requete pour chercher les sous menus de ce niveau, s'il y en a on les affiche, sinon on ne fait rien

$req2="SELECT id_menu, lib_menu FROM menus WHERE id_parent='".$row1['id_menu']."' ORDER BY ordre_menu"  or die ("impossible d'effectuer la requête");

$rep2=mysql_query($req2);

$nb2=mysql_num_rows($rep2);

if (isset($nb2) && $nb2>0) {

echo "<div id=\"sousmenu".$row1['id_menu']."\" style=\"display:none\"><br>";

while ($row2=mysql_fetch_array($rep2)) {

$num = $row2['id_menu'];

$lib = htmlentities($row2['lib_menu']);

print '<div class="sousmenu"><a href="contenu.php?num='.$num.'&lib='.$lib.'">'.$lib.'</a></div><br>';

}

echo "</div>";

}

}

?>

</div>

Puis le .ccs relatif au menu:

#menu{

  width:150px;

}

.menu, .sousmenu{

  text-align: right;

}

.menu{

  height:18px;

  width:150px;

  color:#fff;

  padding-bottom: 10px;

  top:0;

  font-family:arial,sans-serif;

  font-size:12px;

  text-decoration:none;

}

.sousmenu{

  height:14px;

  width:170px;

  padding: 0px;

  color:#ffffff;

  text-align: right;

}

.menu a{

  display:block;

  width:100%;

  height:100%;

  color:#fff;

  font-family:arial,sans-serif;

  font-size:12px;

  text-decoration:none;

  margin-top: 0;

}

.sousmenu a{

  display:block;

  width:100%;

  height:100%;

  color:#666666;

  font-family:Garamond;

  font-size:18px;

  text-decoration:none;

}

.sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{

  color:#ffffff;

}

Le code de la page php sur laquelle je fais les tests:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

  <head>

    <title>Création d'un design étape par étape - Etape n°1 : Le code xhtml</title>

    <meta http-equiv="Content-Style-Type" content="text/css" />

    <meta http-equiv="Content-Language" content="fr" />

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />

      <link rel="stylesheet" href="css/contenu.css" type="text/css" />

    <script type="text/javascript" src="js/copie_functions.js"></script>

      <script type="text/javascript" src="js/functions_contenu.js"></script>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

  </head>

  <body>

  <div id="conteneur">

    <div id="entete"></div>

    <div id="conteneur2">

    <div id="cellulegauche"><?php include("menu/copie_menu.php") ?></div>

    <div id="contenucel1">

    <div class="titre_lien"><?php 

  $titre = $_GET['lib']; 

  print''.$titre.''; ?></div>

  <?php 

  include ("requetes/requete_lien.php"); 

  ?>

    </div>

        <div id="contenucel2"></div>

        <div id="contenucel3" class="placeholder"></div>

        <script> 

    $("a.lien").click(function() { 

      loadContent( $(this).attr('href') ); 

      return false; 

    }); 

    function loadContent(page){ 

        $.ajax({ 

          url: page, 

          success: function(data) { 

            $('.placeholder').html(data); 

          } 

        }); 

    } 

    </script> 

        </div>

    </div>

  </body>

</html>

A savoir que le code

<script> 

    $("a.lien").click(function() { 

      loadContent( $(this).attr('href') ); 

      return false; 

    }); 

    function loadContent(page){ 

        $.ajax({ 

          url: page, 

          success: function(data) { 

            $('.placeholder').html(data); 

          } 

        }); 

    } 

    </script>

n'a rien à voir avec le menu de gauche. C'est unet fonction qui me permet d'afficher dans la zone blanche de droite un texte lorsque je clique sur un lien appartenant à la zone blanche du milieu.

Et enfin, le lien vers le site en test : Site de test

J'espère que ces données seront suffisantes, sinon n'hésites-pas à me dire ce qu'il manque.
Merci beaucoup pou ton aide et bonne soirée.

PS :

$("#contenucel1").append("Le contenu que tu veux")
pour la 3ieme, dis moi ce que tu veux mettre

Je ne veux rien remplacer, mais faire en sorte que mon menu de gauche reste bloqué sur la partie du menu sur laquelle j'ai cliqué lorsque je change de page.

Dernière modification par quaresma (31-10-2010 22:47:04)

Pierrot · 31-10-2010 23:21:21

A savoir que le code ............... n'a rien à voir avec le menu de gauche

fais la même pour les liens de ton menu et le problème est réglé

a++

quaresma · 31-10-2010 23:34:23

Pierrot a écrit :

A savoir que le code ............... n'a rien à voir avec le menu de gauche
fais la même pour les liens de ton menu et le problème est réglé
a++

Et il n'y a rien de plus facile ??

Genre une fonction PHP qui récupère l'id du menu et sous-menu en cours et qui laisse le menu en question ouvert tant que je n'ai pas changé de menu ??

Cela doit bien être réalisable non ??

Pierrot · 31-10-2010 23:48:28

'<div class="sousmenu"><a class="lienmenu" href="lefichierphpquirempliratoncadredumileu.php?num='.$num.'&lib='.$lib.'">'.$lib.'</a></div><br>

$("a.lienmenu").click(function() {
$("contenucel1").empty().append($.ajax({
url: $(this).attr('href')
)}
});

a++

quaresma · 01-11-2010 00:06:44

Pierrot a écrit :

'<div class="sousmenu"><a class="lienmenu" href="lefichierphpquirempliratoncadredumileu.php?num='.$num.'&lib='.$lib.'">'.$lib.'</a></div><br>

$("a.lienmenu").click(function() {
$("contenucel1").empty().append($.ajax({
url: $(this).attr('href')
)}
});

a++

Merci beaucoup.

j'essayerai demain et je te tiendrai au courant.

Bonne soirée

Pierrot · 03-11-2010 22:37:00

je crois que le pauvre quaresma est noyé :D
a++

PHP|Débutant :: Forums

Advertisement

#1 28-10-2010 21:27:48

Bloquer le menu lors du changement de page

#2 29-10-2010 01:59:40

Re : Bloquer le menu lors du changement de page

#3 30-10-2010 11:19:33

Re : Bloquer le menu lors du changement de page

#4 30-10-2010 12:13:32

Re : Bloquer le menu lors du changement de page

#5 30-10-2010 12:21:39

Re : Bloquer le menu lors du changement de page

#6 30-10-2010 13:18:34

Re : Bloquer le menu lors du changement de page

#7 31-10-2010 14:52:08

Re : Bloquer le menu lors du changement de page

#8 31-10-2010 15:18:39

Re : Bloquer le menu lors du changement de page

#9 31-10-2010 22:45:17

Re : Bloquer le menu lors du changement de page

#10 31-10-2010 23:21:21

Re : Bloquer le menu lors du changement de page

#11 31-10-2010 23:34:23

Re : Bloquer le menu lors du changement de page

#12 31-10-2010 23:48:28

Re : Bloquer le menu lors du changement de page

#13 01-11-2010 00:06:44

Re : Bloquer le menu lors du changement de page

#14 03-11-2010 22:37:00

Re : Bloquer le menu lors du changement de page

Pied de page des forums