affichage menu dynamique vertical

Bonjour,

Je voudrais afficher un menu dynamique vertical

Voici mon code javascript :

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
 
 
var C_MENUBG = "silver"
var C_MENUTEXT = "black"
var C_ITEMBG = "#bf9f7a"
var C_ITEMTEXT = "black"
 
function CreateMenu() {
   document.write("<table onselectstart=\"return false\" oncontextmenu=\"return false\" width=200><tr><td>")
   for (var i = 0; i < menus.length; i++) {
      document.write("<span class=3dOut style=background-color:"+C_MENUBG+";color:"+C_MENUTEXT+";display:; id=element"+i+" onMouseOut=DoMenuMouseUp(this) onMouseDown=DoMenuMouseDown(this) onMouseUp=DoMenuMouseUp(this) onClick=DoMenuClick(this)><center>"+menus[i]+"</center></span>")
      for (var j = 0; j < sousmenus[i].length; j++)
         document.write("<span class=item style=background-color:"+C_ITEMBG+";color:"+C_ITEMTEXT+";display:none; id=element"+i+"$"+j+"><center>"+sousmenus[i][j]+"</center></span>")
   }
   document.write("</td></tr></table>")
}
function DoMenuMouseDown(element) {
   element.className = "3dIn"
}
function DoMenuMouseUp(element) {
   element.className = "3dOut"
}
function DoMenuClick(element) {
   ShowHideMenu(element)
}
function ShowHideMenu(element) {
   var n = GetNumMenu(element)
   if (GetObject("element"+n+"$0").style.display == "none")
      ShowMenu(element)
   else
      HideMenu(element)
}
function ShowMenu(element) {
   var n = GetNumMenu(element)
   for (var i = 0; i < sousmenus[n].length; i++)
      GetObject("element"+n+"$"+i).style.display = ""
}
function HideMenu(element) {
   var n = GetNumMenu(element)
   for (var i = sousmenus[n].length - 1; i >= 0; i--)
      GetObject("element"+n+"$"+i).style.display = "none"
}
function GetNumMenu(element) {
   var n = 0
   while (GetObject("element"+n) != element)
      n++
   return n
}
function GetObject(id) {
   return document.getElementById(id)
}

Voici ma feuille css :

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
 
 
.3dOut {
   border: solid 1px;
   border-top-color: white;
   border-bottom-color: gray;
   border-left-color: white;
   border-right-color: gray;
   font-family: Ms Serif;
   font-size: 18px;
   color: black;
   width: 175;
   height: 10;
   cursor: default;
}
.3dIn {
   border: solid 1px;
   border-top-color: gray;
   border-bottom-color: white;
   border-left-color: gray;
   border-right-color: white;
   font-family: Ms Serif;
   font-size: 18px;
   color: black;
   width: 175;
   height: 10;
   cursor: default;
}
.item {
   font-family: Ms Serif;
   font-size: 18px;
   width: 175;
   height: 10;
   cursor: default;
}

Et enfin voici ma page html :

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="test.aspx.vb" Inherits="Aristote.test" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Page sans titre</title>
    <link rel=stylesheet href="SSTest.css" />
    <script language="JavaScript" type ="text/javascript"  src="dynMenu.js"></script>
 
    <!-- Début du script -->
    <script language="JavaScript" type ="text/javascript">
    <!--
 
        var menus = [
   "Menu 1",
   "Menu 2",
   "Menu 3",
   "Menu 4",
   "Menu 5",
   "Menu 6",
   "Menu 7",
   "Menu 8"
]
var sousmenus = [
   /* Options du premier menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5"
   ],
   /* Options du deuxième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3"
   ],
   /* Options du troisième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6",
      "Option 7"
   ],
   /* Options du quatrième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4"
   ],
   /* Options du cinquième menu */
   [
      "Option 1",
      "Option 2"
   ],
   /* Options du sixième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6",
      "Option 7",
      "Option 8"
   ],
   /* Options du septième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4",
      "Option 5",
      "Option 6"
   ],
   /* Options du huitième menu */
   [
      "Option 1",
      "Option 2",
      "Option 3",
      "Option 4"
   ]
]
CreateMenu()
//-->
</script>
<!-- Fin du script //-->
 
</head>
<body style ="background-color :White " >
 
</body>
 
</html>

Mais ca ne marche pas
J'ai aucun affichage pouvez vous m'aider s'il vous plait ?

Merci d'avance !