Menu dynamique

Menu dynamique - HTML/CSS - Programmation

Marsh Posté le 02-03-2006 à 10:46:00    

Bonjour à tous,  
 
Je suis en train de faire un menu verticale dynamique aliant javascript, CSS et php... Le menu s'affiche bien avec mes catégorie et sous catégories (issues de ma bdd). La mise en page est OK avec mes CSS. Le hic : le JS!!
 
Voici mon problème. Quand je clique sur 1 catgéorie le principe et que toutes les autres se ferment et celle cliquée s'ouvre. Là elle sont toutes ouvertes. Alors qu'au départ tout devrait être fermé.
 
Voici mon code JS :

Code :
  1. <script language="javascript">
  2. window.onload = montre;
  3. function montre(id)
  4. {
  5. var d = document.getElementById(id);
  6. for (var i=1; i<=10; i++)
  7.  {
  8.  if (document.getElementById('smenu'+ i))
  9.   {
  10.   document.getElementById('smenu'+ i).style.display = 'none';
  11.   }
  12.  }
  13.  if(d)
  14.   {
  15.   d.style.display = 'block';
  16.   }
  17. }
  18. </script>


Et voici celui qui se trouve dans mon body :  

Code :
  1. <dl id="menu">
  2.          <?
  3.          $sql = " SELECT cat_cle, cat_lib FROM categorie WHERE cat_lib LIKE '%20%' ORDER BY cat_lib DESC ";
  4.          $qry = pg_query($conn, $sql);
  5.          while ($result = pg_fetch_assoc($qry))
  6.           {
  7.          ?>
  8.           <dt onClick="javascript:montre('smenu');"><a href="#"><?=$result['cat_lib']?></a></dt>
  9.           <?
  10.           $sql2 = " SELECT doc_cle, doc_lib, doc_type, doc_file, doc_date, doc_cat FROM documents WHERE doc_cat=".$result['cat_cle']." ORDER BY doc_lib DESC ";
  11.           $qry2 = pg_query($conn, $sql2);
  12.           while ($result2 = pg_fetch_assoc($qry2))
  13.            {
  14.            $clefile = $result2['doc_file'];
  15.           ?>
  16.            <dd id="smenu">
  17.             <ul>
  18.              <li>
  19.               <a href="../admin/file.php?cle=<?=$result2['doc_cle']?>&oid=<?=$clefile?>&doc_type=<?=$result2['doc_type']?>" target="bodemer">
  20.                <?=$result2['doc_lib']?>
  21.               </a>
  22.              </li>
  23.             </ul>
  24.            </dd>
  25.           <?
  26.            }
  27.           }
  28.           ?>
  29.         </dl>


 
Avez-vous une solution??

Reply

Marsh Posté le 02-03-2006 à 10:46:00   

Reply

Marsh Posté le 02-03-2006 à 11:01:42    

Montre nous plutot le code HTML généré (celui que tu obtients en faisant "Afficher la source" )

Reply

Marsh Posté le 02-03-2006 à 11:37:38    

ok le voici  
 

Code :
  1. <dl id="menu">
  2.                     <dt onClick="javascript:montre('smenu');"><a href="#"> 2006 </a></dt>
  3.            <dd id="smenu">
  4.             <ul>
  5.                           <li>
  6.               <a href="../admin/file.php?cle=5&oid=0&doc_type=1" target="bodemer">
  7.                n° 24 - Février               </a>
  8.              </li>
  9.                          </ul>
  10.            </dd>
  11.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2005  </a></dt>
  12.            <dd id="smenu">
  13.             <ul>
  14.                           <li>
  15.               <a href="../admin/file.php?cle=30&oid=42159&doc_type=1" target="bodemer">
  16.                n° 23 - Décembre                </a>
  17.              </li>
  18.                           <li>
  19.               <a href="../admin/file.php?cle=9&oid=42158&doc_type=1" target="bodemer">
  20.                n° 22 - Septembre               </a>
  21.              </li>
  22.                           <li>
  23.               <a href="../admin/file.php?cle=4&oid=42118&doc_type=1" target="bodemer">
  24.                n° 21 - Juin               </a>
  25.              </li>
  26.                           <li>
  27.               <a href="../admin/file.php?cle=2&oid=42117&doc_type=1" target="bodemer">
  28.                n° 20 - Avril               </a>
  29.              </li>
  30.                           <li>
  31.               <a href="../admin/file.php?cle=6&oid=42116&doc_type=1" target="bodemer">
  32.                n° 19 - Février               </a>
  33.              </li>
  34.                          </ul>
  35.            </dd>
  36.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2004  </a></dt>
  37.            <dd id="smenu">
  38.             <ul>
  39.                           <li>
  40.               <a href="../admin/file.php?cle=8&oid=42163&doc_type=1" target="bodemer">
  41.                n° 18 - Décembre               </a>
  42.              </li>
  43.                           <li>
  44.               <a href="../admin/file.php?cle=10&oid=42166&doc_type=1" target="bodemer">
  45.                n° 17 - Septembre                </a>
  46.              </li>
  47.                           <li>
  48.               <a href="../admin/file.php?cle=11&oid=42164&doc_type=1" target="bodemer">
  49.                n° 16 - Juin                </a>
  50.              </li>
  51.                           <li>
  52.               <a href="../admin/file.php?cle=12&oid=42162&doc_type=1" target="bodemer">
  53.                 n° 15 - Avril                </a>
  54.              </li>
  55.                           <li>
  56.               <a href="../admin/file.php?cle=13&oid=42161&doc_type=1" target="bodemer">
  57.                 n° 14 - Février                </a>
  58.              </li>
  59.                          </ul>
  60.            </dd>
  61.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2003 </a></dt>
  62.            <dd id="smenu">
  63.             <ul>
  64.                           <li>
  65.               <a href="../admin/file.php?cle=14&oid=42115&doc_type=1" target="bodemer">
  66.                n° 13 - Octobre               </a>
  67.              </li>
  68.                           <li>
  69.               <a href="../admin/file.php?cle=17&oid=42114&doc_type=1" target="bodemer">
  70.                n° 11 - Janvier               </a>
  71.              </li>
  72.                           <li>
  73.               <a href="../admin/file.php?cle=16&oid=42160&doc_type=0" target="bodemer">
  74.                 n° 12 - Juin                </a>
  75.              </li>
  76.                          </ul>
  77.            </dd>
  78.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2002  </a></dt>
  79.            <dd id="smenu">
  80.             <ul>
  81.                           <li>
  82.               <a href="../admin/file.php?cle=27&oid=33929&doc_type=1" target="bodemer">
  83.                n°10 - Septembre                </a>
  84.              </li>
  85.                           <li>
  86.               <a href="../admin/file.php?cle=28&oid=33928&doc_type=1" target="bodemer">
  87.                n° 9 - Juin                </a>
  88.              </li>
  89.                           <li>
  90.               <a href="../admin/file.php?cle=26&oid=33930&doc_type=1" target="bodemer">
  91.                n° 8 - Avril                </a>
  92.              </li>
  93.                           <li>
  94.               <a href="../admin/file.php?cle=25&oid=42113&doc_type=1" target="bodemer">
  95.                n° 7 - Février                </a>
  96.              </li>
  97.                          </ul>
  98.            </dd>
  99.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2001 </a></dt>
  100.            <dd id="smenu">
  101.             <ul>
  102.                           <li>
  103.               <a href="../admin/file.php?cle=24&oid=42112&doc_type=1" target="bodemer">
  104.                n° 6 - Décembre                </a>
  105.              </li>
  106.                           <li>
  107.               <a href="../admin/file.php?cle=23&oid=42111&doc_type=1" target="bodemer">
  108.                n° 5 - Septembre                </a>
  109.              </li>
  110.                           <li>
  111.               <a href="../admin/file.php?cle=22&oid=42110&doc_type=1" target="bodemer">
  112.                n° 4 - Juin                </a>
  113.              </li>
  114.                           <li>
  115.               <a href="../admin/file.php?cle=20&oid=42109&doc_type=1" target="bodemer">
  116.                n° 3 - Avril               </a>
  117.              </li>
  118.                          </ul>
  119.            </dd>
  120.                      <dt onClick="javascript:montre('smenu');"><a href="#"> 2000 </a></dt>
  121.            <dd id="smenu">
  122.             <ul>
  123.                           <li>
  124.               <a href="../admin/file.php?cle=19&oid=42107&doc_type=1" target="bodemer">
  125.                n° 2 - Décembre                </a>
  126.              </li>
  127.                           <li>
  128.               <a href="../admin/file.php?cle=29&oid=42157&doc_type=1" target="bodemer">
  129.                n° 1 - Septembre                </a>
  130.              </li>
  131.                          </ul>
  132.            </dd>


 
Il faut que j'indique un chiffre ici "onClick="javascript:montre('smenu???');"" mais il faut que ce soit dynamique et non en dure c'est là que je bloque

Reply

Sujets relatifs:

Leave a Replay

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