Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2271 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloquer le menu lors du changement de page

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Bloquer le menu lors du changement de page

n°2031911
quaresma
Posté le 24-10-2010 à 23:11:53  profilanswer
 

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
mood
Publicité
Posté le 24-10-2010 à 23:11:53  profilanswer
 

n°2033396
quaresma
Posté le 31-10-2010 à 23:03:30  profilanswer
 

please help


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Bloquer le menu lors du changement de page

 

Sujets relatifs
Afficher le contenu sans recharger la pageIntegration de de un et plusieurs XML dans page html
Menu spry sous dreamweaverCouleurs survol souris différent selon endroit sur la page
Problème popup JQuery changement taillemenu en PHP/mySQL
session qui fait "planter" la page ?Aspect bouton menu selon différentes sources
Comment renvoyer un formulaire automatiquementcomment placer une frame dans le body d'une page
Plus de sujets relatifs à : Bloquer le menu lors du changement de page

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.077 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR