Bloquer le menu lors du changement de page

Bloquer le menu lors du changement de page - HTML/CSS - Programmation

Marsh Posté le 24-10-2010 à 23:11:53    

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é 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 :

Code :
  1. function afficheMenu(obj){
  3. var idMenu     = obj.id;
  4. var idSousMenu = 'sous' + idMenu;
  5. var sousMenu   = document.getElementById(idSousMenu);
  7. /*****************************************************/
  8. /** on cache tous les sous-menus pour n'afficher    **/
  9. /** que celui dont le menu correspondant est cliqué **/
  10. /** où 4 correspond au nombre de sous-menus         **/
  11. /*****************************************************/
  12. for(var i = 1; i <= 5; i++){
  13.  if(document.getElementById('sousmenu' + i) && document.getElementById('sousmenu' + i) != sousMenu){
  14.   document.getElementById('sousmenu' + i).style.display = "none";
  15.  }
  16. }
  18. if(sousMenu){
  19.  //alert(sousMenu.style.display);
  20.  if(sousMenu.style.display == "block" ){
  21.   sousMenu.style.display = "none";
  22.  }
  23.  else{
  24.   sousMenu.style.display = "block";
  25.  }
  26. }
  28. }


Ensuite le code pour le menu :
 

Code :
  1. <div id="menu">
  2. <?php
  3. require("identification/connexion_sql.php" );
  4. // on attaque le php ici
  5. // dans un premier temps on recupere les menus de niveau 1 donc ceux qui ont l'id_parent egal a 0
  6. $req1 = "SELECT id_menu, lib_menu FROM menus WHERE id_parent='0' ORDER BY ordre_menu" or die ("impossible d'effectuer la requête" );
  7. $rep1 = mysql_query($req1);
  8. while($row1 = mysql_fetch_array($rep1)) {
  10. // on affiche le menu de niveau 1
  11. echo "<div class=\"menu\" id=\"menu".$row1['id_menu']."\" onclick=\"afficheMenu(this)\"><a href=\"#\">".$row1['lib_menu']."</a></div><br>";
  12. // 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
  14. $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" );
  15. $rep2=mysql_query($req2);
  16. $nb2=mysql_num_rows($rep2);
  17. if (isset($nb2) && $nb2>0) {
  19. echo "<div id=\"sousmenu".$row1['id_menu']."\" style=\"display:none\"><br>";
  20. while ($row2=mysql_fetch_array($rep2)) {
  21. $num = $row2['id_menu'];
  22. $lib = htmlentities($row2['lib_menu']);
  23. print '<div class="sousmenu"><a href="contenu.php?num='.$num.'&lib='.$lib.'">'.$lib.'</a></div><br>';
  24. }
  25. echo "</div>";
  26. }
  27. }
  28. ?>
  29. </div>


Puis le .ccs relatif au menu:
 

Code :
  1. #menu{
  2. width:150px;
  3. }
  4. .menu, .sousmenu{
  5. text-align: right;
  6. }
  7. .menu{
  8. height:18px;
  9. width:150px;
  10. color:#fff;
  11. padding-bottom: 10px;
  12. top:0;
  13. font-family:arial,sans-serif;
  14. font-size:12px;
  15. text-decoration:none;
  16. }
  17. .sousmenu{
  18. height:14px;
  19. width:170px;
  20. padding: 0px;
  21. color:#ffffff;
  22. text-align: right;
  23. }
  24. .menu a{
  25. display:block;
  26. width:100%;
  27. height:100%;
  28. color:#fff;
  29. font-family:arial,sans-serif;
  30. font-size:12px;
  31. text-decoration:none;
  32. margin-top: 0;
  33. }
  34. .sousmenu a{
  35. display:block;
  36. width:100%;
  37. height:100%;
  38. color:#666666;
  39. font-family:Garamond;
  40. font-size:18px;
  41. text-decoration:none;
  42. }
  43. .sousmenu a:hover, .sousmenu a:active, .sousmenu a:focus{
  44. color:#ffffff;
  45. }


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

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
  3. <head>
  4.  <title>Cr&eacute;ation d'un design &eacute;tape par &eacute;tape - Etape n&deg;1 : Le code xhtml</title>
  5.  <meta http-equiv="Content-Style-Type" content="text/css" />
  6.  <meta http-equiv="Content-Language" content="fr" />
  7.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.   <link rel="stylesheet" href="css/copie_style_menu.css" type="text/css" />
  9.       <link rel="stylesheet" href="css/contenu.css" type="text/css" />
  10.   <script type="text/javascript" src="js/copie_functions.js"></script>
  11.       <script type="text/javascript" src="js/functions_contenu.js"></script>
  12.         <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
  13. </head>
  15. <body>
  16. <div id="conteneur">
  17.     <div id="entete"></div>
  18.     <div id="conteneur2">
  19.     <div id="cellulegauche"><?php include("menu/copie_menu.php" ) ?></div>
  21.  <div id="contenucel1">
  22.  <div class="titre_lien"><?php
  23. $titre = $_GET['lib'];
  24. print''.$titre.''; ?></div>
  25. <?php
  26. include ("requetes/requete_lien.php" );
  27. ?>
  28.  </div>
  29.         <div id="contenucel2"></div>
  30.         <div id="contenucel3" class="placeholder"></div>
  31.      <script>
  32.     $("a.lien" ).click(function() {
  33.       loadContent( $(this).attr('href') );
  34.       return false;
  35.     });
  36.    
  37.     function loadContent(page){
  38.         $.ajax({
  39.           url: page,
  40.           success: function(data) {
  41.             $('.placeholder').html(data);
  42.           }
  43.         });
  44.     }
  45.     </script>
  46.         </div>
  47.  </div>
  48. </body>
  49. </html>


[color=#EF0F37]A savoir que le code

Code :
  1. <script>
  2.     $("a.lien" ).click(function() {
  3.       loadContent( $(this).attr('href') );
  4.       return false;
  5.     });
  6.    
  7.     function loadContent(page){
  8.         $.ajax({
  9.           url: page,
  10.           success: function(data) {
  11.             $('.placeholder').html(data);
  12.           }
  13.         });
  14.     }
  15.     </script>


[/color]
 
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.


Message édité par quaresma le 31-10-2010 à 23:03:09
Reply

Marsh Posté le 24-10-2010 à 23:11:53   

Reply

Marsh Posté le 31-10-2010 à 23:03:30    

please help

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed