Menu JS qui ne marche pas avec IE

Menu JS qui ne marche pas avec IE - HTML/CSS - Programmation

Marsh Posté le 21-11-2007 à 18:46:58    

Bonjour,
j'ai fait un menu (copié je ne sais plus où) mais il ne fonctionne qu'avec firefox.
Voici le code:

Code :
  1. <DIV class=menu id=wrap align=left>
  2. <TABLE class=menu id=menu cellSpacing=0 cellPadding=5 width="100%" name="menu">
  3. <TBODY>
  4. <TR>
  5. <TD><A id=menu0 href="index.html"><B>Accueil</A></B></TD></TR>
  6. <TR>
  7. <TD><A id=menu11 href="javascript:void(0)"><B>Les Sports&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></B></TD></TR>
  8. <TR>
  9. <TD><A id=menu1 href="javascript:void(0)"><B>L'art&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></B></TD></TR>
  10. <TR>
  11. <TD><A id=menu20 href="javascript:void(0)"><B>Char de la St Jean</B>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<IMG height=17 src="fleche.gif" width=38 align=top border=0></A></TD></TR></TBODY></TABLE></DIV>
  12. <DIV id=subwrap>
  13. <SCRIPT type=text/javascript>
  14. <!--
  15. if (TransMenu.isSupported()) {
  16. var ms = new TransMenuSet(TransMenu.direction.right, 5, -2, TransMenu.reference.topRight);
  17. var menu0 = ms.addMenu(document.getElementById("menu0" ));
  18. var menu11 = ms.addMenu(document.getElementById("menu11" ));
  19. menu11.addItem("BADMINTON", "badminton.html", "0" );
  20. menu11.addItem("BASKET", "basket.html", "0" );
  21. menu11.addItem("CYCLO", "cyclo.html", "0" );
  22. menu11.addItem("DANSE Hip-Hop", "hiphop.html", "0" );
  23. menu11.addItem("DANSE", "danse.html", "0" );
  24. menu11.addItem("GYM ENTRETIEN MATIN", "gymmatin.html", "0" );
  25. menu11.addItem("GYM ENTRETIEN SOIR", "gymsoir.html", "0" );
  26. menu11.addItem("GYM TONY'C", "gymtonyc.html", "0" );
  27. menu11.addItem("JUDO", "judo.html", "0" );
  28. menu11.addItem("MUSCULATION", "musculation.html", "0" );
  29. menu11.addItem("TENNIS DE TABLE", "tennisdetable.html", "0" );
  31. var menu1 = ms.addMenu(document.getElementById("menu1" ));
  32. menu1.addItem("ARTS PLASTIQUES", "artsplastiques.html", "0" );
  33. var menu3 = menu1.addMenu(menu1.items[0],0,0);
  34. menu1.addItem("COUTURE", "couture.html", "0" );
  35. var menu20 = ms.addMenu(document.getElementById("menu20" ));
  36. menu20.addItem("CHAR", "char.html", "0" );
  38. function init() {
  39. if (TransMenu.isSupported()) {
  40. TransMenu.initialize();
  41. menu0.onactivate = function() {document.getElementById("menu0" ).className = "hover"; };
  42. menu0.ondeactivate = function() {document.getElementById("menu0" ).className = ""; };
  43. menu11.onactivate = function() {document.getElementById("menu11" ).className = "hover"; };
  44. menu11.ondeactivate = function() {document.getElementById("menu11" ).className = ""; };
  45. menu1.onactivate = function() {document.getElementById("menu1" ).className = "hover"; };
  46. menu1.ondeactivate = function() {document.getElementById("menu1" ).className = ""; };
  47. menu20.onactivate = function() {document.getElementById("menu20" ).className = "hover"; };
  48. menu20.ondeactivate = function() {document.getElementById("menu20" ).className = ""; };
  50. }}
  51. TransMenu.dingbatSize = 0;
  52. TransMenu.spacerGif = "";
  53. TransMenu.dingbatOn = "";
  54. TransMenu.dingbatOff = "";
  55. TransMenu.sub_indicator = false;
  56. TransMenu.menuPadding = 15;
  57. TransMenu.itemPadding = 15;
  58. TransMenu.shadowSize = 2;
  59. TransMenu.shadowOffset = 3;
  60. TransMenu.shadowColor = "#888";
  61. TransMenu.shadowPng = "http://www.swmenu.com/modules/mod_swmenufree/images/transmenu/grey-40.png";
  62. TransMenu.backgroundColor = "#FFCC99";
  63. TransMenu.backgroundPng = "http://www.swmenu.com/modules/mod_swmenufree/images/transmenu/white-90.png";
  64. TransMenu.hideDelay = 600;
  65. TransMenu.slideTime = 300;
  66. TransMenu.selecthack =1;
  67. TransMenu.renderAll();
  68. if ( typeof window.addEventListener != "undefined" )
  69. window.addEventListener( "load", init, false );
  70. else if ( typeof window.attachEvent != "undefined" ) {
  71. window.attachEvent( "onload", init);
  72. }else{
  73. if ( window.onload != null ) {
  74. var oldOnload = window.onload;
  75. window.onload = function ( e ) {
  76. oldOnload( e );
  77. init();
  78. }
  79. }else
  80. window.onload = init();
  81. }
  82. }
  83. -->
  84. </SCRIPT>
  86. <DIV class="transMenu top" id=TransMenu0 style="VISIBILITY: hidden; WIDTH: 4px; HEIGHT: 4px">
  87. <DIV class=content style="LEFT: -4px; WIDTH: 2px; HEIGHT: 2px">
  88. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  89. <TBODY></TBODY></TABLE>
  90. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  91. <DIV class=shadowRight style="LEFT: 0px"><IMG height=1 src="" width=1></DIV>
  92. <DIV class=background style="WIDTH: 0px; HEIGHT: 0px; BACKGROUND-COLOR: #ffcc99"><IMG height=1 src="" width=1></DIV></DIV></DIV>
  93. <DIV class="transMenu top" id=TransMenu1>
  94. <DIV class=content>
  95. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  96. <TBODY>
  97. <TR class=item>
  98. <TD id=TransMenu1-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>BADMINTON</TD></TR>
  99. <TR class=item>
  100. <TD id=TransMenu1-1 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>BASKET</TD></TR>
  101. <TR class=item>
  102. <TD id=TransMenu1-2 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>CYCLO</TD></TR>
  103. <TR class=item>
  104. <TD id=TransMenu1-3 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>DANSE Hip-Hop</TD></TR>
  105. <TR class=item>
  106. <TD id=TransMenu1-4 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>DANSE</TD></TR>
  107. <TR class=item>
  108. <TD id=TransMenu1-5 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM ENTRETIEN MATIN</TD></TR>
  109. <TR class=item>
  110. <TD id=TransMenu1-6 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM ENTRETIEN SOIR</TD></TR>
  111. <TR class=item>
  112. <TD id=TransMenu1-7 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>GYM TONY'C</TD></TR>
  113. <TR class=item>
  114. <TD id=TransMenu1-8 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>JUDO</TD></TR>
  115. <TR class=item>
  116. <TD id=TransMenu1-9 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>MUSCULATION</TD></TR>
  117. <TR class=item>
  118. <TD id=TransMenu1-10 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>TENNIS DE TABLE</TD></TR></TBODY></TABLE>
  119. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  120. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  121. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  122. <DIV class="transMenu top" id=TransMenu2>
  123. <DIV class=content>
  124. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  125. <TBODY>
  126. <TR class=item>
  127. <TD id=TransMenu2-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>ARTS PLASTIQUES</TD></TR>
  128. <TR class=item>
  129. <TD id=TransMenu2-1 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>COUTURE</TD></TR></TBODY></TABLE>
  130. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  131. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  132. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  133. <DIV class=transMenu id=TransMenu3>
  134. <DIV class=content>
  135. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  136. <TBODY></TBODY></TABLE>
  137. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  138. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  139. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV></DIV>
  140. <DIV class="transMenu top" id=TransMenu4>
  141. <DIV class=content>
  142. <TABLE class=items cellSpacing=0 cellPadding=0 border=0>
  143. <TBODY>
  144. <TR class=item>
  145. <TD id=TransMenu4-0 style="PADDING-RIGHT: 15px; PADDING-LEFT: 30px; PADDING-BOTTOM: 15px; PADDING-TOP: 15px" noWrap>CHAR</TD></TR></TBODY></TABLE>
  146. <DIV class=shadowBottom><IMG height=1 src="" width=1></DIV>
  147. <DIV class=shadowRight><IMG height=1 src="" width=1></DIV>
  148. <DIV class=background><IMG height=1 src="" width=1></DIV></DIV>


