menu dynamique javascript
J'ai un menu vertical que j'ai inséré dans un site en ASP et auquel je voudrais rajouter des options....
- Je souhaiterai que mon menu reste en état lorsque je recharge ma page. Il s'agit d'un menu qui ressemble a un treeview et je veux donc que les sous-menu qui ont été développé le reste. Je pensais passer par une variable de session, mais est-ce possible en javascript ?
- Je souhaiterai a l'aide d'un boutton pouvoir développer l'ensemble du menu et inversement le refermer...
Si quelqu'un a des pistes a m'indiquer
Merci d'avance
Voici le code de mon menu:
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Test de menu dynamique</TITLE>
<STYLE>
.parent {
font-family: verdana;
font-weight: bold;
font-size: 10pt;
cursor: hand;
}
.child {
font-size: 10pt;
margin-left: 10pt;
font-weight: normal;
}
a:hover { color:red; }
</STYLE>
<SCRIPT LANGUAGE=javascript>
var intCount = 0;
//-Fonction d'ajout d'entrées principales-------------------------
function DynamicMenu_addParent(strName) {
var strID = 'P_' + strName;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onclick ="expandCollapse(this);">';
strTemp += '<IMG SRC="left.gif" Height="12">';
strTemp += ' ' + strName;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
this.div.innerHTML += strTemp;
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout des sous entrées principales-------------------------
function DynamicMenu_addSousParent(strName) {
var strID = 'S_' + strName;
var strTemp = '<DIV ID="' + strID + '" CLASS="parent"';
strTemp += ' onclick ="expandCollapse(this);">';
strTemp += '<IMG SRC="left.gif" Height="12">';
strTemp += ' ' + strName;
strTemp += '<DIV STYLE="display: none" CLASS="child"></DIV>';
strTemp += '</DIV>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
this.currentChild = document.getElementById(strID);
}
//-Fonction d'ajout de liens dans le menu-------------------------
function DynamicMenu_addChild(strName,strURL) {
var strTemp = '<A HREF="' + strURL + '"'
+ ' onClick="cancelBubble(arguments[0]);">'
+ strName + '</A><BR>';
if (document.all) {
this.currentChild.children[1].innerHTML += strTemp;
} else {
this.currentChild.childNodes[2].innerHTML += strTemp;
}
}
//-inhibe la cascade d'évènements au DIV conteneur----------------
function cancelBubble(netEvent) {
if (document.all) {
window.event.cancelBubble = true;
} else {
netEvent.cancelBubble = true;
}
}
//-Contracte ou expanse le menu-----------------------------------
function expandCollapse(objElement) {
var strId = objElement.id;
if (intCount == 0) {
if (document.all) {
var imgIcon = objElement.children[0];
objElement = objElement.children[1];
} else {
var imgIcon = objElement.childNodes[0];
objElement = objElement.childNodes[2];
}
if (objElement.style.display == "none") {
objElement.style.display = "block" ;
imgIcon.src = "bottom.gif" ;
} else {
objElement.style.display = "none" ;
imgIcon.src = "left.gif" ;
}
}
if (strId.substring(0,1) == 'S') {
intCount = 1;
}
if (strId.substring(0,1) == 'P' && intCount == 1) {
intCount = 0;
}
}
//-Fonction de création de menu dynamique-------------------------
function DynamicMenu(strName) {
//var id = "Menu" + intCount++;
var id = strName;
document.write('<DIV Id="' + id + '"></DIV>');
this.div = document.getElementById(id);
this.currentChild = null;
this.addParent = DynamicMenu_addParent;
this.addSousParent = DynamicMenu_addSousParent;
this.addChild = DynamicMenu_addChild;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language="Javascript">
var menu = new DynamicMenu("Menu1");
menu.addParent("Présentation","page1.html");
menu.addChild("Lien 1","page1.html");
menu.addSousParent("Node 11","");
menu.addChild("Lien 1","page1.html");
menu.addChild("Lien 2","page2.html");
menu.addSousParent("Node 111","");
menu.addChild("Lien 1","page1.html");
menu.addParent("Liens","");
menu.addChild("Lien 1","page1.html");
menu.addChild("Lien 2","page2.html");
</SCRIPT>
</BODY>
</HTML> |
