[DOM] menu dynamique php mysql javascript

Version imprimable

bonjour a tous, voila j'ai fait un menu vertical en php mysql,
les rubriques principales sont ecrites dans le code mais les
sous rubriques, pouvant changer, sont recuperées de la base
grace a un while.

le probleme c'est que c'est pas tres joli, donc j'aurais aimé savoir
comment faire pour cacher/afficher les sous rubriques quand on clique
sur une des rubriques principales ...

merci d'avance

ps: pour ceux qui doutent, oui j'ai cherché sur google et ici mais y a trop de resultats presque identiques et pas de bonnes explications ou les codes ne
fonctionnent pas

voici une partie de mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <table cellpadding="0" cellspacing="0" width="192"> <tr></br> <td class="rubrique" align=left onmouseover="this.className='on';" onmouseout="this.className='off';" class="off" > <font size="3px"> <a href="rayons/sac.php" target="main" style="color: black;text-decoration:none;"><b>        Sacs à main </b></a> </font> </td> </tr> <tr> <? while ($sam = mysql_fetch_array($reqsam)) { echo '<tr><td align=left class="sous-rubrique" onmouseover="this.className="on";" onmouseout="this.className="off";" class="off">             <a href=" rayons/sous-rayons.php?type='. $sam['TYPE_CODE'] .' " target="main" style="color: black;text-decoration:none;"> '.$sam['TYPE_LIBEL'].' </a></td></tr>'; } ?></tr>

Pistes

Salut,

Peut-être es tu obligé de passer par une structure de table. Voilà un petit code que je viens d'écrire et qui passe par rapport à ce que tu demandes (c'est juste une piste pour te montrer la démarche, ne te contente surtout pas d'un copier-coller de ce code):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 <html> <body> <script type="text/javascript"> function dispSSRub(td /* la cellule cliquée */) { //la ligne de la rubrique tr = td.parentNode; //on cherche le TR suivant, celui des sous-rubriques while ((tr=tr.nextSibling).tagName != "TR") ; var disp = tr.style.display; tr.style.display = (disp=='' ? 'none' :''); } </script> <table border="1"> <tr> <td onclick="dispSSRub(this);">Sport</td> </tr> <tr> <td> <table> <tr> <td>VOLLEY</td> <td>TENNIS</td> <td>FOOT</td> </tr> </table> </td> </tr> <tr> <td onclick="dispSSRub(this);">Lecture</td> </tr> <tr> <td> <table> <tr> <td>Policier</td> <td>Sciences-Fiction</td> <td>Poesie</td> </tr> </table> </td> </tr> </table> </body> </html>
Pour le coup il me semble qu'une structure de liste HTML
Code:

1 2 3 4 5 UL LI LI LI
Est plus adaptée

Regarde par exemple par ici pour une idée de réalisation: http://msdn.microsoft.com/en-us/libr...46(VS.85).aspx

ERE

15/03/2009, 13h27
maxland

je te remercies pour ta reponse mais je comprends pas ton code :cry:,
et de toutes façons il faut utiliser ajax apparement :?

bon tant pis et encore merci quand meme
15/03/2009, 14h02
emmanuel.remy

Pas d'AJAX

Ajax n'a rien à voir la dedans. C'est uniquement une question de HTML, CSS et Javascript. Et effectivement il reste difficile de réaliser ce genre d'outils sans connaitre le DOM, Javascript, etc...

ERE