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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  menu deroulant (garder ouvert sur page actuelle)

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

menu deroulant (garder ouvert sur page actuelle)

n°1307090
numa1985
Posté le 16-02-2006 à 13:47:48  profilanswer
 

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...

mood
Publicité
Posté le 16-02-2006 à 13:47:48  profilanswer
 

n°1307158
gatsu35
Blablaté par Harko
Posté le 16-02-2006 à 14:32:55  profilanswer
 

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

n°1307165
numa1985
Posté le 16-02-2006 à 14:36:22  profilanswer
 

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?

n°1307175
anapajari
s/travail/glanding on hfr/gs;
Posté le 16-02-2006 à 14:43:28  profilanswer
 

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.


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

  menu deroulant (garder ouvert sur page actuelle)

 

Sujets relatifs
comment appeler du code python dans une page web ?lister tous les id déclarer dans une page html en js
[RESOLU]pb pour recuperer le titre d'un pageUtilisation de menu déroulant
Retour à la page précédente[HTML/Css] Recherche tous les attributs de mise en page
Espace dans mon menuMenu déroulant decalé
Plus de sujets relatifs à : menu deroulant (garder ouvert sur page actuelle)

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

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)