Bonjour,
Je voudrais afficher un menu dynamique vertical
Voici mon code javascript :
Voici ma feuille css :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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) }
Et enfin voici ma page html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; }
Mais ca ne marche pas
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
J'ai aucun affichage pouvez vous m'aider s'il vous plait ?
Merci d'avance !
Partager