affichage menu dynamique vertical

**developpeur71** · 03/02/2010, 17h00

Bonjour,

Je voudrais afficher un menu dynamique vertical

Voici mon code javascript :

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)
}

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

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>

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

Merci d'avance !

**Auteur** · 03/02/2010, 23h21

bonjour,

je parie que le problème vient de cette fonction document.write()

A partir du moment où tu appelles CreateMenu() tout le contenu de ta page (script, css, html) est remplacé par ce qui est passé en paramètre de document.write(), et donc ton script JS passe à la trappe. Je pense que ta feuille de style n'est pas appliquée ?

affichage menu dynamique vertical

JavaScript

Vue hybride

Discussions similaires

Partager

Partager