menu deroulant (garder ouvert sur page actuelle)

menu deroulant (garder ouvert sur page actuelle) - HTML/CSS - Programmation

Marsh Posté le 16-02-2006 à 13:47:48    

J'ai réalisé un menu déroulant en css et javascript!
Le probleme c'est qu'il faudrait que le menu reste ouvert avec la categorie surligné aprés avoir cliqué et avoir appeller la page en question.
Je vous met le code actuel:

Code :
  1. <script type="text/javascript">
  3. window.onload=montre;
  5. function montre(id,menuencours) {
  6.     var d = document.getElementById(id);
  7.     for (var i = 1; i<=10; i++)
  8.     {
  9.      if (document.getElementById('smenu'+i))
  10.      {
  11.       document.getElementById('smenu'+i).style.display='none';
  12.       document.getElementById('smenu'+menuencours).style.display='block';
  13.      }
  14.     }
  15.     if (d)
  16.     {
  17.      d.style.display='block';
  18.     }
  19. }
  21. </script>
  24. </head>
  26. <div id="menunav">
  27. <table cellpadding="0" cellspacing="0">
  28.     <tr>
  29.      <td>
  30.       <dt onclick="javascript:montre('smenu1',1);" >ACTIVITES</dt>
  31.        <dd style="display: none;" id="smenu1">
  32.         <ul>
  33.          <li><a href="#">Antennes</a></li>
  34.          <li><a href="#">R&eacute;seaux</a></li>
  35.          <li><a href="#">Radar</a></li>
  36.          <li><a href="#">Electromagn&eacute;tisme de puissance</a></li>
  38.         </ul>
  39.        </dd>
  40.      </td>
  41.     </tr>
  43.     <tr>
  44.      <td>
  45.       <dt onclick="javascript:montre('smenu2',2);">ACTUALITES</dt>
  46.        <dd style="display: none;" id="smenu2">
  47.         <ul>
  48.          <li><a href="index.php?page=liste_actu">Les plus r&eacute;centes</a></li>
  49.          <li><a href="index.php?page=historique_actu">Les archives</a></li>
  50.         </ul>
  51.        </dd>
  52.      </td>
  53.     </tr>
  55.     <tr>
  56.      <td>
  57.       <dt onclick="javascript:montre('smenu3',3);">ESPACE ECHANGES</dt>
  58.        <dd style="display: none;" id="smenu3">
  59.         <ul>
  60.          <li><a href="index.php?page=donnerAvis">Donnez votre avis</a></li>
  61.          <li><a href="index.php?page=voiravis">Avis publi&eacute;s</a></li>
  62.         </ul>
  63.        </dd>
  65.      </td>
  66.     </tr>
  68.     <tr>
  69.      <td>
  70.       <dt onclick="javascript:montre('smenu4',4);">QUI SOMMES-NOUS ?</dt>
  71.        <dd style="display: none;" id="smenu4">
  72.         <ul>
  73.          <li><a href="#">Pr&eacute;sentation</a></li>
  74.          <li><a href="index.php?page=affich_membres">Les membres</a></li>
  75.         </ul>
  76.        </dd>
  77.      </td>
  78.     </tr>


 
Et le css
 

Code :
  1. dl, dt, dd, ul, li {
  2. margin: 0 auto;
  3. padding: 0;
  4. list-style-type: none;
  5. text-align: left;
  6. }
  8. #menunav{
  9. position: absolute;
  10. margin-top: 60px;
  11. text-align: left;
  12. margin-left: 2px;
  13. width: 140px;
  14. border: 0px solid;
  15. }
  17. #menu td{
  18. background-image:url(./img/violet-menu.gif);
  19. width:140px;
  20. font: 70% verdana, arial, sans-serif;
  21. }
  23. #menu tr{
  24. vertical-align:middle;
  25. }
  27. #menu dt {
  28. font-size:   10px;
  29. cursor: pointer;
  30. line-height: 25px;
  31. text-align: center;
  32. font-weight: bold;
  33. color:#F0E8D9;
  34. }
  36. #menu ul {
  37. text-align: center;
  39. }
  41. #menu li {
  42. text-align: center;
  43. vertical-align:middle;
  44. background: #dfdfdf;
  45. font-weight: bold;
  46. font-size: 10px;
  47. }
  49. #menu li a, #menu dt a {
  50. color: #000;
  51. text-decoration: none;
  52. display: block;
  53. border: 1px solid #dfdfdf;
  54. height: 100%;
  55. vertical-align: center;
  56. }
  58. #menu li a:hover, #menu dt a:hover {
  59. color: white;
  60. background: #424c99;
  61. vertical-align: center;
  62. border: 1px groove white;
  63. }


 
HELP svp...

Reply

Marsh Posté le 16-02-2006 à 13:47:48   

Reply

Marsh Posté le 16-02-2006 à 14:32:55    

Enlève d'abord le tableau qui englobe ton menu,
le tableau n'a rien à faire ici :o

Reply

Marsh Posté le 16-02-2006 à 14:36:22    

ouai je sais bien, mais dans l'immediat ca va pas trop m'aider à faire ce que je veux faire.
et sinon comment on peut le garder ouvert selon la page?

Reply

Marsh Posté le 16-02-2006 à 14:43:28    

tu passes en paramètre de tes liens l'id du menu "ouvert", petit traitement en php pour rajouter dans le onload la fonction js qui déploie le bon menu.

Reply

Sujets relatifs:

Leave a Replay

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