Et le style correspondant :  
 

Code :
  1. <STYLE type=text/css>
  2. <!--
  3. .transMenu {
  4. position:absolute ;
  5. overflow:hidden;
  6. left:-1000px;
  7. top:-1000px;
  8. }
  9. .transMenu .content {
  10. position:absolute;
  11. }
  12. .transMenu .items {
  13. border: 0px solid #FFFFFF ;
  14. position:relative ;
  15. left:0px; top:0px;
  16. z-index:2;
  17. }
  18. .transMenu  td
  19. {
  20. padding: 5px 5px 5px 5px; 
  21. font-size: 12px;
  22. font-family: Arial, Helvetica, sans-serif;
  23. text-align: left;
  24. font-weight: bold;
  25. color: #000000;
  26. }
  27. #subwrap
  28. {
  29. text-align: left ;
  30. }
  31. .transMenu  .item.hover td
  32. { 
  33. color: #FFFFFF;
  34. }
  35. .transMenu .item td{
  36. border:2px solid #666666;
  37. border-style:ridge;
  38. text-decoration: none ;
  39. cursor:pointer;
  40. cursor:hand;
  41. }
  42. .transMenu .background {
  43. background-color: #FFCC99;
  44. position:absolute ;
  45. left:0px; top:0px;
  46. z-index:1;
  47. -moz-opacity:0.85;
  48. filter:alpha(opacity=85);
  49. }
  50. .transMenu .shadowRight {
  51. position:absolute ;
  52. z-index:3;
  53. top:-3000px; width:2px;
  54. -moz-opacity:0.85;
  55. filter:alpha(opacity=85)
  56. }
  57. .transMenu .shadowBottom {
  58. position:absolute ;
  59. z-index:1;
  60. left:-3000px; height:2px;
  61. -moz-opacity:0.85;
  62. filter:alpha(opacity=85)
  63. }
  64. .transMenu .item.hover {
  65. background-color: #FF6600;
  66. }
  67. .transMenu .item img {
  68. margin-left:10px;
  69. }
  70. table.menu {
  71. top: 0px;
  72. left: 0px;
  73. position:relative;
  74. margin:0px;
  75. border: 0px;
  76. z-index: 1;
  77. }
  78. table.menu a{
  79. margin:0px;
  80. padding: 5px 5px 5px 5px;
  81. display:block;
  82. position:relative;
  83. border:2px solid #666666; 
  84. }
  85. div.menu a,
  86. div.menu a:visited,
  87. div.menu a:link {
  88. font:bold;
  89. font-size: 16px;
  90. font-family: Arial, Helvetica, sans-serif;
  91. text-align: left; 
  92. color: #FF9933;
  94. text-decoration: none;
  95. margin-bottom:0px;
  96. display:block;
  97. white-space:nowrap ;
  98. }
  99. div.menu td {
  100. border-right: 2px solid #666666 ;
  101. border-top: 2px solid #666666 ;
  102. border-left: 2px solid #666666 ;
  103. background-color: #FFFFFF;
  104. border-bottom: 2px solid #666666 ; 
  105. }
  106. div.menu td.last {
  108. }
  109. #trans-active a{
  110. color: #FFFFFF;
  111. background-color: #33CCFF;
  112. }
  113. #menu a.hover   {
  114. color: #FFFFFF;
  115. background-color: #33CCFF;
  116. }
  117. #menu span {
  118. display:none;
  119. }
  120. body {
  121. background-color: #FF9966;
  122. }
  125. -->
  126. </STYLE>


 
