[PHP-JS] Menu vertical dynamique (source requête SQL)
Bonjour,
je suis entrain de réaliser un menu vertical sur un intranet
J'ai donc récupérer un scripte js pour un menu vertical, dont voici le source :
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
149
150
151
152
153
154
|
////////////////////////////////////////////
//
// Script de [Menu Vertical] - Fichier JS
// Création: 10/10/2005
// Dernière modification: 01/07/2006
// by haryou [haryoudev.free.fr] - haryoudev@free.fr
//
/////////////////////////////////////////////
// Menu rectractable
/* Modifier comme ceci
var menu_rectractable = ""; -> Menu non retractable
var menu_rectractable = "ok"; -> Menu retractable
*/
var menu_rectractable = "ok";
// Eléments du Menu
/* Modifier ici les noms des catégories - Vous pouvez en rajouter ou en supprimer, mais il faudra en avoir autant de groupe de liens
categorie[X] = new Array(); -> Type de la variable (ne pas modifier)
categorie[X][0] = "Catégorie 1"; -> Nom de la catégorie
categorie[X][1] = "http://liencatégorie1/"; -> Lien de la catégorie - Si vide, il n'y aura pas de lien sur cette catégorie
categorie[X][2] = "_blank"; -> Cible du lien - _blank (nouvelle page), _self (même page),... ou nom de votre frame
*/
// --- Categories du Menu ---
categorie = new Array();
// -- [categorie 1]
categorie[0] = new Array();
categorie[0][0] = "Catégorie 1";
categorie[0][1] = "";
categorie[0][2] = "_blank";
// -- [categorie 2]
categorie[1] = new Array();
categorie[1][0] = "Catégorie 2";
categorie[1][1] = "http://liencatégorie2/";
categorie[1][2] = "_blank";
// -- [categorie 3]
categorie[2] = new Array();
categorie[2][0] = "Catégorie 3";
categorie[2][1] = "";
categorie[2][2] = "_self";
// -- [categorie 4]
categorie[3] = new Array();
categorie[3][0] = "Catégorie 4";
categorie[3][1] = "http://liencatégorie4/";
categorie[3][2] = "_blank";
// -- [categorie 5]
categorie[4] = new Array();
categorie[4][0] = "Catégorie 5";
categorie[4][1] = "";
categorie[4][2] = "_self";
// -- [categorie 6]
categorie[5] = new Array();
categorie[5][0] = "Catégorie 6";
categorie[5][1] = "http://liencatégorie6/";
categorie[5][2] = "_blank";
// Cible des liens du menu
/* Modifier ici la cible des liens. Vous devez affecter à la variable target:
_blank: pour ouvrir dans une nouvelle page => target = '_blank';
_self: pour ouvrir dans la même page => target = '_self';
xxxx: pour ouvrir dans la frame/iframe xxxx => target = 'xxxx';
*/
var target = '_blank';
// --- Groupe de liens ---
/* Modifier, ici, les titres et liens, la cible
Vous pouvez en rajouter ou en supprimer autant de liens que vous voulez.
*/
lien = new Array();
// -- [Liens de la categorie 1]
lien[0] = new Array();
lien[0]["Titre1"] = "http://liens1/";
lien[0]["Titre2"] = "http://liens2/";
lien[0]["Titre3"] = "http://liens3/";
lien[0]["Titre4"] = "http://liens4/";
lien[0]["Titre5"] = "http://liens5/";
// -- [Liens de la categorie 2]
lien[1] = new Array();
lien[1]["Titre1"] = "http://liens1/";
lien[1]["Titre2"] = "http://liens2/";
lien[1]["Titre3"] = "http://liens3/";
lien[1]["Titre4"] = "http://liens4/";
lien[1]["Titre5"] = "http://liens5/";
// -- [Liens de la categorie 3]
lien[2] = new Array();
lien[2]["Titre1"] = "http://liens1/";
lien[2]["Titre2"] = "http://liens2/";
lien[2]["Titre3"] = "http://liens3/";
lien[2]["Titre4"] = "http://liens4/";
lien[2]["Titre5"] = "http://liens5/";
// -- [Liens de la categorie 4]
lien[3] = new Array();
lien[3]["Titre1"] = "http://liens1/";
lien[3]["Titre2"] = "http://liens2/";
lien[3]["Titre3"] = "http://liens3/";
lien[3]["Titre4"] = "http://liens4/";
lien[3]["Titre5"] = "http://liens5/";
// -- [Liens de la categorie 5]
lien[4] = new Array();
lien[4]["Titre1"] = "http://liens1/";
lien[4]["Titre2"] = "http://liens2/";
lien[4]["Titre3"] = "http://liens3/";
lien[4]["Titre4"] = "http://liens4/";
lien[4]["Titre5"] = "http://liens5/";
// -- [Liens de la categorie 6]
lien[5] = new Array();
lien[5]["Titre1"] = "http://liens1/";
lien[5]["Titre2"] = "http://liens2/";
lien[5]["Titre3"] = "http://liens3/";
lien[5]["Titre4"] = "http://liens4/";
lien[5]["Titre5"] = "http://liens5/";
<!--------------------------------------------- Ne rien modifier sous cette ligne ---------------------------------------------->
function sousmenu_hide(actif) {
for (var i=0; i<categorie.length; i++)
document.getElementById('menu' + i).className = i == actif ? 'sousmenu' : 'hide';
}
rectract_ok = menu_rectractable == "ok" ? "onmouseover='sousmenu_hide(-1)'" : '';
document.write("<table cellspacing='0' cellpadding='0' width='80%' border='0'><tbody>");
for (var i=0; i<categorie.length; i++) {
document.write("<tr class='cat_titre_nonselect'>");
if (categorie[i][1] != "") {
document.write("<td width='2%' " + rectract_ok + " class='bordure_cat_g'> </td>");
document.write("<td height='20' width='96%' class='bordure_cat' onmouseover='sousmenu_hide(" + i + ")'>");
document.write(" <img src='images/menu.gif' height='9' width='8'> ");
document.write("<a href='" + categorie[i][1] + "' target='" + categorie[i][2] + "' class='cat_titre_nonselect' onmouseover=\"this.className='cat_titre_select';\" onmouseout=\"this.className='cat_titre_nonselect';\">" + categorie[i][0] + "</a>");
} else {
document.write("<td width='2%' " + rectract_ok + " class='bordure_cat_g'> </td>");
document.write("<td height='20' width='96%' class='bordure_cat' onmouseover='sousmenu_hide(" + i + ")'>");
document.write(" <img src='images/menu.gif' height='9' width='8'> " + categorie[i][0]);
}
document.write("</td><td width='2%' " + rectract_ok + " class='bordure_cat_d'> </td></tr>");
document.write("<tr>");
document.write("<td " + rectract_ok + "></td>");
document.write("<td><center><table width='90%' class='hide' id='menu" + (i) + "'>");
for (url in lien[i]) {
if (target == "_blank") {
document.write("<tr onclick=\"window.open('" + lien[i][url] + "')\">");
document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
} else if (target == "_self" || target == "_parent" || target == "_top") {
document.write("<tr onclick=\"document.location.href='" + lien[i][url] + "'\">");
document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
} else {
document.write("<tr onclick=\"top." + target + ".location.href='" + lien[i][url] + "'\">");
document.write("<td class='sousmenu_nonselect' onmouseover=\"this.className='sousmenu_select';\" onmouseout=\"this.className='sousmenu_nonselect';\">" + url + "</tr></td>");
}
}
document.write("</table></center></td><td " + rectract_ok + "></td><td></td></tr><tr " + rectract_ok + "><td colspan='4'></td></tr>");
}
document.write("</tbody></table>"); |
seulement comme la source de données de mon menu vient d'une requête SQL,
je voudrais savoir comment intégrer cette requête et faire le lien entre php et jvascript (je suis débutant sur les deux langages :oops: ).
c'est-à- dire transmettre le contenu du menu (un tableau) de php vers javascript.
Merci d'avance pour votre aide