désolé pour la présentation mais je suis sous un poste de l'université n'ayant que IE donc c'est la merde pour récupérer le code. bref
 
Vous pouvez trouver la page sur http://cuhbe.free.fr/site%20FJEPS/test.html
 
Si quelqu'un sait ce que je doit changer pour que le menu fonctionne sous IE ainsi que firefox , merci de me le dire par avance :)
 
Bye.

Reply

Marsh Posté le 21-11-2007 à 18:46:58   

Reply

Marsh Posté le 21-11-2007 à 19:33:33    

je connais pas onactivate / ondeactivate
essaie avec onmouseover onmouseout


---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 22-11-2007 à 10:31:16    

je recommande de jeter ce menu à la poubelle

Reply

Marsh Posté le 22-11-2007 à 12:46:53    

s'il fallait jeter un truc c est la page entière hein
mais comme c etait pas trop constructif j ai préféré l'être un peu plus [:dockbchris]


Message édité par mIRROR le 22-11-2007 à 12:47:09

---------------
« The enemy is the gramophone mind, whether or not one agrees with the record that is being played at the moment. » — George Orwell
Reply

Marsh Posté le 29-11-2007 à 23:21:14    

lol
 
ok
 
des conseils sinon ?
autre que de tout jeter. Genre pour faire un beau menu pratique, et pas moche.
 
Merci.

Reply

Sujets relatifs:

Leave a Replay

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